DevToolKits.app
構成図可視化

インフラ構成図メーカー

GUI操作だけでシステム構成図やネットワーク図を作成。Mermaid形式のコードと画像を即座に生成します。

ガイド: 使い方と特徴

  • 「ノードを追加」ボタンで要素を作成し、ラベルや形状（長方形、角丸、円筒など）を設定します。
  • 「接続を追加」ボタンで要素間のリレーションシップを定義します。開始ノードと終了ノードをプルダウンから選択できます。
  • 「配置方向」セクションから、図の流れ（上から下、左から右など）を切り替え可能です。
  • 「画像として保存」ボタンで、作成した構成図をPNG画像としてダウンロードできます。
  • 「Mermaidをコピー」ボタンで、設計した構成図のコードをクリップボードにコピーし、ドキュメント等に貼り付け可能です。

サンプル: 構成図の例

標準的なWeb 3層構成

入力例

Nodes: Internet, Load Balancer, App Server, DB
Connections: Internet -> LB -> App -> DB

出力例

graph TB
    n1["Internet"]
    n2(["Load Balancer"])
    n3["App Server"]
    n4[("Database")]
    n1 --> n2
    n2 --> n3
    n3 --> n4

FAQ: よくある質問

  • 作成した図は保存できますか？

    「画像として保存」ボタンからPNG形式でダウンロード可能です。また、Mermaidコードをコピーして保存しておくことで、後から再編集することもできます。

  • クラウド固有のアイコン（AWS/GCPなど）は使えますか？

    現在は汎用的な形状のみに対応しています。アイコン対応については今後のアップデートで検討中です。

  • ノードをドラッグして配置を変えられますか？

    Mermaidの自動レイアウトエンジンを使用しているため、手動でのドラッグ＆ドロップには対応していません。配置方向の切り替えで調整してください。

使い道: 主な使い道

  • システム構成図のクイック作成

    小規模な個人プロジェクトから商用システムの概略構成図まで、素早く可視化して共有できます。

  • ドキュメント（README等）の図解

    GitHubのREADMEや社内Wikiに貼り付けるための構成図コードを数分で作成できます。

  • ネットワーク設計のイメージ共有

    サブネットやゲートウェイなどの依存関係を視覚化し、チーム内での認識合わせに活用できます。

注意: 利用上の注意

  • データの永続化について

    ブラウザをリロードすると編集内容が消えるため、必要な場合はMermaidコードをコピーして保存してください。

  • レイアウトの制約

    Mermaidの自動配置を使用しているため、要素をミリ単位で自由に配置することはできません。

  • ブラウザの負荷

    ノード数が極端に多い場合、描画処理によりブラウザの動作が重くなる場合があります。

ノード設定

接続設定

graph TB Users["Users"] LB["Load Balancer"] App1["App Server 1"] App2["App Server 2"] DB[("Database")] Users --> LB LB --> App1 LB --> App2 App1 --> DB App2 --> DB

最新記事

Story
2026-03-09

再帰で解くJSON→TypeScript型変換：ライブラリに頼らない強み

APIレスポンスから瞬時に型定義を生成。外部パーサーを使わずに再帰的なアルゴリズムで軽量・高速に実装した裏側を紹介します。

Read more →
Story
2026-03-09

安全なJWT検証環境をブラウザに。セキュリティエンジニアの視点

機密性の高いトークンを安全に扱うために。joseライブラリとローカル処理を組み合わせたJWTツールの設計思想を解説します。

Read more →
Story
2026-03-09

QRコード生成をもっと手軽に、もっと安全に

Canvas APIとnode-qrcodeを組み合わせ、ブラウザ上でのリアルタイムな生成とプライバシー保護を両立したツールの紹介。

Read more →
Story
2026-03-09

データ送信なしで安心。ブラウザ完結型Diffツールの開発背景

テキスト差分を安全かつ高速に比較するために、外部ライブラリを活用しつつプライバシーを最優先した設計について解説します。

Read more →
Story
2026-03-09

ライブラリ不要のタイムゾーン変換：Intl APIの底力

Moment.jsやdate-fnsを使わずに、ブラウザ標準のIntl APIだけで実現する軽量なタイムゾーン処理の裏側。

Read more →
Story
2026-03-03

SQL to ER図変換ツールの開発秘話：ブラウザ完結へのこだわり

SQLからER図を生成するツールの開発背景と、セキュリティと利便性を両立させるための技術的な挑戦について紹介します。

Read more →

広告

他のツールへのショートカット

よく使うツールへの内部リンクをまとめました。ページ移動なしで切り替えできます。

DevToolKits.app
記事・情報
1 items
記事一覧 →
開発・DevOps
8 items
GitHub Actions 可視化 → SQL フォーマッター → ビジュアル SQL ビルダー → SQL → ER 図変換 → Curl コンバーター → Chmod 計算機 → Cron設定・解析 → インフラ構成図メーカー →
データ変換・スキーマ
6 items
JSON 整形 → JSON → TypeScript 型生成 → JSON → Zod スキーマ → JSON → OpenAPI スキーマ → JSON ⇔ YAML 変換 → CSV ⇔ JSON 変換 →
セキュリティ・暗号
5 items
Base64 / 58 / 32 → JWT ツール → ハッシュ・HMAC生成 → JWKS ジェネレーター → UUID 生成 →
テキスト・コード補助
4 items
Markdownテーブル生成 → テキスト＆コード補助 → 正規表現テスター → Diff ビューア →
URL・通信
4 items
URL エンコード / デコード → URL パラメータ → JSON → QR 生成 → QR リーダー →
デザイン・UI
2 items
カラーユーティリティ → ファビコン生成 →
日時・時間
3 items
タイムゾーン変換 → 時間単位の変換 → UNIXタイム変換 →

広告