0
Help us understand the problem. What are the problem?

posted at

updated at

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

Vueでクラス図を描きたい

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

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

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

mermaid

  • 簡単なテキスト構文でいろいろ図を描けるライブラリ

  • オンラインでいろいろと試せるサイトもある。Live Editor

  • vue-mermaidというVueのコンポーネントも発見
    - 最近は更新されていない?新しい機能は動かないかも?

nomnoml

  • 簡単なテキスト構文でUML Diagramsを描けるライブラリ
  • nomnomlこちらもサイト上でいろいろと試せる。
  • 構文をざっと見たところ、フォントサイズやらパディング、色などの調整もできそう。
  • Vueのコンポーネントは見つからなかった。
  • 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]
]

nomnomlSample.png

まとめ

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

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Sign upLogin
0
Help us understand the problem. What are the problem?