図形をマウスで並べる代わりに、決まった書き方の短い文章を書くだけで、フローチャート・順序図・ガントチャートなどを描けます。公式サイトにブラウザ上で試せる編集画面があるので、何も入れずに貼り付けて確認できます。GitHubなど多くのサービスがこの書き方に対応しています。
#作図#資料作成
これは何？パソコンに入れて使うアプリ
できること
文章からの作図（フローチャート・順序図・ガント・円グラフなど）／ブラウザ上での編集と確認／文書への埋め込み
誰に効く？
手順や構成を図にしたいが、作図ソフトを使うのが面倒な人
用意するもの
ブラウザだけで試せます。公式サイトの編集画面に書けば、その場で図が表示されます。自分のサイトや文書に埋め込む場合は、指定の記述を入れます。
時間のめやす
10〜20分
使うとこうなる
- 1Live Editorを開く→図を書く画面が使える
- 2Markdown風の定義を書く→図として表示される
- 3定義を直す→図の内容も更新される
作れるもの・できることの例
フローチャート、シーケンス図、文書内の説明図
使えるようになるまでの手順をひらく
- 下の「GitHubで見る」ボタンで公式ページを開く
- ページ内の「（リリース）」から自分のPC用（Windowsなど）のファイルをダウンロード
- ダウンロードしたファイルを開いてインストール
- アプリを起動すれば使えます（画面が英語のことも多いですが、操作はシンプルです）
⬇️ ダウンロードページでの操作（この3タップで完了）
- ページを下にスクロールして 「Assets」 という折りたたみを押して開く（ここがファイル一覧）
- Windowsの人 →「.exe」か「Setup」／Macの人 →「.dmg」と付くファイルを1回押す（ダウンロードが始まります）
- ダウンロードしたファイルを開く。Windowsが青い警告を出したら「詳細情報」→「実行」（有名な無料ソフトでもよく出る画面です）
※緑の「Code」ボタンは開発者用なので押さなくてOK。ファイルがたくさん並んでいたら、上の条件に合う1つだけ選べば大丈夫。
迷ったらこれ：いつも使っているAIチャット（ChatGPT・Claude・Geminiなど）にこのツールのGitHubリンクを貼って 「これを使いたい。私のPCでの始め方を一歩ずつ教えて」と頼むのが一番の近道です。
注意点
AIが図を考えてくれるものではなく、決まった書き方を自分で覚えて書く道具です。書き方は難しくありませんが、最初は公式の例を見ながら覚えることになります。複雑な図になると、文章だけで配置を細かく指定するのは難しくなります。
ひとことメモ
として公開されています。内容は公式ページでもご確認ください。
mermaidについてよくある質問
- mermaidは無料で使えますか？
- 無料で使えます。自分のパソコンの中で動くタイプなので、使った量に応じた料金もかかりません。
- mermaidを使うのに、インストールや専門知識は必要ですか？
- パソコンにインストールして使います。コマンド入力（黒い画面）は必要ありません。
- mermaidはスマホでも使えますか？
- スマホには対応していません。パソコンが必要です。
- mermaidは仕事（商用）で使えますか？
- ライセンスは MIT で、商用利用も認められています。ただし著作権表示を残すなどの条件が付くので、配布物に含める場合はライセンス本文を確認してください。
データ・図解のほかのツール
mermaidが合わなかったときの、同じ用途の候補です。
ml-visuals
機械学習の説明図を無料で使える素材集
準備がいる・黒い画面いらない
Napkin AI
文章を貼ると図解が出来上がる
はじめやすい・黒い画面いらない
next-ai-draw-io
話しかけるだけで、業務フローや構成図を描いてくれる無料ツール
はじめやすい・黒い画面いらない
my-mind
ブラウザで使えるマインドマップ作成ツール
上級者向け・黒い画面いらない
ChainForge
複数のAIに同じ質問を投げて、答えを並べて比べられるソフト
準備がいる・黒い画面いらない
mindmaps
ブラウザだけで使える、登録不要のマインドマップ作成ツール
上級者向け・黒い画面いらない