Geweldige gemeenschapsmodule

naam

Hallo, dit is nomnoml , een hulpmiddel voor het tekenen van UML-diagrammen op basis van een eenvoudige syntaxis. Het probeert zijn syntaxis visueel zo dicht mogelijk bij het gegenereerde UML-diagram te houden zonder zijn toevlucht te nemen tot ASCII-tekeningen.

Gemaakt door Daniel Kallin Bijdragen van Alexander Moosbrugger en korroz .

Nomnoml was made possible by these cool projects

Bibliotheek

De zelfstandige javascript-bibliotheek nomnoml kan worden gebruikt om diagrammen op uw eigen webpagina weer te geven. De enige afhankelijkheden zijn lodash en dagre . Installeer het met behulp van npm of goede oude scriptopname.

NodeJS-gebruik met SVG-uitvoer:

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

Html-gebruik met een Canvas-renderingdoel:

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>

SVG-ondersteuning

Een experimentele (en niet volledig uitgeruste) SVG-weergavemodus is beschikbaar als functie nomnoml.renderSvg.

Opdrachtregelinterface

dist/nomnoml-cli.jsstelt de SVG-renderer bloot met een opdrachtregelinterface. Deze modus ondersteunt ook de #import: <filename>richtlijn waarmee u complexe diagrammen in meerdere bestanden kunt scheiden.

web applicaties

De nomnoml- webtoepassing is een eenvoudige editor met een live voorbeeld. Het is puur aan de clientzijde en wijzigingen worden opgeslagen in de localStorage van de browser , dus uw diagram zou hier de volgende keer moeten zijn (maar geen garanties).

Interaction

Het canvas kan worden gepand en gezoomd door te slepen en te scrollen in het rechter derde deel van het canvas.Gedownloade afbeeldingsbestanden krijgen de bestandsnaam in de #titlerichtlijn.

Example

Zo ziet het Decorator-patroon eruit in de syntaxis van 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

Richtlijnen alleen beschikbaar bij gebruik van de opdrachtregelinterface

1
#import: my-common-styles.nomnoml

Custom classifier styles

Een richtlijn die begint met "." definieert een classificatiestijl.

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

Beschikbare beelden zijn

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

Beschikbare modifiers zijn

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

Bijdragende

Als u wilt bijdragen aan het project, vindt u meer informatie inCONTRIBUTING.md.