项目作者: skanaar

项目描述 :
The sassy UML diagram renderer
高级语言: TypeScript
项目地址: git://github.com/skanaar/nomnoml.git
创建时间: 2014-06-03T07:57:09Z
项目社区:https://github.com/skanaar/nomnoml

开源协议:MIT License

下载


nomnoml
npm version
Known Vulnerabilities

web site

Hello, this is nomnoml, a tool for drawing UML diagrams based on a simple syntax. It tries to keep its syntax visually as close as possible to the generated UML diagram without resorting to ASCII drawings.

Created by Daniel Kallin with help from a group of contributors.

Library

The nomnoml javascript library can render diagrams on your web page. The only dependency is graphre. Install nomnoml using either npm or good old script inclusion.

SVG output in NodeJS

  1. npm install nomnoml
  1. var nomnoml = require('nomnoml')
  2. var src = '[nomnoml] is -> [awesome]'
  3. console.log(nomnoml.renderSvg(src))

In the SVG output the node name is attached to SVG shapes and <g> containers with data-name attribute. You can use this to implement interactive diagrams.

  1. document.querySelector('svg').onclick = function (e) {
  2. console.log(e.target.closest('g[data-name]')?.attributes['data-name'])
  3. }

HTML Canvas rendering target

  1. <script src="//unpkg.com/graphre/dist/graphre.js"></script>
  2. <script src="//unpkg.com/nomnoml/dist/nomnoml.js"></script>
  3. <canvas id="target-canvas"></canvas>
  4. <script>
  5. var canvas = document.getElementById('target-canvas')
  6. var source = '[nomnoml] is -> [awesome]'
  7. nomnoml.draw(canvas, source)
  8. </script>

Command Line Interface

npx nomnoml exposes the SVG renderer with a command-line interface. This mode also supports the #import: <filename> directive for dividing complex diagrams into multiple files.

  1. npx nomnoml input-file.noml

Web application

The nomnoml web application is a simple editor with a live preview. It is purely client-side and uses your browser’s localStorage, so your diagram should be here the next time you visit (but no guarantees).

Example

This is how the Decorator pattern can look in nomnoml syntax:

  1. [<frame>Decorator pattern|
  2. [<abstract>Component||+ operation()]
  3. [Client] depends --> [Component]
  4. [Decorator|- next: Component]
  5. [Decorator] decorates -- [ConcreteComponent]
  6. [Component] <:- [Decorator]
  7. [Component] <:- [ConcreteComponent]
  8. ]

Association types

  1. - association
  2. -> association
  3. <-> association
  4. --> dependency
  5. <--> dependency
  6. -:> generalization
  7. <:- generalization
  8. --:> implementation
  9. <:-- implementation
  10. +- composition
  11. +-> composition
  12. o- aggregation
  13. o-> aggregation
  14. -o) ball and socket
  15. o<-) ball and socket
  16. ->o ball and socket
  17. -- note
  18. -/- hidden

Classifier types

  1. [name]
  2. [<abstract> name]
  3. [<instance> name]
  4. [<reference> name]
  5. [<note> name]
  6. [<package> name]
  7. [<frame> name]
  8. [<database> name]
  9. [<pipe> name]
  10. [<start> name]
  11. [<end> name]
  12. [<state> name]
  13. [<choice> name]
  14. [<sync> name]
  15. [<input> name]
  16. [<lollipop> lollipop]
  17. [<sender> name]
  18. [<socket> socket]
  19. [<receiver> name]
  20. [<transceiver> name]
  21. [<actor> name]
  22. [<usecase> name]
  23. [<label> name]
  24. [<hidden> name]
  25. [<table> name| a | 5 || b | 7]

Comments

Comments are supported at the start of a line.

  1. //[commented]
  2. [not //commented]

Id attribute

Two distinct nodes can have the same display name with the id attribute.

  1. [<actor id=a>User]
  2. [<actor id=b>User]
  3. [a] -- [b]

Directives

  1. #import: my-common-styles.nomnoml
  2. #arrowSize: 1
  3. #bendSize: 0.3
  4. #direction: down | right
  5. #gutter: 5
  6. #edgeMargin: 0
  7. #gravity: 1
  8. #edges: hard | rounded
  9. #background: transparent
  10. #fill: #eee8d5; #fdf6e3
  11. #fillArrows: false
  12. #font: Calibri
  13. #fontSize: 12
  14. #leading: 1.35
  15. #lineWidth: 3
  16. #padding: 8
  17. #spacing: 40
  18. #stroke: #33322E
  19. #title: filename
  20. #zoom: 1
  21. #acyclicer: greedy
  22. #ranker: network-simplex | tight-tree | longest-path

Custom classifier styles

A directive that starts with “.” define a classifier style. The style is written as a space separated list of modifiers and key/value pairs.

  1. #.box: fill=#8f8 dashed
  2. #.blob: visual=ellipse title=bold
  3. [<box> GreenBox]
  4. [<blob> HideousBlob]

Modifiers

  1. dashed
  2. empty

Key/value pairs

  1. fill=(any css color)
  2. stroke=(any css color)
  3. align=center
  4. align=left
  5. direction=right
  6. direction=down
  7. visual=actor
  8. visual=class
  9. visual=database
  10. visual=ellipse
  11. visual=end
  12. visual=frame
  13. visual=hidden
  14. visual=input
  15. visual=none
  16. visual=note
  17. visual=package
  18. visual=pipe
  19. visual=receiver
  20. visual=rhomb
  21. visual=roundrect
  22. visual=sender
  23. visual=start
  24. visual=table
  25. visual=transceiver

Style title and text body with a comma separated list of text modifiers

  1. title=left,italic,bold
  2. body=center,italic,bold

Text modifiers

  1. bold
  2. center
  3. italic
  4. left
  5. underline

Contributing

If you want to contribute to the project, more info is available in CONTRIBUTING.md.