멋진 커뮤니티 모듈

노놈

안녕하세요, 간단한 구문을 기반으로 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 웹 애플리케이션은 실시간 미리보기가있는 간단한 편집기입니다. 순전히 클라이언트 측이며 변경 사항이 브라우저의 localStorage에 저장되므로 다음에 다이어그램이 여기에 있어야하지만 보장 할 수는 없습니다.

Interaction

캔버스의 오른쪽 1/3 부분을 드래그 앤 스크롤하여 캔버스를 이동하고 확대 할 수 있으며 다운로드 한 이미지 파일에는 #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 에서 더 많은 정보를 얻을 수 있습니다.