UML 다이어그램 제작에 특화된 「Pintora.js」

 

 

Pintora.js는 UML과 같은 설계도 제작에 최적화 된 라이브러리다.

 

Pintora.js는 UML툴을 제작할 수 있는 라이브러리라는 점에서 다소 전문적인 분위기를 느낄 수 있는데, 놀라운 점은 가상DOM + html텍스트를 그대로 이용한다는 부분이다. 가령, 아래와 같은 UML의 시퀸스 객체는 script나 css설정이 아닌 html내의 textContent를 통해 구현된다. 

 

 

sequenceDiagram Pintora-->>Pintora: Has input changed?

 

시퀸스 UML을 위한 코드는 html 2줄이다. 

 

<div class="pintora">
   sequenceDiagram
      Pintora-->>Pintora: Has input changed?
</div>

 

그리고 script태그를 끝에 붙여주면 다이어그램이 완성된다.

 

<script>
    pintora.default.initBrowser();
</script>

 

 

Pintora는 프로그램 설계에 필요한 UML다이어그램을 모두 구현할 수 있도록 「시퀸스 ~ 간트 다이어그램」까지 제공하며, 사용자가 직접 커스터마이징 할 수도 있다. 

 

 

Usage | Pintora

 

 

하지만 UML설계에 특화되어 있기에 기타 그래프 표현과 같은 부분은 해당 분야에 특화된 다른 라이브러리를 사용하는 편이 좋을 듯하다.(html방식이 오히려 불편함)