Skip to content
←

필사 모드: 図解ツール 2026 — Excalidraw / Mermaid / tldraw / D2 / Eraser / Lucidchart / Miro / FigJam 徹底比較

日本語
0%
정확도 0%
💡 왼쪽 원문을 읽으면서 오른쪽에 따라 써보세요. Tab 키로 힌트를 받을 수 있습니다.
원문 렌더가 준비되기 전까지 텍스트 가이드로 표시합니다.

1. 2026年の図解マップ — 無限キャンバス / チャート / DSL / ホワイトボードの4分類

2026年の図解は一つのツールでは終わりません。会議中に一緒に描くホワイトボード、ドキュメントに添えるさっとした図、Git に一緒にコミットするコードベースのアーキテクチャ、そして付箋とカードで進めるワークショップの大きなキャンバス — シナリオごとに 1 軍が変わります。

大きく分けると 4 カテゴリです。

- 無限キャンバス / スケッチ — Excalidraw、tldraw、FigJam、Miro のフリードロー

- チャート / DSL / コードベース — Mermaid、D2、PlantUML、Graphviz、ZenUML、Python diagrams、Eraser

- 箱と矢印のダイアグラム作成 — Lucidchart、draw.io、Whimsical、OmniGraffle、Visio

- 共同ホワイトボード — Miro、FigJam、Lucidspark、Mural

2026年の大きな変化は 3 つです。第一に、ほぼ全てのツールに AI 作図機能が搭載されました — Mermaid AI はテキストから綺麗な図を生成し、tldraw の "Make Real" は手描きのワイヤーフレームを動作する HTML に変換します。第二に、Markdown ベースの作図が事実上の標準になりました — GitHub、GitLab、Notion、Obsidian、Slack 全てが Mermaid をネイティブレンダリングします。第三に、"Diagrams as Code" カテゴリが成熟して、D2、Eraser、Mermaid が技術者が実際に使って気持ちいい DSL を提供しています。

5年前は「Lucidchart にするか Miro にするか」が大問題でしたが、今は「会議は Excalidraw、ドキュメントは Mermaid、インフラは D2/Eraser、デザインワークショップは FigJam」のようにツールが細かく分かれています。

本記事は 2026年5月時点のそれらのツールを高速で俯瞰するガイドです。初心者は「どこから始めるか」、シニアのエンジニア/デザイナーは「次のプロジェクトに何を足すか」を決めるのに役立つはずです。

2. Excalidraw — 手描きスタイルの事実上の標準

Excalidraw は 2020 年に Christopher Chedeau が始めたオープンソースの作図ツールです。マーカーで描いたような手描き風スタイルが最大の特徴で、それがそのままアイデンティティになりました。GitHub スター 9万以上、作図カテゴリでは圧倒的な 1 位です。

なぜ人気なのか。第一に、「磨きすぎていない」雰囲気が進行中の議論によく合います。Lucidchart の綺麗な図は「これは決定済みのデザインだ」という印象を与えますが、Excalidraw の波線は「今一緒に考えている最中だ」という空気を作ります。第二に、コードインポートが強力です — Mermaid 文法を貼り付けると手描き風で描き直します。

2026年時点の主要機能を整理します。

- ブラウザで即起動 — サインアップ不要の excalidraw.com

- リアルタイム共同編集 — 複数カーソル、矢印 / 箱の自動整列

- Mermaid インポート — flowchart、sequence、class を手描き風に変換

- Excalidraw+ — 有料 SaaS (個人 5 ドル/月)、ライブラリ共有、フォルダ、権限

- セルフホスト — 公式 Docker イメージ、データはブラウザの IndexedDB

- VS Code / Obsidian プラグイン — エディタの中で使える

- LaTeX 数式 / ライブラリ / 多言語 (韓国語、日本語フォント OK)

料金は無料です。MIT ライセンスでセルフホストも無料。SaaS の Excalidraw+ は 5 ドル/月ですが、コア機能は無料版でほぼ全て使えます。

典型的なシナリオは次のとおりです。

[Excalidraw が勝つシーン]

1. 1:1 / チームミーティングでのアーキ議論

- 片方が画面共有しながら箱と矢印を描く

- 「ここは Kafka だっけ?」がその場で解決

- PNG にエクスポートして議事録に添付

2. RFC / 設計ドキュメントの最初の図

- 仕上げる段階ではなく「初稿」段階で描く

- 手描きスタイルが「仮」感を演出

3. 技術ブログ / カンファレンスのスライド

- 綺麗すぎないので読み手が近づきやすい

- PDF / SVG / PNG / クリップボードの 4 種類エクスポート

一つの限界は「最終成果物」用には弱い点です。顧客向けドキュメントや外部発表資料には Lucidchart / Figma の綺麗さが合います。

3. Mermaid + Mermaid AI — Markdown 親和の 1 位

Mermaid は 2014 年に Knut Sveidqvist が作ったテキストベースの作図ライブラリです。Markdown のコードフェンスの中に簡単な文法を書くと SVG として描画されます。2026 年現在、GitHub、GitLab、Bitbucket、Notion、Obsidian、Slack、Microsoft Teams、Confluence、Joplin、VS Code プレビューまで全てがネイティブレンダリングをサポートします。

2022年初頭に GitHub が Mermaid を自社の Markdown パイプラインに統合したのは決定的な出来事でした。それ以降「チーム Wiki に図が必要 → Mermaid で書く」が事実上の標準になりました。

2026年時点の主要な図表タイプを整理します。

- flowchart — TD / LR 方向、ノードと矢印

- sequenceDiagram — シーケンス、アクターとメッセージ

- classDiagram — UML クラス

- erDiagram — ER (データベースモデリング)

- stateDiagram-v2 — 状態遷移

- gantt — ガントチャート

- pie — 円グラフ

- journey — ユーザージャーニー

- mindmap — マインドマップ (2023年追加)

- timeline — タイムライン

- C4Context — Simon Brown の C4 モデル

- gitGraph — Git ブランチ可視化

- requirementDiagram — 要件トレーサビリティ

- architecture-beta — アーキ図 (2024年追加)

簡単なシーケンス図の例 (ソースは Markdown コードフェンスに入る形です)。

sequenceDiagram

participant U as User

participant API as API Gateway

participant S as Service

participant DB as Database

U->>API: POST /orders

API->>S: createOrder

S->>DB: INSERT order

DB-->>S: order_id

S-->>API: 201 Created

API-->>U: order_id

Mermaid AI は 2024 年に Mermaid Chart (公式の商用版) が追加した機能で、自然言語で「ユーザーが注文するシーケンスを描いて」のようなプロンプトだけで Mermaid コードを生成してくれます。バックエンドは GPT-4 / Claude ですが Mermaid 文法に特化学習されており、汎用 LLM よりはるかに正確です。

料金は本体 OSS は無料、Mermaid Chart の AI / 共同編集機能は個人 8 ドル/月から。

4. tldraw — 無限キャンバス + Make Real AI

tldraw は Steve Ruiz が作ったオープンソースの無限キャンバスライブラリ/アプリです。Excalidraw と同じカテゴリですが「他のアプリにライブラリとして埋め込みやすい」「無限キャンバスのインタラクションがより滑らか」という 2 つの差別化要因があります。

2023 年後半に tldraw が出した大ヒットが「Make Real」です。ボタン、入力欄、カードのようなワイヤーフレームをラフに手描きして「Make Real」を押すと、GPT-4 がそれを見て動作する HTML/Tailwind コンポーネントを生成します。これが LLM + キャンバスの組み合わせの可能性を初めて見せたデモとして話題になりました。

2026年時点での使い方は 2 つに分かれます。

- 単に描く — tldraw.com で即起動。無料。Excalidraw とほぼ同じポジション

- ライブラリとして埋め込む — React コンポーネントで自分のアプリに無限キャンバスを追加 (tldraw SDK)

tldraw SDK は npm パッケージで配布されています。商用ライセンスは必要ですが無料枠が広いです。

npm install tldraw

export default function MyCanvas() {

return <Tldraw />

}

特徴的な機能:

- 真に無限のキャンバス — 滑らかなズームとパン

- マルチプレイヤー — 同時編集、ライブカーソル

- Shapes API — 独自シェイプタイプを追加 (例: チャート、コードブロック)

- AI 統合 — Make Real、"Computer Use" デモなど LLM 結合の実験

- 独自データモデル — CRDT ベース、オフライン編集が自動マージ

Excalidraw と tldraw のどちらを選ぶかは次の表を参考に。

- 手描き感、会議 + ドキュメント添付 → Excalidraw

- 自分のアプリに無限キャンバス埋め込み、より綺麗なデフォルト → tldraw

- 両方とも無料、両方とも OSS、両方とも優秀

5. D2 (Terrastruct) — モダンな Graphviz DSL

D2 は Terrastruct (Alexander Wang の会社) が作ったモダンな作図 DSL です。「Graphviz は古すぎ、Mermaid は単純すぎ、その間の本当に良い DSL が必要だ」という問題意識から出発しました。2022 年後半に公開され、2026 年現在 GitHub スター 1.6 万を超えて急成長中です。

D2 の核となる魅力は 3 つです。

- 人間が読み書きしやすい文法 — `a -> b: ラベル` のような直感的な構造

- 美しいデフォルト — オプション無しでも結果が綺麗で見栄えが良い

- コンテナ / ネスト / アイコン — クラウドインフラ図に強い

簡単な例。

client -> api: HTTP

api -> postgres: SQL

api -> redis: Cache

api: {

shape: cylinder

style.fill: "#3b82f6"

}

postgres.shape: cylinder

redis.shape: cylinder

CLI で SVG / PNG / PDF 出力ができ、VS Code 拡張と D2 Playground もあります。

brew install d2

d2 input.d2 output.svg

代表的な機能:

- コンテナ / グリッド / シーケンス / クラス図

- アイコン埋め込み — AWS、GCP、Kubernetes など 1000+ アイコン内蔵

- テーマ — 16 のビルトインテーマ + カスタムテーマ

- 自動レイアウト — dagre (デフォルト)、ELK、TALA (Terrastruct 独自)

- アニメーション — 図と図の差分アニメ (PR レビュー向け)

料金は D2 本体 (CLI + ライブラリ) は無料 OSS。Terrastruct のホスト型共同編集ツール (D2 Studio) は個人 19 ドル/月から。

D2 の強みは「Mermaid よりも綺麗にレイアウトされ、Graphviz より圧倒的に簡単」のバランスです。インフラ / システムアーキテクチャ図をコードで管理したいなら 2026 年時点での最有力候補です。

6. Eraser.io — コードベースのアーキテクチャ

Eraser.io は 2022 年にローンチした共同作図 SaaS です。核となる差別化要因は "Diagrams as Code" モード — テキストで箱 / ノード / クラウドアイコンを定義すると、画面右側にビジュアル図が表示されます。

2024 年後半に「Eraser DiagramGPT」が話題になりました。自然言語 (「AWS 上に 3-tier Web アプリ描いて」「Terraform モジュールを描いて」) を入力すると、コード + 図が生成されます。コードベース自体を解析してコンポーネント図を自動生成する GitHub 統合も提供されています。

代表機能:

- 独自 DSL — 「人間が書きやすい」文法、Mermaid より短くて綺麗

- クラウドアイコン — AWS / GCP / Azure / Kubernetes 全部

- Eraser AI — 自然言語 → 図 (DiagramGPT)

- GitHub 統合 — PR に図を自動添付

- マルチプレイヤー — リアルタイム共同編集

- API — ヘッドレスでの図生成 (サーバーサイド)

料金は個人無料 (制限あり)、チーム 9 ドル/ユーザー/月から。

[Eraser DSL の例 — シーケンス図]

User > Browser: opens app

Browser > API: HTTP GET /home

API > Database: SELECT user

Database > API: user data

API > Browser: HTML

Eraser の魅力は「綺麗な DSL + SaaS の共同編集 + AI 補助」の三拍子です。D2 が OSS / CLI 優先なら、Eraser は「チームで一緒に使う共同編集 SaaS」のポジションです。

7. Lucidchart — エンタープライズ標準

Lucidchart は 2010 年にローンチしたエンタープライズ作図ツールの標準です。Visio の Web 代替として始まり、今は Microsoft Visio よりはるかに大きな市場を占めています。自社統計では 7000 万ユーザー、Fortune 500 の 99% が使用。

エンタープライズで 1 位の理由:

- 豊富なシェイプライブラリ — AWS、Azure、GCP、Cisco、ITIL など業界別シェイプセット

- 自動作図 — CSV / SQL / コードから ER 図、クラス図を自動生成

- データリンク — Google Sheets / Excel のデータをシェイプに自動マッピング (条件付き書式)

- SSO / SCIM / 監査ログ — エンタープライズ IT 要件を満たす

- UML、BPMN、Lucidchart 標準すべてに対応

- AI Chart Generation — 自然言語 / テキスト / データから図生成

料金は個人無料 (制限あり)、個人 7.95 ドル/月、チーム 9 ドル/ユーザー/月、エンタープライズは見積もり。

Lucidchart が合うシナリオ:

- 保険 / 金融 / 医療など規制産業の BPMN / ワークフロー文書

- 営業/マーケと一緒に見るシステムフロー (非開発者と共有)

- 会社の標準がすでに Lucidchart の場合

姉妹製品 Lucidspark はホワイトボードカテゴリで Miro / FigJam の競合です。Lucidchart + Lucidspark のバンドルがエンタープライズでよくセット販売されます。

8. Miro / FigJam — ホワイトボードの二大巨頭

ホワイトボード共同編集ツール市場は 2026 年時点で実質 2 強 — Miro と FigJam — に整理されました。

Miro

2011 年に RealtimeBoard の名で始まった Miro はホワイトボードカテゴリの圧倒的 1 位。自社統計で 4500 万ユーザー、Fortune 100 の 99% が使用。

- 無限キャンバス — ズーム、ほぼ全てのワークショップ形式に対応

- 豊富なテンプレート — Affinity Mapping、Lean Canvas、OKR など 1000+ 個

- 統合 — Jira / Asana / Notion / Slack / Zoom など主要 SaaS 全部

- Miro AI — 図生成、付箋要約、マインドマップ拡張

- カスタムアプリ — Miro Marketplace の外部アプリ埋め込み

料金は無料 (3 ボード制限)、8 ドル/ユーザー/月から。

FigJam (Figma)

Figma が 2021 年にローンチしたホワイトボードツール。Figma のデザインファイルと同じワークスペースで動くのが大きな差別化要因。

- デザインファイル取り込み — Figma コンポーネントをそのまま FigJam にドラッグ

- ステッカー、ハンコ、音声チャット、タイマー

- FigJam AI — 図生成、議事録要約

- 料金 — 無料 (3 ファイル)、5 ドル/エディタ/月

Miro vs FigJam — 選び方

- 非デザイナー (PM、エンジニア、営業、マーケ) が多い → Miro が自然

- 会社がすでに Figma 標準 → FigJam (安いし請求も一本化)

- ワークショップ / OKR / デザインスプリントのテンプレ豊富 → Miro

- デザイン-開発の連携 (ワイヤーフレーム → デザイン) → FigJam

ホワイトボードツールは「会議のファシリテーターが誰か」が決定要因です。デザイナーがワークショップをリードすると自然に FigJam へ、PM やコンサルタントがリードすると Miro が 1 位です。

9. draw.io / diagrams.net — 永遠の無料標準

draw.io (ドメインが diagrams.net に変わっただけで同じツール) は 2012 年から無料で提供されている作図ツールです。イギリスの JGraph が運営しています。

特徴:

- 完全無料 — 広告無し、機能制限無し

- データ主権 — ローカル / Google Drive / OneDrive / Dropbox に直接保存

- セルフホスト — Docker イメージで社内デプロイ

- 豊富なシェイプ — AWS、GCP、Azure、Kubernetes、Cisco など業界全般

- VS Code 拡張 — .drawio ファイルを IDE 内で編集

- Confluence / Jira プラグイン — Atlassian Marketplace の 1 位

draw.io の魅力は「永遠の無料」という信頼感です。会社が潰れてもセルフホストインスタンスが動いていれば、データは死にません。Lucidchart が買収されたり値上げしたりした時のバックアップオプションとして常に 1 位に挙がります。

典型シナリオ:

- 会社 / 学校で無料ツールが必須の場合

- データを外部 SaaS に上げたくない (セキュリティ / コンプライアンス)

- Confluence 内でそのまま図編集 (draw.io for Confluence プラグイン)

短所は「デザインがやや古めかしい」点、そして共同編集が Lucidchart / Miro ほど滑らかではない点です。それでも無料という圧倒的長所の前では多くが許されます。

10. Whimsical — フロー + ワイヤーフレーム

Whimsical は 2017 年にローンチした多目的作図 SaaS です。カテゴリ的には「フローチャート + ワイヤーフレーム + マインドマップ + 付箋」を一つに合体させた点が差別化要因です。

代表機能:

- フローチャート — 綺麗なデフォルトスタイル、「そのまま使える」

- ワイヤーフレーム — Sketch / Figma より軽く UI ワイヤーフレームを描く時

- マインドマップ / 付箋 / ドキュメント — Notion 風の統合ドキュメント機能

- AI — Whimsical AI で自然言語 → フローチャート

- 料金 — 無料 (4 ファイル制限)、12 ドル/ユーザー/月から

Whimsical の魅力は「デザインセンスの良いデフォルト」です。Lucidchart / draw.io が「機能 100% 表示」なら、Whimsical は「より綺麗に、より少なく、より綺麗に」のアプローチ。トス / カカオのような韓国のデザイン中心チームでもよく見ます。

短所は無料枠が 4 ファイルしかない点。本格利用には有料が必須です。

11. Python diagrams (Mingrammer) / PlantUML / Graphviz — コードベースの古典

コードで図を描く伝統は古いです。2026 年でも活発な 3 つを整理します。

Python diagrams (Mingrammer)

韓国の開発者 Mingrammer (キム・ミンホ) が 2020 年に作ったライブラリ。AWS、GCP、Azure、Kubernetes、OpenStack などの公式アイコンを Python コードで組み合わせてクラウドアーキテクチャ図を描きます。

pip install diagrams

from diagrams import Diagram

from diagrams.aws.compute import EC2

from diagrams.aws.database import RDS

from diagrams.aws.network import ELB

with Diagram("Web Service", show=False):

ELB("lb") >> EC2("web") >> RDS("db")

これを実行すると `web_service.png` が生成されます。GitHub スター 3.5 万、クラウドアーキ可視化の事実上の標準です。インフラ RFC ドキュメントによく登場します。

PlantUML

2009 年から続く UML 図 DSL の古典です。Java 製のレンダラで、Graphviz をバックエンドに使います。UML の全標準図 (クラス / シーケンス / アクティビティ / ユースケース / コンポーネント) を全部サポート。

大学 / 情報工学教育 / 日本の SI 企業で今も広く使われています。マイクロソフト / Google のような海外ビッグテックは Mermaid / D2 に移りましたが、日本の NTT データ、富士通のような SI 企業では PlantUML が標準です。

ZenUML

PlantUML 同様にシーケンス図中心の DSL ですが、文法が自然言語寄りです。

A.send {

B.process()

C.notify()

}

Web エディタ (zenuml.com) が綺麗で、Confluence / Jira 統合も提供。

Graphviz

ここで一番古い (1991 年 AT&T Bell Labs 出身) グラフ可視化ツールです。DOT 言語でノードとエッジを定義すると自動レイアウトで SVG / PNG が出ます。

digraph G {

rankdir=LR;

A -> B;

B -> C;

C -> A;

}

Graphviz 自身のデフォルトはやや古めかしいですが、上記の全てのツール (PlantUML、D2 の一部、Mermaid の一部) がバックエンドとして依存している分、「エンジン」としての地位は揺るぎありません。

12. AI 作図 — Mermaid AI / ChatGPT / Claude

2025 年から LLM での図生成の流れが本格化しました。代表 3 種類を整理します。

Mermaid AI / Eraser DiagramGPT / D2 AI

各ツールが公式に提供する AI 機能です。長所は「そのツールの DSL に特化学習」されている点 — Mermaid AI はほぼ 100% 有効な Mermaid コードを返します。

典型ワークフロー:

[プロンプト]

"3-tier Web アプリのアーキを シーケンス図で"

[Mermaid AI が生成した結果]

sequenceDiagram

User->>WebApp: Request

WebApp->>API: REST call

API->>Database: SQL query

Database-->>API: rows

API-->>WebApp: JSON

WebApp-->>User: HTML

ChatGPT / Claude — 汎用 LLM で Mermaid / PlantUML / D2 を生成

ChatGPT 4 と Claude 4.5 のどちらも Mermaid と PlantUML を綺麗に生成します。「このコードベースのシーケンスを描いて」のような依頼をコードと一緒に投げると、Mermaid ブロックでそのまま返してくれます。

長所は「ツール制約無し」 — 一つの LLM で Mermaid、PlantUML、D2 全部生成可能。短所は「DSL エラーがたまに出る」 — 特に D2 のような比較的新しい DSL は学習データが少なく、一発で 100% にならないケースがあります。

Claude の Artifacts — リアルタイムプレビュー

Claude.ai の Artifacts は Mermaid 図をリアルタイムでレンダリングしてくれます。「この図のデータベースを 2 つに分けて」のような後続依頼もすぐに反映されます。図の初稿を LLM とピンポンで磨く時、最速のツールです。

tldraw の Make Real — ワイヤーフレーム → HTML

tldraw が出した差別化要因は「絵 → 動くコード」。キャンバスに手でボタン / 入力欄を描き「Make Real」を押すと、GPT-4 が動作する HTML/CSS を生成します。

2026 年のベストプラクティスは「ツール標準 AI + LLM 補助」の組み合わせです。Mermaid Chart の AI で初稿を作り、Claude とピンポンしながら磨く流れが最も自然です。

13. 韓国 / 日本 — カカオ、トス、メルカリ、CyberAgent

地域別のツール選好を見ます。

韓国

- トス (Toss) — デザイン議論は Figma + FigJam、素早いスケッチは Excalidraw、インフラ RFC は D2 / Mermaid がよく登場。Toss Tech ブログにインフラ図が頻繁に投稿される

- カカオ (Kakao) — Confluence + draw.io の組み合わせが社内標準に近い。デザイン共同編集は Figma。カカオデザインチームが独自のデザインシステム (Karlo / KakaoTalk のコンポーネント) を運用

- ネイバー (Naver) — 大企業らしく部署別に違う。NPay、クラウド、LINE 全部独自のデザインシステム。Mermaid + Excalidraw + Lucidchart が広く使われる

- ウアハン兄弟 (배민/Baemin) — 「ウアハン」技術ブログに Excalidraw 手描き図が頻繁登場。自由な雰囲気の反映

- 当根 (Karrot) — Figma + FigJam 中心。一部インフラチームが D2 使用

日本

- メルカリ — Miro が社内標準。デザインワークショップは FigJam。インフラ図は Mermaid + draw.io。mercari engineering ブログによく載る

- CyberAgent — FigJam 中心。AbemaTV のような子会社のデザインシステムは Figma 標準。インフラは Mermaid + PlantUML

- LINE — PlantUML 文化の強い会社の一つ。新規プロジェクトでは Mermaid / D2 へ移行中

- DeNA / GREE — Lucidchart と Confluence + draw.io の組み合わせが見える

- NTT データ / 富士通 / NEC — PlantUML 標準が固い。SI 業界の UML 文書化慣行の影響

全体的な傾向:

- デザイン会社 (トス、当根、メルカリ、CyberAgent) → Figma + FigJam 優勢

- エンジニアリング中心 (ネイバー、カカオ、メルカリのバックエンド) → Mermaid + D2 + draw.io 優勢

- 伝統 SI / エンタープライズ (NTT、富士通、NEC) → PlantUML + Lucidchart 優勢

14. 誰が何を選ぶべきか — 会議 / ドキュメント / コード優先 / デザイン

シナリオ別の推奨を整理します。

会議 / 議論 / 1 軍

- Excalidraw — 無料、即起動、手描き感

- tldraw — 自アプリ埋め込み、無限キャンバス

- Miro / FigJam — 大規模ワークショップ、多人数

ドキュメント / Wiki / ブログ

- Mermaid — GitHub / Notion / Obsidian / Slack 互換、Markdown コードフェンス

- D2 — Mermaid より綺麗で、より洗練

- Excalidraw — 手描き感が欲しい時

コード / インフラ / Diagrams as Code

- D2 — モダン、綺麗、クラウドアイコン

- Eraser.io — 共同編集 SaaS + AI

- Python diagrams (Mingrammer) — クラウドアーキ PNG

- PlantUML — UML 標準、日本の SI 環境

- Graphviz — 最も単純なノード-エッジ

エンタープライズ / ワークフロー

- Lucidchart — BPMN、部署間共有、標準

- Miro — コンサルティングワークショップ、OKR

- draw.io / Confluence プラグイン — セキュリティ / 無料

デザイン / ワイヤーフレーム

- Figma + FigJam — デザイン → ワイヤーフレーム → デザインが一つのワークスペース

- Whimsical — 素早いワイヤーフレーム + フロー

- OmniGraffle / Sketch — Mac ネイティブ、デザイナー個人作業

AI 補助

- Mermaid Chart AI — 正確な Mermaid コード生成

- Eraser DiagramGPT — 自然言語 → アーキ

- Claude Artifacts — ピンポンで磨く

- tldraw Make Real — ワイヤーフレーム → HTML

2026 年の答えは「一つに統一」ではなく「用途別に最適」です。Excalidraw で会議、Mermaid でドキュメント、D2 でインフラ、FigJam でワークショップ、Claude で磨く — この組み合わせが最も自然です。

15. 参考 / References

Excalidraw

- Excalidraw 公式サイト — https://excalidraw.com/

- Excalidraw GitHub — https://github.com/excalidraw/excalidraw

- Excalidraw+ — https://plus.excalidraw.com/

Mermaid

- Mermaid 公式サイト — https://mermaid.js.org/

- Mermaid Chart (商用) — https://www.mermaidchart.com/

- Mermaid GitHub — https://github.com/mermaid-js/mermaid

tldraw

- tldraw 公式サイト — https://www.tldraw.com/

- tldraw SDK — https://tldraw.dev/

- tldraw GitHub — https://github.com/tldraw/tldraw

- Make Real デモ — https://makereal.tldraw.com/

D2 (Terrastruct)

- D2 公式サイト — https://d2lang.com/

- D2 Playground — https://play.d2lang.com/

- D2 GitHub — https://github.com/terrastruct/d2

Eraser.io

- Eraser 公式サイト — https://www.eraser.io/

- Eraser DiagramGPT — https://www.eraser.io/diagramgpt

Lucidchart

- Lucidchart 公式サイト — https://www.lucidchart.com/

- Lucidspark — https://lucidspark.com/

Miro / FigJam

- Miro 公式サイト — https://miro.com/

- FigJam (Figma) — https://www.figma.com/figjam/

draw.io / diagrams.net

- diagrams.net 公式サイト — https://www.diagrams.net/

- draw.io GitHub — https://github.com/jgraph/drawio

Whimsical

- Whimsical 公式サイト — https://whimsical.com/

コードベースの古典

- Python diagrams (Mingrammer) — https://diagrams.mingrammer.com/

- PlantUML 公式サイト — https://plantuml.com/

- ZenUML 公式サイト — https://zenuml.com/

- Graphviz 公式サイト — https://graphviz.org/

その他 / デザイナーツール

- OmniGraffle — https://www.omnigroup.com/omnigraffle/

- Sketch — https://www.sketch.com/

- Concepts (iPad) — https://concepts.app/

韓国 / 日本の事例

- トス デザイン — https://toss-design.com/

- カカオ デザイン — https://design.kakao.com/

- Toss Tech ブログ — https://toss.tech/

- ウアハン技術ブログ — https://techblog.woowahan.com/

- 当根チームブログ — https://medium.com/daangn

- メルカリエンジニアリング — https://engineering.mercari.com/

- CyberAgent Developers Blog — https://developers.cyberagent.co.jp/blog/

- LINE Engineering — https://engineering.linecorp.com/ko

현재 단락 (1/313)

2026年の図解は一つのツールでは終わりません。会議中に一緒に描くホワイトボード、ドキュメントに添えるさっとした図、Git に一緒にコミットするコードベースのアーキテクチャ、そして付箋とカードで進める...

작성 글자: 0자원문 글자: 13,645자작성 단락: 0/313