ソフトウェア開発や技術文書作成の世界では、フローチャートは欠かせないツールです。しかし、従来のフローチャート作成ソフトは有料であったり、操作が煩雑だったりします。ドラッグ、整列、線の接続、ノードの調整など、あらゆる操作に時間がかかる場合があります。コードを書くだけでフローチャートを素早く生成する方法はないのでしょうか？
答えは、人魚です。
Mermaidは、Markdownに似た構文を使用して、フローチャート、シーケンス図、クラス図などの様々な図をシンプルなコードで生成できるテキストベースの図作成ツールです。ソフトウェアのインストールは不要で、ブラウザさえあれば無料で利用できます。
今日は、マーメイドフローチャートの使い方をゼロから学ぶのに5分ほどお時間をいただきます。
人魚とは何ですか？
Mermaidは、シンプルなテキスト記述を使ってグラフを作成できるオープンソースのJavaScriptライブラリです。わずか数行のコードで、Mermaidはそれらを自動的に視覚的なグラフに変換します。
マーメイドの主な利点
プレーンテキスト：チャートはコード形式で存在するため、バージョン管理が容易です（Git対応）。
無料かつオープンソース：料金は一切不要で、あらゆるプラットフォームで使用可能です。
文法はシンプルで、学習曲線は非常に緩やかで、ほんの数分で始められます。
幅広い連携機能：Mermaidは、GitHub、Notion、Obsidian、Typoraなどのツールとネイティブに連携しています。
フローチャート、シーケンス図、クラス図、ガントチャート、状態遷移図、円グラフなど、多種多様なチャートが利用可能です。
プログラマー、テクニカルライター、プロダクトマネージャーにとって、Mermaidは技術文書作成に欠かせないツールです。プロセスを説明する必要がある場合、図作成ソフトウェアを開く必要はもうありません。ドキュメントに数行のコードを入力するだけで、プレビューに図が表示されます。
Mermaidフローチャートの基本構文
Mermaidでは、フローチャートはgraphキーワードを使用して定義され、2つのレイアウト方向をサポートしています。
グラフTD：上から下へ
グラフLR：左から右
基本的な構文は非常にシンプルです。
graph TD
A[Start] --> B{Condition}
B -->|Yes| C[Execute operation]
B -->|No| D [End]
C --> D
このコードは、開始、条件、操作、終了を含むフローチャートを生成します。各ノードは異なる形状で表現できます。
Mermaidフローチャート
[角丸]：開始／終了
[菱形]：判断／決定
[サークル]：特殊ノード
ノード間の接続は --> で示され、接続線には -->"はい"--> のようなテキスト説明を追加できます。
これらの基本的な構文を習得すれば、ほとんどのフローチャートを描けるようになります。
ProcessOnを使ってマーメイドフローチャートを簡単に生成する3つの方法
Mermaidの構文はシンプルですが、コードを頻繁に書かないユーザーにとっては、その多様な構文を覚えるのは依然として難しい場合があることを私たちは理解しています。そのため、私たちのツールでは、誰でも簡単にフローチャートを作成できる、より便利な3つの生成方法を提供しています。
方法1：Mermaidコードを直接貼り付けて、リアルタイムでフローチャートを生成する。
Mermaidコードの書き方を既に知っている場合、または他の場所からMermaidコードをコピーした場合は、それをツールに貼り付けるだけで、レンダリングされたフローチャートをすぐに確認できます。コードはいつでも変更でき、チャートもそれに応じて更新されます。
適用可能なシナリオ：Mermaid構文に既に精通しているユーザー、または既存のコードを修正する必要があるユーザー。
使用方法：
ProcessOnのプロフィールページにアクセスし、フローチャートを作成します。フローチャートエディタで、「挿入」→「マーメイド図」をクリックします。右側の入力ボックスにマーメイドコードを貼り付け/インポートするか、直接入力します。すると、フローチャートが左側のキャンバスに表示されます。要素を選択して、内容やスタイルを手動で微調整できます。
AIによるMermaid生成
方法2：要件を自然言語で記述すると、AIが同時にコードとフローチャートを生成します。
これは最も「手軽な」方法です。同僚とチャットするように、「情報入力、携帯電話番号認証、パスワード設定、登録完了までのユーザー登録プロセスを図示してください」といった要件を一つ入力するだけで、AIが同時にマーメイドコードとビジュアルフローチャートを生成します。
構文を学ぶことなく、素早くグラフを生成したいユーザーに最適です。生成後、「コードモード」に切り替えることで、Mermaidコードを表示し、構文を学習できます。
使用方法：
ProcessOnのMermaidエディタで、下部の「AI生成」をクリックし、「フローチャート」シナリオを選択して、要件をテキストで入力します。フローチャートが生成されたら、上部の「グラフィック編集」をクリックしてフローチャートエディタを開き、手動で最適化できます。
Mermaidコードを挿入
方法3：マーメイドコードの画像をアップロードし、認識させて編集可能な形式に変換します。
Mermaidコードのスクリーンショット（例えば、他の場所から取得したもの）や画像しかない場合でも、ご安心ください。画像をアップロードすると、AIが画像内のコードテキストを認識し、編集可能なMermaidコードとフローチャートに自動的に変換します。その後、編集を続けることができます。
適用可能なシナリオ：画像データのみが利用可能で、編集可能なソースファイルに復元する必要があるシナリオ。
使用方法：
ProcessOnでMermaidエディタを開き、下の「画像認識」をクリックして、JPEG、JPG、またはPNG画像をアップロードします。認識が成功すると、エディタの左側にMermaidコードが表示され、右側にフローチャートが表示されます。上部の[グラフィック編集]をクリックすると、フローチャートエディタに入り、手動で最適化できます。
Mermaid画像の認識
技術文書作成やチームコラボレーションにおいて、グラフのメンテナンスコストは常に課題となってきました。従来のグラフ作成ソフトウェアで生成された画像は、修正が必要になるたびに再描画、再エクスポート、再アップロードが必要となります。しかし、Mermaidはコードでグラフを定義するため、修正は数行のテキストを変更するだけで済み、グラフは自動的に更新されます。
これこそがMermaidの魅力です。コードと同じように、チャートを保守しやすく、バージョン管理が可能で、共同作業も容易にします。ProcessOnを使えば、Mermaidの利用開始障壁は最小限に抑えられます。自然言語でチャートを生成したり、アップロードした画像からチャートを再現したり、直接編集したりすることも可能です。
プログラマー、プロダクトマネージャー、テクニカルライター、学生など、どんな立場の方でも、Mermaidを学ぶのに5分を費やす価値は十分にあります。その5分間の投資は、今後数え切れないほどのドキュメント作成作業で必ず役に立つでしょう。
ProcessOnを開いて、Mermaidを使って最初のフローチャートを描いてみましょう。構文がわからない場合は、自然言語で説明すれば、AIがコードと図を生成してくれます。
出典：
著者：Skye , ProcessOn 最高執行責任者