멋진 커뮤니티 모듈

놈놈

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

Daniel Kallin이 작성했으며 Alexander Moosbruggerkorroz가 기여했습니다 .

Nomnoml was made possible by these cool projects

도서관

nomnoml의 독립형 자바 스크립트 라이브러리는 자신의 웹 페이지에서 다이어그램을 렌더링하는 데 사용할 수 있습니다. 유일한 의존성이 lodashdagre . 중 하나를 사용하여 설치 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의 웹 응용 프로그램은 실시간 미리보기와 간단한 편집기입니다. 그것은 순전히 클라이언트 측이며, 변경 사항은 브라우저에 저장되는 로컬 스토리지 다이어그램 여기에 다음에, (하지만 보장)해야한다, 그래서.

Interaction

캔버스의 오른쪽 3분의 1에서 드래그 앤 스크롤하여 캔버스를 이동 및 확대/축소할 수 있습니다.다운로드한 이미지 파일에는 #title지시문에 파일 이름이 지정됩니다.

Example

nomnoml 구문에서 Decorator 패턴은 다음과 같습니다.

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.