素晴らしいコミュニティモジュール
  1. ホーム
  2. コミュニティモジュール
  3. nomnoml

nomnoml

こんにちは、これはnomnomlです。これは、単純な構文に基づいてUMLダイアグラムを描画するためのツールであり、ASCII図面に頼ることなく、生成されたUMLダイアグラムにできるだけ視覚的に近い構文を維持しようとします。

作成されたダニエルKallinによる。貢献アレクサンダー・ムースブラガーとkorroz 。

Nomnoml was made possible by these cool projects

図書館

nomnomlのスタンドアロンのJavaScriptライブラリは、自分のWebページ上の図を描画するために使用することができます。唯一の依存関係がありlodashとdagre 。どちらかNPMまたは古き良きスクリプトのインクルードを使用して、それをインストールします。

SVG出力でのNodeJSの使用法：

1
2
3
4
5
npm install nomnoml

var nomnoml = require('nomnoml');
var src = '[nomnoml] is -> [awesome]';
console.log(nomnoml.renderSvg(src));

CanvasレンダリングターゲットでのHtmlの使用法：

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 Webアプリケーションは、ライブプレビューを備えたシンプルなエディターです。これは純粋にクライアント側であり、変更はブラウザーのlocalStorageに保存されるため、次回はダイアグラムをここに表示する必要があります（ただし保証はありません）。

Interaction

キャンバスの右3分の1をドラッグしてスクロールすると、キャンバスをパンおよびズームできます。ダウンロードした画像ファイルには、 #titleディレクティブでファイル名が指定されます。

Example

これは、デコレータパターンが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詳細情報を入手できます。

©Copyright2014-Present fibjs.org |サポートしてください