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.

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
8
GitHub Actions Visualizer SQL Formatter Visual SQL 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