이 소스는 js - sequence - diagrams 이라는 오픈 소스인데, 마치 UML 을 그리듯이 보인다.
단순한 영문 글자와 방향키 조합으로 만들 수 있다. 아쉬운 점은 한글이 기재 되지 않는다는 점이다.
오픈소스 위치는 아래와 같습니다.
아래 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="diagram">Diagram will be placed here</div>
<script>
var diagram = Diagram.parse("A->B: Does something");
diagram.drawSVG('diagram');
</script>