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.

Use Case
2026-05-18

Common pitfalls when drawing infrastructure diagrams with Mermaid

A practical guide to organizing node names, arrows, and diagram scope when building infrastructure diagrams with Mermaid in the browser.

Use Case
2026-05-18

Generate Mermaid ER diagrams from SQL DDL to review table relationships

A practical workflow for turning CREATE TABLE statements into Mermaid ER diagrams and checking foreign keys before a schema review.

Recent Articles

Use Case
2026-05-18

Use a SQL formatter before review to make queries easier to read

A practical workflow for formatting long SQL queries so JOIN, WHERE, GROUP BY, and ORDER BY clauses are easier to review.

Use Case
2026-05-18

Visualize GitHub Actions needs dependencies with Mermaid

A practical workflow for reading complex GitHub Actions workflow YAML by separating job dependencies from step details.

Use Case
2026-05-18

Common pitfalls when drawing infrastructure diagrams with Mermaid

A practical guide to organizing node names, arrows, and diagram scope when building infrastructure diagrams with Mermaid in the browser.

Use Case
2026-05-18

Generate Mermaid ER diagrams from SQL DDL to review table relationships

A practical workflow for turning CREATE TABLE statements into Mermaid ER diagrams and checking foreign keys before a schema review.

Use Case
2026-05-18

Design notes for building JOIN queries with a Visual SQL Builder

A practical workflow for using a Visual SQL Builder to assemble SELECT, JOIN, and WHERE clauses without losing track of table relationships.

Use Case
2026-05-17

Convert CSV and JSON to check data faster

A practical workflow for moving between CSV exports, API responses, and spreadsheet-style review without losing track of fields.

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

Articles
1
Article Index
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
4
Markdown Table Generator Text & Code Suite Regex Tester Diff Viewer
URL, QR & Network
4
URL Encode / Decode 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