Módulo comunitario incrible

nomnoml

Ola, trátase de nomnoml , unha ferramenta para debuxar diagramas UML baseada nunha sinxela sintaxe. Tenta manter a súa sintaxe visual o máis preto posible do diagrama UML xerado sen recorrer a debuxos ASCII.

Creado por Daniel Kallin . Contribucións de Alexander Moosbrugger e korroz .

Nomnoml was made possible by these cool projects

Biblioteca

A biblioteca javascript autónoma nomnoml pode usarse para representar diagramas na súa propia páxina web. As únicas dependencias son lodash e dagre . Instálea usando npm ou unha boa inclusión de script antigo.

Uso de NodeJS con saída SVG:

1 2 3 4 5
npm install nomnoml var nomnoml = require('nomnoml'); var src = '[nomnoml] is -> [awesome]'; console.log(nomnoml.renderSvg(src));

Uso HTML cun obxectivo de representación 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>

Soporte SVG

Como nomnoml.renderSvgfunción está dispoñible un modo de representación SVG experimental (e non con todas as características) .

Interface de liña de comandos

dist/nomnoml-cli.jsexpón o procesador SVG cunha interface de liña de comandos. Este modo tamén admite a #import: <filename>directiva que lle permite separar diagramas complexos en varios ficheiros.

Aplicación web

A aplicación web nomnoml é un editor sinxelo cunha vista previa en directo. É exclusivamente do lado do cliente e os cambios gárdanse no LocalStorage do navegador , polo que o seu diagrama debería estar aquí a próxima vez (pero sen garantías).

Interaction

O lenzo pódese mover e ampliar arrastrando e desprazando no terzo dereito do lenzo. Os ficheiros de imaxe descargados recibirán o nome do ficheiro na #titledirectiva.

Example

Así é como se ve o patrón Decorator na sintaxe 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

As directivas só están dispoñibles cando se usa a interface da liña de comandos

1
#import: my-common-styles.nomnoml

Custom classifier styles

Unha directiva que comeza con "." Define un estilo clasificador.

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

Os visuais dispoñibles son

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

Os modificadores dispoñibles son

1 2 3 4 5 6
center bold underline italic dashed empty

Contribuíndo

Se queres contribuír ao proxecto, hai máis información dispoñible en CONTRIBUTING.md.