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

• jison
• dagre
• lodash
• tipicons
• zepto
• codemirror
• solaritzada

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
5
npm 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.renderSvgfunció està disponible un mode de representació SVG experimental (i no completament inclòs) .

Interfície de línia d'ordres

dist/nomnoml-cli.jsexposa 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 #titledirectiva.

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
17
visual=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
6
center
bold
underline
italic
dashed
empty

Contribuint

Si voleu contribuir al projecte, hi ha més informació disponible a CONTRIBUTING.md.