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

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

みなさん、こんにちは!

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

Mermaid記法とは?

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

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

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

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

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からアクセスしてみてください。

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

応用:BingAI(ChatGPT)でMermaid記法を提案してもらう

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

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

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

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

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

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

本日のAmazonおすすめ_Top10

2024-03-04 11:44:43時点