nomnoml
Hola, esta es nomnoml , una herramienta para dibujar diagramas UML basada en una sintaxis simple que intenta mantener su sintaxis visualmente lo más cercana posible al diagrama UML generado sin recurrir a dibujos ASCII.
Creado por Daniel Kallin Contribuciones de Alexander Moosbrugger y Korroz .
Nomnoml was made possible by these cool projects
Biblioteca
La biblioteca javascript independiente nomnoml se puede utilizar para representar diagramas en su propia página web. Las únicas dependencias son lodash y dagre . Instálelo utilizando npm o la inclusión de un buen script antiguo.
Uso de NodeJS con salida SVG:
1
2
3
4
5npm install nomnoml
var nomnoml = require('nomnoml');
var src = '[nomnoml] is -> [awesome]';
console.log(nomnoml.renderSvg(src));
Uso de HTML con un objetivo de representación de 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>
Soporte SVG
Un modo de renderizado SVG experimental (y no con todas las funciones) está disponible como nomnoml.renderSvg
función.
Interfaz de línea de comandos
dist/nomnoml-cli.js
expone el renderizador SVG con una interfaz de línea de comandos.Este modo también es compatible con la #import: <filename>
directiva que le permite separar diagramas complejos en varios archivos.
Aplicación web
La aplicación web nomnoml es un editor simple con una vista previa en vivo. Es puramente del lado del cliente y los cambios se guardan en el almacenamiento local del navegador , por lo que su diagrama debería estar aquí la próxima vez (pero no hay garantías).
Interaction
El lienzo se puede desplazar y ampliar arrastrando y desplazándose en el tercio derecho del lienzo. Los archivos de imagen descargados recibirán el nombre de archivo en la #title
directiva.
Example
Así es como se ve el patrón Decorator en la sintaxis 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
Directivas solo disponibles cuando se usa la interfaz de línea de comandos
1#import: my-common-styles.nomnoml
Custom classifier styles
Una directiva que comienza con "." Define un estilo de clasificador.
1
2
3
4#.box: fill=#88ff88
#.blob: fill=pink visual=ellipse italic bold dashed
[<box> GreenBox]
[<blob> HideousBlob]
Las imágenes disponibles son
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
Los modificadores disponibles son
1
2
3
4
5
6center
bold
underline
italic
dashed
empty
Contribuyendo
Si desea contribuir al proyecto, hay más información disponible en CONTRIBUTING.md.