노놈

안녕하세요, 간단한 구문을 기반으로 UML 다이어그램을 그리는 도구인 nomnoml 입니다 . ASCII 도면에 의존하지 않고 생성된 UML 다이어그램에 시각적으로 최대한 가깝게 구문을 유지하려고 합니다.

작성자: Daniel Kallin , 기여: Alexander Moosbrugger 및 Korroz .

Nomnoml was made possible by these cool projects

도서관

nomnoml 독립형 자바스크립트 라이브러리는 자신의 웹페이지에 다이어그램을 렌더링하는 데 사용할 수 있습니다. 유일한 종속성은 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 웹 애플리케이션은 실시간 미리보기가 포함된 간단한 편집기입니다. 이는 순전히 클라이언트 측 이며 변경 사항은 브라우저의 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.

개발 가이드

기본 모듈

내장 객체

커뮤니티 모듈

노놈