nonoml

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

Gemaakt door Daniel Kallin , bijdragen van Alexander Moosbrugger en Korroz .

Nomnoml was made possible by these cool projects

• jison
• dagre
• lodash
• typiconen
• zepto
• codespiegel
• gesolariseerd

Bibliotheek

De standalone 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 de 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

Als functie is een experimentele (en niet volledig functionele) SVG-renderingmodus beschikbaar nomnoml.renderSvg.

Commandoregelinterface

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

web applicatie

De nomnoml- webapplicatie is een eenvoudige editor met een live preview. Het is puur client-side en wijzigingen worden opgeslagen in de localStorage van de browser , dus uw diagram zou hier de volgende keer moeten staan ​​(maar geen garanties).

Interaction

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

Example

Zo ziet het Decorator-patroon eruit in de nomnoml-syntaxis:

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