🥰

システム構成図・シーケンス図、結局どれ使う?人気ツールとエンジニアのリアルな使い分け徹底解説

に公開4

システム構成図やシーケンス図を描くとき、「どのツールを使えばいいの?」 と悩んでいませんか?

draw.io、PlantUML、Mermaid、FigJam...選択肢が多すぎて、結局いつも同じツールに逃げてしまう。でも本当にそれでいいのか不安。

この記事では、実際のエンジニアたちが使っているツールと、その選び方を徹底的にまとめました。

▼ガッシーさんのツイート
https://x.com/GussieTech/status/1984195601471594908

に集まった情報を参考に記載させてもらっています。デザイナー、プログラマー、エンジニア、経営層と様々な方がリアクションされていたので、みんな悩んでいるんだな…わかるぞ…と思い、しれっとまとめさせてもらいました。私も個人的にめっちゃ悩んでいたので。問題があれば削除しますのでご安心ください。


人気の図形描画・作図ツール徹底比較

1. draw.io (diagrams.net) - 最多回答の万能ツール

完全無料で高機能、幅広い用途に対応できる万能ツールです。
https://www.drawio.com/

メリット

  • 完全無料で使える
  • デスクトップ版とブラウザ版がある
  • AWS、Firebase等のアイコンライブラリが豊富
  • VSCodeプラグインでdrawio.png形式で編集可能
  • 直感的なGUI操作
  • システム構成図、E-R図など汎用的な図表全般に対応

デメリット

  • 直線が微妙にカクッとなることがある
  • 会社によってはインストールやオンライン利用に制約がある場合も(業務利用で環境構築が必要な場合、経費が発生することも)
  • Git差分管理がしにくい(XMLが冗長)
  • 起動が重い(既存ファイルがものによっては開くのに時間がかかる)

主な用途

  • システム構成図
  • E-R図
  • 汎用的な図表全般

実際の声と雑感

「考えながら書くときはdraw.io」「上手く作れないときはdraw.io」という声が多数。困ったときの最終手段として活躍。やはり大体これ使えると何とかなる場面は多めです。


2. PlantUML - コードベース派に人気

テキストで図を記述するコードベースツール。Javaベース。PlantUML Web Serverでliveエディタも利用可能です。

https://plantuml.com/ja/

メリット

  • Git管理がしやすい(テキストベース)
  • AIに読ませやすい・生成させやすい
  • ロジックを間違わない安心感
  • VSCodeやGitHub Copilotと相性が良い
  • UML図全般をカバーできる
  • 厳密なUML(クラス図、コンポーネント図など)に対応

デメリット

  • Javaベース(慣れが必要)
  • 位置関係が大崩れする可能性がある
  • 情報量が増えると配置調整にキレそうになる
  • Mermaidより構文が複雑

Tips

  • [hidden]線を使って見えない位置で固定できる
  • AIに説明してPlantUML図を出させて手動修正→AIに読ませる、を繰り返すと効率的

主な用途

  • シーケンス図(最多)
  • E-R図(ERD)
  • 単純な構成図
  • 厳密なUML図

実際の声と雑感

「plantでいけるときはそっち、無理臭ければdrawio」「頭の中で設計完了済みで線引くのが面倒なときはPlantUML」。役職や部門が絡むシーケンス図を書く場合、スイムレーンが使えるので個人的にも便利でした。


3. Mermaid - AIとの親和性が高い

GitHubのMarkdownやZennに埋め込み可能なテキストベースツール。JavaScriptベース。最近はAIでの生成精度も向上しています。ライブエディターもあります。

https://mermaid.js.org/

因みにライブエディタ―もある。
https://mermaid.live/edit#

メリット

  • Markdownで扱える
  • AIに読ませやすい(ChatGPT等のAIに投げやすい)
  • Git管理しやすい
  • Obsidianで使える
  • GitHub/Zennでネイティブ表示
  • トークン効率が最高(詳細は後述)

デメリット

  • 位置関係の細かい指定が難しい
  • 複雑な図には不向き
  • 線のクロス問題(自動配置エンジンの制約)

主な用途

  • シーケンス図
  • フローチャート
  • シンプルな構成図
  • AIで生成・編集する図

実際の声と雑感

「できる限りMermaid形式で作ってます!(AIに読ませるため)」。今後のAI時代を考えると、取り扱えるならコスパも良いのでおすすめです。


4. その他の人気ツール

ツール名 特徴 メリット デメリット 主な声と雑感
FigJam / Figma チームコラボレーションに強いホワイトボード系 リアルタイム共同編集が強力、デザインツールとしての完成度が高い 動作が重い、会社での利用制約がある場合も 企業・フリーランス勢に人気。デザイナー組と意思疎通が図りやすい。
Miro ホワイトボード系、FigJamと似た立ち位置 チームでの共同作業に最適、ブレストやワークショップに強い、テンプレートが豊富 有料プランが必要な場面が多い、システム構成図には若干オーバースペック オンラインホワイトボード、タスク管理も一緒にできるため、作図ツール以外の用途でも利用される。
Visio Microsoft製の図作成ツール 企業での利用が多い、Microsoft製品との親和性が高い、汎用性 有料(Office契約が必要)、学習コストがやや高い 日本企業での利用が多い。Office製品のプランと価格の組み合わせが複雑。

用途別の専門ツールと使い分け

シーケンス図に強いツール

  • PlantUML最多回答。コードベースで記述しやすく、Git管理に最適。
  • Mermaid:次点。GitHub/Zennでプレビュー・共有ができるため軍配が上がる声も。
  • Swagger:API仕様書と併用するケースで使われる。API開発が多い組織で有効。

E-R図に強いツール

  • draw.io:視覚的に作りやすい。直感的な操作がわかりやすい。
  • PlantUML:Git管理しやすいが、画面の情報量が増えてくると配置調整が大変になりがち。

システム構成図に強いツール

  • draw.io最多。アイコンライブラリが豊富で視覚的に作りやすい。
  • icepanel.io:システム構成図専用の特化ツール。開発アクション完了後の設計マージなどユニークな機能を持つ。

ユニークなツールたち

ツール名 特徴 実際の声・雑感
Excalidraw 手書き風の図が作れるツール。シンプルで使いやすい。 ユーザ登録なしで速攻で使える。「とりあえず書き」には良さそう。
Eraser.io AI連携機能を持つ図作成ツール。 Amazon、Microsoft、VISAなどが利用。Markdownメモ機能が好評。
Obsidian Canvas / Obsidian Mermaid ナレッジベースツールObsidianの機能。 ナレッジベースと統合可能。Mermaid記法が使える。
Graphviz コードベースのグラフ生成ツール(dot言語)。 プログラマティックに図を生成可能。大規模グラフに対応。使いこなすには修行が必要かも。
TikZ LaTeX用の図作成パッケージ。 学術論文やドキュメントに最適。R言語やPythonで画像出力が可能。
EdrawMax AI図作成機能付きのオールインワン・ドローイングソフトウェア。 15日間無料体験あり。継続利用可能な無料版は商用利用不可、透かしが入るなどの制限あり。
Svelte自作コンポーネント 完全カスタマイズの自作ツール。 完全自分好みにカスタマイズ可能。自力のあるエンジニア向け。
Xiaomi標準搭載メモアプリ スマホでサクッと書けるマインドマップ機能。 標準搭載なのはさすが。
Lucidchart AI需要にこたえたテンプレートが豊富。 アメリカ中心サービスのため、日本語表示に一部癖がある場合も。

業務環境での現実:PowerPoint / Excel派

エンジニアの理想と現実のギャップとして、Officeツールを使う声も多数ありました。

PowerPoint派の意見

  • 非エンジニアの上長への説明・承認に必須
  • 実質タダ(Office導入済み)、デスクトップアプリで軽快。
  • 素早くページコピーして試行錯誤できる。
  • 会社のセキュリティポリシーで専用ツールが使えない。
  • ベクトル描画ツールとして扱うと非常に便利。

「日本の場合、非エンジニアの上長にプレゼンして承認得ないと始まらないので、専用ツール使うより、結局パワポとかエクセルの方が汎用性高いという結論に至りますね」

Excel派の意見

  • ツール縛りや環境により、Excelを使わざるを得ない場合も...(本音)

結局、多くの企業でOffice製品が導入されており、ドキュメント管理や承認フェーズを考えると、汎用性の高さからOfficeツールが選ばれがちなのは「あるある」です。


エンジニアのリアルな使い分けパターン

多くのエンジニアは、状況に応じて柔軟にツールを使い分けています。

パターン 使い分けの基準 採用ツール
思考プロセス 考えながら書く vs 設計完了済み draw.io (試行錯誤) vs PlantUML (線引き省略)
ケースバイケース AI連携 vs 自由な配置 Mermaid (AI連携/コスパ) vs draw.io (配置調整)
対象読者 技術者 vs 顧客・非エンジニア Mermaid/PlantUML (Git管理) vs draw.io/PowerPoint (視覚的)
用途別 構成図 vs シーケンス図 vs E-R図 draw.io vs Mermaid/Swagger vs PlantUML/draw.io
環境制約 理想 vs 現実 Mermaid (理想) vs draw.io (配置要求/環境制約)
VSCode統合 開発環境一か所完結 VSCodeプラグインのdraw.io
時代の変遷 昔 vs 今 OmniGraffle/Visio vs draw.io

今後の話:AI時代における最適解

作図ツールは、もはや人間が手で描くためのものだけでなく、AI(LLM)に指示して生成・編集させるためのインターフェースにもなりつつあります。

コスパの話は以下でも一回やってるので気になる人はこちらも良ければ。

https://zenn.dev/akari1106/articles/18c0d7f205f8a7

LLM時代を見据えた最終結論

結論:ひとつには絞れない

考慮すべき要素が多すぎるため、銀の弾丸は存在しません

  • 描きやすさ(慣れ)
  • 同僚・チームの環境
  • 会社のルール・セキュリティポリシー
  • AIとの相性(トークン効率)
  • 図の規模・複雑さ
  • 用途(内部ドキュメント vs 顧客向け資料)
  • Git管理の必要性
  • 非エンジニアへの説明の有無

とはいえ、この2つは押さえておきたい

ツール 理由
draw.io 万能で汎用性が高い。無料で高機能、学習コストも低く、困ったときの最終手段として機能する。
Mermaid LLM時代の最適解。トークン効率が圧倒的(draw.ioの1/24という検証結果も)。AI生成・編集、GitHub/Zennでの表示、Git差分管理に優れ、AIワークフローとの親和性が高い

今後、AIが生成するコードやドキュメントの中で、Mermaidのようなトークン効率が良く、構造が単純な「図の言語」が標準化していく可能性は高いです。

今からAIにとって優しいデータ形式に慣れておくことは、きっとあなたの武器になるはずです。

あなたのプロジェクトで最適なパレットを選ぶ際の参考になれば幸いです。

Discussion

plusone|開発技法ノートplusone|開発技法ノート

Markdownで文書を作っているので、小さな図を作るときはmermaidですね。
mermaidの弱点は位置合わせに苦労することかな。位置合わせに時間がかかるし、思い通りにならないこともあるので、位置が重要な図はDraw.IOかな。
Xに投稿したような図をつくるならDraw.IOですね。とにかく思い通りに配置できるのがうれしい。
PlantUMLはJavaのインストールが必要なのでまだ試してません。
ER図はどのツールも一長一短かな。ER図そのものがイケてないのでmermaidでチャッチャと書いてレビューすることが多かったかな。

ツール類はあまり色々と使い始めるとあとで混乱してくるので、今使っているツールで事足りるならそれらでこなすことが多い。
だからExcelで資料作られてしまう弊害もあるけど。

灯里(akari)灯里(akari)

コメントいただきありがとうございます!
嬉しいです~

mermaidの弱点は位置合わせに苦労することかな。位置合わせに時間がかかるし、思い通りにならないこともあるので、位置が重要な図はDraw.IOかな。

まさにMermaidの最大の泣き所だと思います...!
潔くdraw.ioに切り替えるのが、エンジニアの生産性を守る秘訣かもしれませんね。
プレビュー表示しないと何が書いてあるか分からないのだけがちょっと難点、という話もありましたし!

レビューする側の方の視点はいつでも貴重なので助かります!

ツール類はあまり色々と使い始めるとあとで混乱してくるので、今使っているツールで事足りるならそれらでこなすことが多い。だからExcelで資料作られてしまう弊害もあるけど。

ですね…
何度かExcelで作ったことありますが、疲労感が他より断然違うのでみなさんの働く環境で
Excelでお願い!が飛んでこない事の祈願もかねての記事です…笑

plusone|開発技法ノートplusone|開発技法ノート

mermaidのメリットは文章を書いていてエディタを切り替えなくていいところ。書く側はイメージが頭の中にあるからあまり苦にならない。
読む方はプレビューないと大変だけどね。
もう一つのメリットは、mermaidの図をもとに生成AIとディスカッションできること。こんな風に考えてるんだけど~って投げると、それをもとに返信がありアイデアが広がったりする。作画ツールでもできなくないけど色々と大変。

灯里(akari)灯里(akari)

再度コメントいただきありがとうございます!

mermaidのメリットは文章を書いていてエディタを切り替えなくていいところ。書く側はイメージが頭の中にあるからあまり苦にならない。

これは本当に集中力と生産性に直結する大事な視点ですね~
私も基本一か所で完結したい派なので(場合によってやれないもありますが)、生成AIとディスカッションできるのは嬉しいポイントでもあるのわかります!

作図が「思考を整理する道具」から「AIとの共同作業のインターフェース」に進化しているのかな、と言うのを感じますね!

貴重なご意見をいただき、記事がさらに深まりました。
本当にありがとうございます!