Skip to content
DevToolKits.app
Arch Viz

Infrastructure Diagram Builder

Create system architecture and network diagrams with a GUI. Generate Mermaid code and images instantly.

Guide: How to use & features

  • Click "Add Node" to create elements and set their labels and shapes (Rectangle, Round, Cylinder, etc.).
  • Use "Add Connection" to define relationships between elements by selecting from/to nodes from the dropdowns.
  • Switch the diagram flow (Top to Bottom, Left to Right, etc.) in the "Layout Direction" section.
  • Download the generated diagram as a PNG image using the "Download PNG" button.
  • Copy the Mermaid syntax to your clipboard with "Copy Mermaid" for use in README files or documentation tools.

Samples: Examples

Standard Web 3-Tier

Input

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

Output

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

FAQ: FAQ

  • Can I save my diagram?

    Yes, you can download it as a PNG image. You can also copy the Mermaid code to save your design for future reference.

  • Can I use cloud-specific icons (AWS/Azure)?

    Currently, only general shapes are supported. We are considering icon support for future updates.

  • Can I drag and drop nodes to change positions?

    The layout is automatically handled by Mermaid engine. Manual drag-and-drop is not supported; use the layout direction setting to adjust the flow.

Use cases: Common Use Cases

  • Quick Architecture Diagrams

    Rapidly visualize and share architecture overview for projects of any size.

  • Documentation Illustrations

    Generate diagram code for GitHub READMEs or internal wikis in minutes.

  • Network Design Brainstorming

    Visualize dependencies between subnets or gateways to align with your team.

Notes: Notes & Limitations

  • Data Persistence

    Content is lost on refresh. Please copy and save the Mermaid code if you need to keep your changes.

  • Layout Constraints

    Elements are automatically arranged. Custom placement via drag-and-drop is not supported.

  • Browser Performance

    A very large number of nodes may impact browser rendering performance.

Nodes

Connections

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

Infrastructure Diagram Builder

Automatically render visual infrastructure architecture diagrams from code using Mermaid.js.
This tool makes it easy to map out server configurations, network topologies, and cloud resources (AWS, GCP, Azure) locally, treating your diagram essentially as Infrastructure as Code.

Key Features and Use Cases

  • Rapid Sharing: Instantly generate architecture diagrams in real-time as you type your configuration.
  • Perfect for Documentation: Download generated diagrams as images (PNG) or copy the Mermaid code directly into Markdown-compatible environments like GitHub, Notion, or Zenn.
  • Secure Browser-Side Processing: Because cloud architectural metadata can be highly sensitive, all rendering and parsing happens locally in your web browser. Nothing is ever sent to our servers.

Articles for this tool

Introduction
2026-02-25

Create Infrastructure Diagrams in Your Browser: Auto-Generate Diagrams from Code

Use our Mermaid.js-based infrastructure diagram builder to visualize cloud and network configurations just by defining nodes and connections.

Recent Articles

Use Case
2026-08-07

curl Options Cheat Sheet: What -X, -H and -d Actually Do

A reference for the curl options you meet in real API work: why -d already implies POST, how -d differs from --data-raw, the @ prefix that silently reads a file, single vs double quotes, and why -k and -L deserve more caution than they usually get.

Introduction
2026-08-06

Converting Between JSON Schema and Zod: How required Maps to .optional()

Inside a two-way converter that turns JSON Schema into a Zod schema and Zod code back into JSON Schema. Covers the inverted defaults between required and .optional(), the constraint mapping table, and how the Zod side is parsed without executing any code.

Use Case
2026-08-06

SQL Clause Order Reference: Why WHERE Can't See Your SELECT Alias

The order you write SQL clauses is not the order the database runs them. A reference for the logical execution order (FROM → WHERE → GROUP BY → HAVING → SELECT → ORDER BY → LIMIT), why aliases fail in WHERE, when to use WHERE vs HAVING, and the MySQL/PostgreSQL differences that bite.

Use Case
2026-08-06

Unified Diff Format Reference: Reading @@ Hunks in git diff Output

How to read the unified diff format git produces: what the four numbers in @@ -12,7 +12,9 @@ mean, why a one-character edit shows as a whole-line replacement, the whitespace and line-ending traps, \ No newline at end of file, combined @@@ diffs on merges, and rename detection via similarity index.

Use Case
2026-08-06

UTC to JST Reference: The 9-Hour Offset, Cheat Sheet & Timezone Pitfalls

Convert between UTC and JST (Japan Standard Time) with a cheat sheet. Covers what Z and +09:00 mean in ISO 8601, when JavaScript date parsing silently shifts by 9 hours, MySQL/PostgreSQL timezone behavior, and why GitHub Actions cron always runs in UTC.

Use Case
2026-08-04

CREATE TABLE Reference: MySQL vs PostgreSQL vs SQLite Types & Constraints

A cross-database CREATE TABLE (DDL) reference with cheat sheets for data types, auto-increment keys (AUTO_INCREMENT / IDENTITY / rowid), foreign key ON DELETE behavior, and the CHECK constraint that MySQL silently ignores.

Ad

Stay within DevToolKits with shortcuts to the most-used utilities across the site.

Articles
1
Article Index
AI & LLM
3
AI Rules Generator LLM Token Counter LLM API Cost Calculator
Development & DevOps
9
GitHub Actions Visualizer SQL Formatter Visual SQL Builder DDL Builder SQL → ER Diagram cURL Converter chmod Calculator Cron Editor & Parser Infrastructure Diagram Builder
Data Conversion & Schemas
6
JSON Formatter JSON → TypeScript JSON → Zod JSON → OpenAPI JSON ⇔ YAML CSV ⇔ JSON Converter
Security & Cryptography
5
Base64 / 58 / 32 JWT Tool Hash & HMAC Generator JWKS Generator UUID Generator
Text & Code Helpers
5
Markdown Table Generator Text & Code Suite Regex Tester Diff Viewer Case Converter
URL, QR & Network
5
URL Encode / Decode IP / CIDR Calculator URL Params → JSON QR Generator QR Reader
Design & UI
2
Color Utility Favicon Generator
Date & Time
3
Time Zone Converter Time Units UNIX Timestamp Converter

Ad