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

• jison
• dagre
• lodash
• tifones
• zepto
• codemirror
• solarizado

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
5
npm 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.renderSvgfunción.

Interfaz de línea de comandos

dist/nomnoml-cli.jsexpone 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 #titledirectiva.

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

Los modificadores disponibles son

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

Contribuyendo

Si desea contribuir al proyecto, hay más información disponible en CONTRIBUTING.md.