Mòdul de comunitat impressionant

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 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.