멋진 커뮤니티 모듈

명사

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

Daniel Kallin 작성 Alexander Moosbruggerkorroz 기여 .

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));

캔버스 렌더링 대상을 사용한 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.