# HTML にスクリプトを埋め込んでUMLを描く mermaid という **JavaScript の**ライブラリを紹介します． mermaid を使うと，様々なUMLのイラストを描くことができます．公式サイトはこちら． https://mermaid-js.github.io/mermaid/#/ UMLが全部きっちり描けるわけではないですが，気軽にそれらしい図を書くことができます． HackMD（この文章を書いているWebエディタ）でサポートされているので，HackMD上では楽に描くことができます．どのようにするかというと，Markdownにおけるコードブロックの中に言語としてmermaidを指定するだけです． つまり， <pre> ```mermaid (ここにコードを書く) ``` </pre> とすればHackMD上では描くことができます． <br> ## 具体例 実際にどのような図が描けるでしょうか． まずフローチャート． ```mermaid flowchart TD A[Start] --> B{準備できてる?} B -->|NO| C[OMG] C --> D[準備する] D --> B B ---->|YES| E[実行する] ``` <pre> ```mermaid flowchart TD A[Start] --> B{準備できてる?} B -->|NO| C[OMG] C --> D[準備する] D --> B B ---->|YES| E[実行する] ```</pre> コードにある行末の `;` はなくてもエラーになりません． 最初の `graph TD` の TD というのはレイアウトに関する指定で，Top から Bottom へとグラフが流れるようにレイアウトしなさいと言っています． <br> 次にクラス図． ```mermaid classDiagram direction RL class Student { -idCard : IdCard } class IdCard { -id : int -name : string } class Bike{ -id : int -name : string } Student "1" --o "1" IdCard : 持つ Student "1" --o "1" Bike : 乗る ``` <pre> ```mermaid classDiagram direction RL class Student { -idCard : IdCard } class IdCard { -id : int -name : string } class Bike{ -id : int -name : string } Student "1" --o "1" IdCard : 持つ Student "1" --o "1" Bike : 乗る ``` </pre> <br> 状態遷移図も描くことができます． ```mermaid stateDiagram direction LR [*] --> A A --> B B --> C state B { direction LR a --> b } B --> D ``` <pre> ```mermaid stateDiagram direction LR [*] --> A A --> B B --> C state B { direction LR a --> b } B --> D ``` </pre> <br> UMLに関連してガントチャートも描けます． ```mermaid gantt title A Gantt Diagram dateFormat YYYY-MM-DD section Section A task :a1, 2014-01-01, 30d Another task :after a1 , 20d section Another Task in sec :2014-01-12 , 12d another task : 24d ``` <pre> ```mermaid gantt title A Gantt Diagram dateFormat YYYY-MM-DD section Section A task :a1, 2014-01-01, 30d Another task :after a1 , 20d section Another Task in sec :2014-01-12 , 12d another task : 24d ``` </pre> <br> UMLとは全く関係ないですが，円グラフも描くことができます．ただし，円グラフは mermaid よりも Chart.js で描いた方が良いと思います． シーケンス図も描くことができますが，省略します． <br> ## HTML上に埋め込む HackMDのような，最初からMermaidが使えるエディタだけでしか使えないのでしょうか．場所を選ばず使うことができれば便利です． 実際にそれを実現する方法があります． まず HTML の head に次を記入します． ```htmlembedded= <script src="https://unpkg.com/mermaid/dist/mermaid.min.js"></script> <script> mermaid.initialize({ startOnLoad: true, theme: 'defalt' }); </script> ``` そして body の中に div要素を用意し，その class 属性に mermaid を指定します． つまり ```htmlembedded= <div class="mermaid"> (ここにMermaidを書く) </div> ``` とします． これだけで，mermaid を使うことができます． <br> たとえば次の html をテキストエディタにそのまま張り付けてブラウザで開くと，Mermaidが表示されているはずです． ```htmlembedded= <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <title>Mermaid</title> <script src="https://unpkg.com/mermaid/dist/mermaid.min.js"></script> <script> mermaid.initialize ({ startOnLoad: true, theme: 'defalt' }); </script> </head> <body> <div class="mermaid"> graph TB; A --> B; </div> </body> </html> ```