1. 제품
  2.   도표
  3.   JavaScript
  4.   JS-Sequence-Diagrams
 
  

UML 시퀀스 다이어그램용 오픈소스 JavaScript API

오픈 소스 무료 자바스크립트 라이브러리를 통해 간단한 텍스트를 UML 시퀀스 다이어그램으로 변환합니다.

JS-시퀀스-다이어그램은 소프트웨어 개발자에게 오픈 소스 JavaScript 라이브러리를 통해 간단한 텍스트에서 UML 시퀀스 다이어그램을 생성할 수 있는 기능을 제공합니다. 시퀀스 다이어그램은 개발에 관련된 개체 및 클래스와 개체 간에 교환되는 메시지의 순서를 보여줍니다. 라이브러리는 Jison을 사용하여 텍스트를 구문 분석하고 Snap.svg를 사용하여 이미지를 그립니다.

다이어그램의 텍스트 표현에서 간단한 SVG 시퀀스 다이어그램을 그립니다. 라이브러리에는 "일반" 및 "손으로 그린" 다이어그램의 두 가지 스타일이 포함되어 있습니다. SVG 다이어그램 사용자 정의를 위해 제공되는 여러 CSS 클래스가 있습니다.

Previous Next

JS 시퀀스 다이어그램 시작하기

JS 시퀀스 다이어그램을 설치하는 권장 방법은 bower를 실행하는 것입니다. bramp/js-sequence-diagrams를 설치하고 아래 스크립트를 포함합니다.

Bower를 통해 JS 시퀀스 다이어그램 설치

 <script src="/{{ bower directory }}/bower-webfontloader/webfont.js" />

<script src="/{{ bower directory }}/snap.svg/dist/snap.svg-min.js" />

<script src="/{{ bower directory }}/underscore/underscore-min.js" />

<script src="/{{ bower directory }}/js-sequence-diagrams/build/sequence-diagram-min.js" />

또한 손으로 그린 테마를 사용하려는 경우 CSS를 가져옵니다.

단순 텍스트에서 UML 시퀀스 다이어그램 생성

JS 시퀀스 다이어그램 라이브러리를 사용하면 소프트웨어 개발자가 간단한 텍스트에서 UML 시퀀스 다이어그램을 생성할 수 있습니다. 라이브러리를 사용하면 다이어그램 제목을 추가하고 여러 참가자에게 메모를 놓을 수 있습니다. 최신 릴리스에서는 다이어그램을 그리기 위해 Raphaël과 함께 Snap.svg를 사용합니다. Snap.svg는 순수한 SVG 구현이며 CSS 스타일, 더 나은 글꼴 지원, 애니메이션 등의 사용을 허용합니다.

JavaScript API를 통해 SVG로 다이어그램 내보내기

JS 시퀀스 다이어그램은 오픈 소스 JavaScript API를 통해 다이어그램을 SVG로 내보내기 위한 기능을 제공합니다. 다이어그램이 생성되면 API를 통해 사용자가 원하는 위치에 SVG 형식으로 다운로드할 수 있습니다. JS 시퀀스 다이어그램에는 snap.svg를 사용할 때 SVG 다이어그램에 적용할 수 있는 몇 가지 중요한 CSS 클래스가 포함되어 있습니다. 기본 SVG 태그에 적용하기 위한 시퀀스 클래스, 다이어그램 제목에 대한 제목 클래스, 액터에 적용하기 위한 액터 클래스, 모든 메모에 대한 노트 클래스, 신호에 적용하기 위한 신호 클래스가 포함되어 있습니다.

 한국인