Fantastico modulo della community

nom

Ciao, questo è nomnoml , uno strumento per disegnare diagrammi UML basato su una semplice sintassi. 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 di diagrammi sulla propria pagina Web. Le uniche dipendenze sono lodash e dagre .Installarlo utilizzando npm o l'inclusione di un buon vecchio script.

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

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

Interfaccia a riga di comando

dist/nomnoml-cli.jsespone il renderer SVG con un'interfaccia a riga di comando.Questa modalità supporta anche la #import: <filename>direttiva 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 tuo diagramma dovrebbe essere qui la prossima volta (ma senza garanzie).

Interaction

L'area di disegno può essere spostata e ingrandita trascinando e scorrendo nel terzo a destra dell'area di disegno.I file di immagine scaricati riceveranno il nome del file nella #titledirettiva.

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]

Gli elementi visivi 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 inCONTRIBUTING.md.