Mermaid記法 | テキストから様々な図を作成する | BingAI/ChatGPT

みなさん、こんにちは！

今回はテキストから様々な図を作成することができる「Mermaid記法」について取り上げます。

Mermaid記法とは？

Mermaid記法はテキストで様々な図を描ける記法です。

フローチャートやシーケンス図、ガントチャートなどを表示できます。

テキストであれば検索が容易で、かつ修正も手軽に行えます。

公式サイトは以下からアクセスできます↓

mermaid.js.org

 

24 Users

412 Pockets

Mermaid | Diagramming and charting tool

https://mermaid.js.org

Create diagrams and visualizations using text and code.

Mermaid記法を利用できるアプリケーション

Mermaid記法は多くのサービスやツールがサポートしています。

例えば、Github、Notion、VS Code、esa.io、qiita などです。

基本的な書き方

Mermaid記法の基本は、図のうえで矢印の方向がどちら向きだとしても、左から右へ書いていくことです。各種図によって書式が異なりますが、以下に一部を紹介します。

フローチャート

graph TD
    A[始める]
    B[終わる]
    A --> B

シーケンス図

sequenceDiagram
    A->>B: メッセージ
    B->>A: メッセージ

ガントチャート

gantt
    title ガントチャート

    section 作業A
        作業A1 :a1, 2020-01-01, 10d
        作業A2 :after a1, 15d

    section 作業B
        作業B1 :2020-01-15, 10d

デモサイトで出力してみよう

Mermaid記法のデモサイトでは、自分でコードを入力して出力結果を確認することができます。以下のURLからアクセスしてみてください。

mermaid-js.github.io

 

2 Users

411 Pockets

Online FlowChart & Diagrams Editor - Mermaid Live Editor

https://mermaid-js.github.io/mermaid-live-editor/

Simplify documentation and avoid heavy tools. Open source Visio Alternative. Commonly used for explaining your code! Mermaid is a simple markdown-like script language for generating charts from text via javascript.

下図のような画面が表示されますが、画面左側にコードを記入することで、右側の画像が生成されます。

応用：BingAI（ChatGPT）でMermaid記法を提案してもらう

AIにMermaid記法を提案してもらうことも可能です。

例えば、BingAIに対して以下のような質問をします。

「コンビニのATMでお金を引き出すやり方をシーケンス図にしたいので、Mermaid記法で書いてほしい。」

その際に返ってきた回答は以下の通りです。

提案されたシーケンス図は以下のようになります。

ChatGPTやBingAIに対して、的確に情報を伝えることができれば、自分でUMLを作成する手間を大幅に削減できるかもしれません。

エラー: データの取得に失敗しました。