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

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

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.