nomnoml
Hola, es tracta de nomnoml , una eina per dibuixar diagrames UML basats en una sintaxi simple. Intenta mantenir la seva sintaxi visual el més a prop possible del diagrama UML generat sense recórrer als dibuixos ASCII.
Creat per Daniel Kallin, aportacions d' Alexander Moosbrugger i korroz .
Nomnoml was made possible by these cool projects
Biblioteca
La biblioteca javascript autònoma nomnoml es pot utilitzar per representar diagrames a la vostra pròpia pàgina web. Les úniques dependències són lodash i dagre . Instal·leu-la amb npm o amb una bona inclusió de scripts antics.
Ús de NodeJS amb sortida SVG:
1
2
3
4
5npm install nomnoml
var nomnoml = require('nomnoml');
var src = '[nomnoml] is -> [awesome]';
console.log(nomnoml.renderSvg(src));
Ús HTML amb un objectiu de representació de Canvas:
1
2
3
4
5
6
7
8
9
10<script src="lodash.js"></script>
<script src="dagre.js"></script>
<script src="nomnoml.js"></script>
<canvas id="target-canvas"></canvas>
<script>
var canvas = document.getElementById('target-canvas');
var source = '[nomnoml] is -> [awesome]';
nomnoml.draw(canvas, source);
</script>
Suport SVG
Com a nomnoml.renderSvg
funció està disponible un mode de representació SVG experimental (i no completament inclòs) .
Interfície de línia d'ordres
dist/nomnoml-cli.js
exposa el renderitzador SVG amb una interfície de línia d'ordres. Aquest mode també admet la #import: <filename>
directiva que us permet separar diagrames complexos en diversos fitxers.
Aplicació web
L' aplicació web nomnoml és un editor senzill amb una vista prèvia en viu. És exclusivament del costat del client i els canvis es guarden al localStorage del navegador , de manera que el vostre diagrama hauria d'estar aquí la propera vegada (però sense garanties).
Interaction
Es pot desplaçar i desplaçar el llenç arrossegant i desplaçant-se al terç dret del llenç. Els fitxers d'imatges descarregats tindran el nom de fitxer a la #title
directiva.
Example
Així és com es veu el patró Decorator a la sintaxi nomnoml:
1
2
3
4
5
6
7
8[<frame>Decorator pattern|
[<abstract>Component||+ operation()]
[Client] depends --> [Component]
[Decorator|- next: Component]
[Decorator] decorates -- [ConcreteComponent]
[Component] <:- [Decorator]
[Component] <:- [ConcreteComponent]
]
Association types
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15- association
-> association
<-> association
--> dependency
<--> dependency
-:> generalization
<:- generalization
--:> implementation
<:-- implementation
+- composition
+-> composition
o- aggregation
o-> aggregation
-- note
-/- hidden
Classifier types
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20[name]
[<abstract> name]
[<instance> name]
[<reference> name]
[<note> name]
[<package> name]
[<frame> name]
[<database> name]
[<start> name]
[<end> name]
[<state> name]
[<choice> name]
[<input> name]
[<sender> name]
[<receiver> name]
[<transceiver> name]
[<actor> name]
[<usecase> name]
[<label> name]
[<hidden> name]
Directives
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17#arrowSize: 1
#bendSize: 0.3
#direction: down | right
#gutter: 5
#edgeMargin: 0
#edges: hard | rounded
#fill: #eee8d5; #fdf6e3
#fillArrows: false
#font: Calibri
#fontSize: 12
#leading: 1.25
#lineWidth: 3
#padding: 8
#spacing: 40
#stroke: #33322E
#title: filename
#zoom: 1
Directives només disponibles quan s’utilitza la interfície de línia d’ordres
1#import: my-common-styles.nomnoml
Custom classifier styles
Una directiva que comença per "." Defineix un estil classificador.
1
2
3
4#.box: fill=#88ff88
#.blob: fill=pink visual=ellipse italic bold dashed
[<box> GreenBox]
[<blob> HideousBlob]
Les imatges disponibles són
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17visual=actor
visual=class
visual=database
visual=ellipse
visual=end
visual=frame
visual=hidden
visual=input
visual=none
visual=note
visual=package
visual=receiver
visual=rhomb
visual=roundrect
visual=sender
visual=start
visual=transceiver
Els modificadors disponibles són
1
2
3
4
5
6center
bold
underline
italic
dashed
empty
Contribuint
Si voleu contribuir al projecte, hi ha més informació disponible a CONTRIBUTING.md.