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

Recent Articles

Story
2026-03-09

Generating QR Codes: Faster and Safer

Using Canvas API and node-qrcode to achieve real-time generation and privacy protection entirely within the browser.

Read more →
Story
2026-03-09

Solving JSON to TypeScript via Recursion: The Strength of Zero Dependencies

Generate type definitions instantly from API responses. A behind-the-scenes look at a lightweight, high-speed implementation using recursive algorithms.

Read more →
Story
2026-03-09

Secure JWT Verification in the Browser: A Security Engineer's Perspective

Handling sensitive tokens safely. Why we used the 'jose' library and local processing for our JWT tool design.

Read more →
Story
2026-03-09

Safe Without Data Transmission: The Background of Our Browser-based Diff Tool

How we designed a private, high-speed text comparison tool using browser-side computing to prioritize user privacy.

Read more →
Story
2026-03-09

Library-Free Timezone Conversion: The Power of Intl API

The story behind a lightweight timezone processing tool implemented using only the browser's native Intl API, without Moment.js or date-fns.

Read more →
Story
2026-03-03

The Story Behind SQL to ER Diagram: A Commitment to Browser-only Execution

Discover the background of our SQL-to-ER tool and the technical challenges of balancing security with convenience.

Read more →

Ad

Quick links to other tools

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

DevToolKits.app
Articles
1 items
Article Index →
Development & DevOps
8 items
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 items
JSON Formatter → JSON → TypeScript → JSON → Zod → JSON → OpenAPI → JSON ⇔ YAML → CSV ⇔ JSON Converter →
Security & Cryptography
5 items
Base64 / 58 / 32 → JWT Tool → Hash & HMAC Generator → JWKS Generator → UUID Generator →
Text & Code Helpers
4 items
Markdown Table Generator → Text & Code Suite → Regex Tester → Diff Viewer →
URL & Network
4 items
URL Encode / Decode → URL Params → JSON → QR Generator → QR Reader →
Design & UI
2 items
Color Utility → Favicon Generator →
Date & Time
3 items
Time Zone Converter → Time Units → UNIX Timestamp Converter →

Ad