Mermaidのクラス図も「Mermaid Graphical Editor」で少し楽しよう！

チェンジビジョン藤元です。
今回は、僕が作成したVSCodeとChrome拡張「Mermaid Graphical Editor」へ新たに対応したクラス図について、メリットと簡単な描き方をお伝えします。
(※ Mermaidの記法に関する記事ではありません)

「Mermaid Graphical Editor」でクラス図を描くメリット

メリット①「 気軽にクラス名を指定できる」

クラス名にスペースなど特殊な文字が使用されている場合には、自動でバッククオート (`) で囲むようにしていますので、気軽にクラス名を指定できます。

また、既に同じ名前のクラス名があった場合には、ラベルを使用して同名のクラスを表現できるようにしています。

メリット②「 気軽にクラス名の変更もできる」

クラス名が変更された場合、使用している関連の定義も併せて変更するので、気軽にクラス名の変更ができます。

メリット③「 Mermaidコードを編集してもOK」

Mermaid Graphical Editorは、編集された内容のみをコードに反映するようにしているため、まだ未対応の書式に対してはMermaidコードの方を編集して対応することもできます。

「Mermaid Graphical Editor」でクラス図を気楽に描く！

手順０：クラス図を描き始める準備

まずはインストール。

（VSCode版の場合)

• Markdownファイル(.md)にMermaidコードブロックを作成します（①）
• 作成したコードブロック上部に「MermaidEditor」と表示されるので、これをクリックします（②）
• エディタビューより「CLASS」をクリックします（③）

（Chrome版の場合 )

• 拡張機能を呼び出します（①）
• エディタビューより「CLASS」をクリックします（②）

手順１：クラスを作成する

• メインメニューより「クラス」ボタンをクリックします（①）
• 必要に応じてステレオタイプ、関連の種類を選択します（②）
• クラスを追加したい場所をクリックします（③）
  作成後、続けてクラス名編集モードになるので、入力後、Enterキーで決定します
  ※Shift＋Enterキーで改行します

また、作成したクラスは選択状態すると以下のような関連する操作を行うことができます。

• ステレオタイプの追加／変更（①）
• クラス名の変更（②）
• 属性の追加／変更（③）
• 操作の追加／変更（④）
• クラスの削除（⑤）
• 関連の追加（⑥）

手順２：関連を追加する

• メインメニューより「関連」ボタンをクリックします（①）
• 作成したい関連の種類を選択します（②）
• 関連の元となるクラスをクリックします（③）
• 関連の先となるクラスをクリックします（④）

また、関連については、以下の操作を行えます。

• ラベルの変更（①）
• 関連の削除（②）
• 関連の種類の変更（③）

手順３：属性、関数、ステレオタイプ、関連のラベルを編集する

• メインメニューより「テキスト編集」ボタンをクリックします（①）
• 編集したいクラス、および関連のエディットポイントをクリックします（②）
  編集モードになるので、入力後、Enterキーで決定します
  ※Shift＋Enterキーで改行します

手順４：削除する

• メインメニューより「削除」ボタンをクリックします（①）
• 削除したいクラス、および関連のエディットポイントをクリックします（②）

手順５：関連の種類を変更する

• メインメニューより「関連」ボタンをクリックします（①）
• 「置き換えモード」ボタンをクリックします（②）
• 種類の変更を反映する関連のエディットポイントをクリックします（③）

その他の操作（編集終了、ビューの縮小表示、イメージコピー）はフローチャートと同じです。

• 編集終了する場合はエディタビューを閉じます（①）
• 右下のスライドバーでエディタビューの縮尺を変更できます（②）
• 「図のコピー」ボタン（③）をクリックするとPNGイメージがクリップボードにコピーされるので、任意の場所にペーストして使用してください
  ※macの場合は動作しないので注意（Safariでの方法をよくわかっていない…）

”きれいなクラス図”を作成したいなら [モデリングツール] が便利

手軽に”サッ”とクラス図を書きたい場合はMermaidは非常に便利だと思うのですが、きれいに整ったクラス図（”サブクラスの整列”、ステレオタイプ（役割）ごとの色指定、など）を作成したい場合は、モデリングツールを使用した方が楽しく作業できます。

弊社製品の astah* professional ではきれいに整ったクラス図を手軽に作成するための便利な機能が備わっていますので、ご活用いただければ幸いです。無償で20日間評価できます。