Fantastico modulo comunitario

nomnoml

Ciao, questo è nomnoml , uno strumento per disegnare diagrammi UML basato su una semplice sintassi, che cerca di mantenere visivamente la sintassi il più vicino possibile al diagramma UML generato senza ricorrere ai 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 tua pagina Web. Le uniche dipendenze sono lodash e dagre . Installalo usando npm o la buona vecchia inclusione di 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 un obiettivo 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 completamente completa) è disponibile come funzione nomnoml.renderSvg .

Interfaccia a riga di comando

dist/nomnoml-cli.js espone il renderer SVG con un'interfaccia a riga di comando, che 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 tuo diagramma dovrebbe essere qui la prossima volta (ma senza garanzie).

Interaction

Il canvas può essere spostato e ingrandito trascinando e scorrendo il terzo destro del canvas, ai file di immagine scaricati verrà assegnato il nome file nella direttiva #title .

Example

Ecco come appare il modello 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]

Sono disponibili elementi visivi

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 .