재우니의 블로그

이 소스는 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>