Vueでクラス図を描きたい

Vueで作成しているアプリケーション上に、メタ情報をもとにモデルの関連などをクラス図のように描画してみたいと考えて、なにか楽に描く方法が無いか探してみた。

クラス図みたいなものが描けそうなライブラリ

探すといろいろあるが、ぱっと使えそうなのを2つほど簡単に紹介する。

mermaid

簡単なテキスト構文でいろいろ図を描けるライブラリ
オンラインでいろいろと試せるサイトもある。Live Editor
vue-mermaidというVueのコンポーネントも発見
- 最近は更新されていない？新しい機能は動かないかも？

nomnoml

簡単なテキスト構文でUML Diagramsを描けるライブラリ
nomnomlこちらもサイト上でいろいろと試せる。
構文をざっと見たところ、フォントサイズやらパディング、色などの調整もできそう。
Vueのコンポーネントは見つからなかった。
- Vueコンポーネントを作って、試している方のサイトは見つかった。
  - UML描画ライブラリnomnomlでテーブルのER図を作成
SVGか、canvasに描画する機能がある。

とりあえず必要そうな機能

手始めに下記くらいがあると、メタ情報から図を描けそう。

関連線として下記があると良い
- association
- generalization
- implementation
多重度として、関連先がOneかManyくらいは描けるとよい
モデルの属性は描けたほうが良い
メソッドは描けなくてもよい
ステレオタイプ

比較

比較項目	mermaid	nomnoml
association	〇	〇
generalization	〇	〇
implementaton	〇	〇
cardinality	〇	〇
attributes	〇	〇
methods	〇	〇
stereotype	〇	×

ライブラリの決定

nomnomlは使ったことが無かったので、これを機会に使ってみようかと思ったのだが、ステレオタイプのつけ方がわからなかったのと、mermaidのほうはコンポーネントをそのまま使うとちょっと楽ができそうなので、今回は、vue-mermaidを使って図を描いてみることにした。

vue-mermaidのインストール

$ yarn add vue-mermaid

インストールしてから気づいたが、（選定時にちゃんと見ていなかった・・・）vue-mermaidのバージョンは0.0.15。ちょっとだけ不安になる。

vue-mermaidではクラス図は描けなかった

flowchart用のライブラリだったorz
サイトにもそう書いてあったし、サンプルもフローチャートしか載ってなかった。
楽しようとしたら、ちゃんと見ていなかったせいで、無駄な回り道になってしまった。

方向転換して、nomnomlを使ってみる。

nomnomlのインストール

$ yarn add nomnoml

canvasにサンプルを描いてみる

参照できるようにrefをつけておく。

<template>
  <div>
    <canvas ref="nomnomlCanvae" />
  </div>
</template>

getCanvas (): HTMLCanvasElement {
  return this.$refs.nomnomlCanvas as HTMLCanvasElement
}

下記みたいな感じで、canvasを指定してdrawを呼び出せば描画される模様。

import nomnoml from 'nomnoml'

drawDiagram (source: string): void {
  const canvas = this.getCanvas()
  nomnoml.draw(canvas, source)
}

nomnomlのページに載っているサンプルの一部を描画してみる。
下記の文字列をsourceに指定（改行は'\n'で）して、drawしてみる。

[Pirate|eyeCount: Int|raid();pillage()|
  [beard]--[parrot]
  [beard]-:>[foul mouth]
]

まとめ

nomnomlを使って、図を描くことはできた。ステレオタイプは描き方がわからないが、それ以外は特に問題はなく使えそうである。
mermaidは初めに調べたコンポーネントはクラス図を描くのには使えなかったが、
後で調べたところ、vue-mermaid-stringというコンポーネントでやりたいことができそうであった。
次の機会に、mermaidそのまま使ってみたり、vue-mermaid-stringを使ってみたりしようと思う。

Vueでモデルを図に描きたい