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-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.

Introduction
2026-08-03

How CREATE TABLE Generation From a Visual Table Design Works | DDL Builder

A look inside DDL Builder, which turns a visually designed table into CREATE TABLE statements and an ER diagram. Covers the MySQL/PostgreSQL/SQLite type-mapping rules and the column-inference algorithm used for JSON samples.

Use Case
2026-07-21

GitHub Actions needs Design Patterns: Speed Up CI, Avoid the Anti-Patterns

A pattern reference for GitHub Actions job dependencies (needs). Covers diamond-shaped fan-out, concurrency cancellation, fail-fast tradeoffs, matrix-plus-needs gotchas, and reusable workflows, with copy-paste YAML examples.

Use Case
2026-07-21

SQL JOIN Types: Complete Reference to INNER, LEFT, RIGHT & FULL

A reference for SQL JOIN types (INNER/LEFT/RIGHT/FULL/CROSS/SELF) with a cheat sheet and row-count walkthroughs. Covers why one-to-many joins duplicate rows, the WHERE-vs-ON NULL trap, and how to write multi-table joins.

Introduction
2026-07-16

Case Converter: camelCase, snake_case & kebab-case — 9 Styles at Once

Convert identifiers between camelCase, PascalCase, snake_case, CONSTANT_CASE, kebab-case and more — all nine styles side by side. Handles acronym runs like HTTPServer, digits, and bulk multi-line conversion.

Introduction
2026-07-16

LLM API Cost Calculator: Compare Claude, GPT & Gemini Pricing Side by Side

Paste a prompt, set the expected output tokens, and compare per-request API costs across Claude, GPT and Gemini models. Covers input/output pricing structure, auto-updated price tables, and estimate limits.

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