nonoml

Hola, aquest és nomnoml , una eina per dibuixar diagrames UML basats en una sintaxi senzilla. Intenta mantenir la seva sintaxi visualment el més a prop possible del diagrama UML generat sense recórrer a dibuixos ASCII.

Creat per Daniel Kallin Contribucions d' Alexander Moosbrugger i korroz .

Nomnoml was made possible by these cool projects

• jison
• dagre
• lodash
• tipics
• zepto
• codimirall
• solaritzat

Biblioteca

La biblioteca javascript autònoma de 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 utilitzant npm o una bona inclusió d'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 de 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

Hi ha disponible com a funció un mode de representació SVG experimental (i no amb totes les funcions) nomnoml.renderSvg.

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 directe. És purament del costat del client i els canvis es desen al localStorage del navegador , de manera que el vostre diagrama hauria d'estar aquí la propera vegada, (però sense garanties).

Interaction

El llenç es pot desplaçar i ampliar arrossegant i desplaçant-se al terç dret del llenç. Els fitxers d'imatge baixats rebran el nom del fitxer a la #titledirectiva.

Example

Així és com es veu el patró Decorator en 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

Les directives només estan 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 amb "." defineix un estil de classificador.

1
2
3
4
#.box: fill=#88ff88
#.blob: fill=pink visual=ellipse italic bold dashed
[<box> GreenBox]
[<blob> HideousBlob]

Els visuals 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 col·laborar amb el projecte teniu més informació disponible aCONTRIBUTING.md.