Fantastico modulo della community

nomnoml

Ciao, questo è nomnoml , uno strumento per disegnare diagrammi UML basato su una sintassi semplice, che cerca di mantenere la sua sintassi visivamente il più vicino possibile al diagramma UML generato senza ricorrere a disegni ASCII.

Creato da Daniel Kallin, contributi di Alexander Moosbrugger e korroz .

Nomnoml was made possible by these cool projects

Biblioteca

La libreria javascript standalone nomnoml può essere utilizzata per eseguire il rendering dei diagrammi sulla tua pagina Web. Le uniche dipendenze sono lodash e dagre . Installalo utilizzando npm o il buon vecchio script di inclusione.

Utilizzo di NodeJS con output SVG:

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

Utilizzo di HTML con una destinazione di rendering 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>

Supporto SVG

Una modalità di rendering SVG sperimentale (e non completa) è disponibile come funzione nomnoml.renderSvg .

Interfaccia della riga di comando

dist/nomnoml-cli.js espone il renderer SVG con un'interfaccia a riga di comando Questa modalità supporta anche la direttiva #import: <filename> che consente di separare diagrammi complessi in più file.

applicazione web

L'applicazione web nomnoml è un semplice editor con un'anteprima dal vivo.È puramente lato client e le modifiche vengono salvate nel localStorage del browser, quindi il diagramma dovrebbe essere qui la prossima volta, (ma non garantisce).

Interaction

La tela può essere spostata e ingrandita trascinando e scorrendo nel terzo destro dell'area di #title . #title file di immagine scaricati verrà assegnato il nome del file nella direttiva #title .

Example

Ecco come appare il pattern Decorator nella sintassi 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

Direttive disponibili solo quando si utilizza l'interfaccia della riga di comando

1
#import: my-common-styles.nomnoml

Custom classifier styles

Una direttiva che inizia con "." Definisce uno stile di classificazione.

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

Le immagini disponibili sono

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

I modificatori disponibili sono

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

Contribuire

Se vuoi contribuire al progetto maggiori informazioni sono disponibili in CONTRIBUTING.md .