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
5npm 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.js
stelt 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 #title
richtlijn.
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
17visual=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
6center
bold
underline
italic
dashed
empty
Bijdragende
Als u wilt bijdragen aan het project, vindt u meer informatie inCONTRIBUTING.md.