이 소스는 js - sequence - diagrams 이라는 오픈 소스인데, 마치 UML 을 그리듯이 보인다.
단순한 영문 글자와 방향키 조합으로 만들 수 있다. 아쉬운 점은 한글이 기재 되지 않는다는 점이다.
오픈소스 위치는 아래와 같습니다.
https://github.com/bramp/js-sequence-diagrams
아래 JS 파일을 참조한다.
<script src="underscore-min.js"></script> <script src="raphael-min.js"></script> <script src="sequence-diagram-min.js"></script>
그 다음엔 DIV 의 ID 를 명시하고, parse 함수에 기호식 값을 기재한 다음,drawSVG('diagram') 명령어를 통해 다이어그램이 그려지도록 합니다.
그 다음엔 DIV 의 ID 를 명시하고, parse 함수에 기호식 값을 기재한 다음,
drawSVG('diagram') 명령어를 통해 다이어그램이 그려지도록 합니다.
<div id="diagram">Diagram will be placed here</div> <script> var diagram = Diagram.parse("A->B: Does something"); diagram.drawSVG('diagram'); </script>
* 단축키는 한글/영문 대소문자로 이용 가능하며, 티스토리 기본 도메인에서만 동작합니다.