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

nomnoml

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

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

Nomnoml was made possible by these cool projects

библиотека

Для отображения диаграмм на вашей собственной веб-странице можно использовать автономную библиотеку javascript nomnoml, единственные зависимости - lodash и dagre . Установите ее, используя npm или старый добрый скрипт.

Использование 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 функции nomnoml.renderSvg .

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

dist/nomnoml-cli.js предоставляет рендереру SVG интерфейс командной dist/nomnoml-cli.js режим также поддерживает #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 .