Замечательный модуль сообщества

номинальный

Здравствуйте, это nomnoml , инструмент для рисования диаграмм UML на основе простого синтаксиса. Он пытается сохранить свой синтаксис визуально как можно ближе к сгенерированной диаграмме UML, не прибегая к рисункам ASCII.

Создано Даниэлем Каллином . Авторы: Александр Моосбруггер и korroz .

Nomnoml was made possible by these cool projects

Библиотека

Nomnoml библиотеки JavaScript автономный можно использовать для визуализации диаграммы на собственном веб - странице. Единственные зависимостей lodash и dagre . Установите его с помощью либо НПМ или хороший старый включение сценария.

Использование NodeJS с выводом SVG:

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

Использование HTML с целью рендеринга 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>

Поддержка SVG

Экспериментальный (и не полностью функциональный) режим рендеринга SVG доступен как nomnoml.renderSvgфункция.

Интерфейс командной строки

dist/nomnoml-cli.jsпредоставляет средство визуализации SVG с интерфейсом командной строки.Этот режим также поддерживает #import: <filename>директиву, которая позволяет вам разделять сложные диаграммы на несколько файлов.

веб приложение

Nomnoml веб - приложение представляет собой простой редактор с предварительным просмотром. Это чище на стороне клиента и изменения сохраняется браузер LocalStorage , так что ваша схема должна быть здесь в следующий раз, (но не гарантирует).

Interaction

Холст можно панорамировать и масштабировать, перетаскивая и прокручивая правую треть холста.Загруженным файлам изображений будет присвоено имя файла в #titleдирективе.

Example

Вот как шаблон Decorator выглядит в синтаксисе 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

Директивы доступны только при использовании интерфейса командной строки

1
#import: my-common-styles.nomnoml

Custom classifier styles

Директива, начинающаяся с символа «.», Определяет стиль классификатора.

1 2 3 4
#.box: fill=#88ff88 #.blob: fill=pink visual=ellipse italic bold dashed [<box> GreenBox] [<blob> HideousBlob]

Доступные визуальные эффекты

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

Доступные модификаторы:

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

Содействие

Если вы хотите внести свой вклад в проект, дополнительная информация доступна в CONTRIBUTING.md.