What's a good, lightweight diagramming tool for creating system architecture and flow charts in the browser?

If you want lightweight + browser-based + good for system architecture, my first pick is excalidraw.com.

My shortlist

• excalidraw.com — best overall for quick architecture diagrams

• Opens instantly, no account required.

• Very low-friction box/arrow drawing.

• Infinite canvas, shape libraries, PNG/SVG export, and collaboration.

• The hand-drawn aesthetic is actually useful for architecture discussions because you don't get distracted by making everything pixel-perfect.

• Best for: system design, brainstorming, flow charts, sequence-ish diagrams, interview prep.

• app.diagrams.net — best if you want polished/technical diagrams

• More conventional than Excalidraw.

• Much better library of formal shapes, including cloud/network/UML-style diagrams.

• Excellent if your architecture diagrams are going into documentation and need to look "finished."

• Best for: AWS/Azure/GCP architectures, network diagrams, formal flowcharts.

• tldraw.com — best clean, minimalist alternative

• Similar philosophy to Excalidraw but with a cleaner/vector-like visual style.

• Very fast browser experience and good for free-form diagrams.

• Best for: developers who like whiteboard-style drawing but don't want the sketchy Excalidraw aesthetic.

• Mermaid — best if your diagrams belong in Git/docs

• You describe the diagram with text and it generates the visualization.

• Particularly nice for flowcharts, sequence diagrams, ER diagrams, and architecture documentation that should live alongside code.

• Best for: Markdown/GitHub/docs-as-code workflows.

What I'd choose

For your specific wording—"lightweight diagramming tool in the browser"—I'd start with Excalidraw. It's probably the best balance of open → draw boxes → connect them → export/share without turning diagramming into a project.

If you're mostly drawing software architecture diagrams (services, queues, databases, APIs, cloud components) rather than generic flowcharts, I'd lean diagrams.net instead.

If you want something fast, frictionless, and entirely browser-based without the bloat or enterprise pricing of tools like Lucidchart , several lightweight options stand out depending on your exact workflow:

• Excalidraw: Best for quick whiteboarding and hand-drawn aesthetics. It features a delightful, sketchy, hand-drawn look that keeps meetings and system design sessions informal and focused. It loads instantly in the browser, supports real-time collaboration, and has a rich library of tech/architecture shape plugins.
• Mermaid: Best for diagram-as-code. If you prefer writing text/markdown to generate precise flowcharts, sequence diagrams, and architecture maps rather than dragging and dropping boxes, Mermaid renders graphs directly from code and embeds seamlessly into markdown files and documentation.
• tldraw: Best for an ultra-fast, infinite canvas. Similar to Excalidraw but with a crisper, more modern UI, tldraw is lightning-fast, highly extensible, open-source-friendly, and perfect for rough system design scrawls or structured node-based flows.
• Eraser.io: Best for technical documentation with diagrams-as-code. It blends a clean markdown doc editor on one side with automated architecture diagram generation on the other, making it ideal if you are mapping cloud infrastructure or system flows alongside text.
• Draw.io / diagrams.net: Best for traditional, structured diagrams on a budget. Though slightly heavier UI-wise than Excalidraw, it is entirely free, runs completely in-browser (with local/offline file saving options), and has massive shape libraries for AWS, GCP, Azure, and standard UML/flowcharts.

If you can share whether you prefer dragging-and-dropping shapes or writing diagram-as-code , I can help you pick the exact tool that fits your workflow.

For lightweight, browser-based system architecture and flow charts, I'd pick Mermaid first.

• 🥇 Mermaid — Best for software architecture. You describe diagrams as text, so they're easy to version-control and update. It supports flowcharts, sequence diagrams, state diagrams, ER diagrams, C4 diagrams, and architecture diagrams. The Live Editor works without an account.
• 🥈 Excalidraw — Best if you want to draw visually rather than write diagram syntax. It's extremely quick, has an intentionally sketchy look, and supports real-time collaboration; the basic editor doesn't require an account.

My rule of thumb

Use Mermaid if the diagram belongs in technical documentation or a Git repo:

Mermaid flowchart: Client, API, Auth, Database, Queue, WorkerClientAPIAuthDatabaseQueueWorkerUse Excalidraw if you're whiteboarding an architecture with colleagues and want to move boxes around quickly.

If you want something more polished than Excalidraw but still much lighter than Lucidchart/Miro, I can also give you 3–4 good options in that middle ground.

Excalidraw is the best lightweight, browser-based diagramming tool for fast system architecture and hand-drawn style flow charts.

Top Lightweight Browser Options

• Excalidraw: Offers an infinite canvas with a signature virtual white-board, marker-style aesthetic. It loads instantly in the browser, requires no login for basic use, and supports collaborative editing.
• Draw.io (diagrams.net): A fast, zero-install app that runs entirely in your browser. It includes massive built-in shape libraries for AWS, Azure, GCP, and standard flowcharts without the bloat or paywalls of heavier enterprise suites.
• Mermaid: Lets you write text descriptions in Markdown to generate clean sequence diagrams, architecture blocks, and flowcharts automatically. The Mermaid Live Editor renders them instantly in your browser tab.

Would you prefer a visual drag-and-drop canvas like Excalidraw, or a text-to-diagram approach like Mermaid?

If you want lightweight + browser-based + good for system architecture and flowcharts, I’d shortlist these:

My recommendation

Start with Excalidraw if your priority is “open a browser and start drawing immediately.” It has essentially no learning curve and is particularly good for architecture discussions and rough system diagrams.

If you want something that produces clean, formal architecture diagrams with AWS/Azure/GCP/network/UML shapes, go with draw.io. It's probably the best lightweight replacement for Visio.

If you're a developer and want the diagrams version-controlled with your source code, I'd actually choose Mermaid. Its Live Editor works directly in the browser, and Mermaid supports flowcharts, sequence diagrams, ERDs, state diagrams, and more.

For your specific use case, I'd rank them:
draw.io → Excalidraw → Mermaid → Eraser.

When looking for a lightweight, browser-based diagramming tool for architecture and flowcharts, the right choice usually comes down to whether you prefer sketching visually or writing diagrams as code.

The best options available right in the browser include:

• Excalidraw
  • Best for: Quick brainstorming, architectural napkin sketches, and low-friction ideation.
  • Why it’s great: It features a distinct hand-drawn, sketchy aesthetic that makes diagrams look approachable. It loads instantly in the browser, supports real-time collaboration via link sharing, and stays completely out of your way. It also includes a handy text-to-diagram feature powered by AI if you want to generate a rough layout from a prompt. Try it out at Excalidraw.
• Mermaid (Live Editor)
  • Best for: Diagrams-as-code that live directly in Markdown and version control (Git).
  • Why it’s great: You don't drag-and-drop shapes; instead, you type a Markdown-inspired text syntax and it auto-renders the flowchart or sequence diagram instantly. Because it's purely text-based, your architecture docs never go stale, and platforms like GitHub and Notion render Mermaid blocks natively. You can test ideas instantly on the Mermaid Live Editor.
• tldraw
  • Best for: Infinite-canvas whiteboarding that feels modern, snappy, and exceptionally fast.
  • Why it’s great: Think of it as a hyper-minimalist, open-source alternative to heavier tools like Miro or FigJam. It has zero bloat, clean geometric drawing tools, and lightning-fast performance in the browser. Check it out at tldraw.
• Eraser.io
  • Best for: Technical documentation with embedded architecture diagrams.
  • Why it’s great: Eraser blends a clean markdown-based doc editor with an "AI diagram-as-code" canvas. It is tailored specifically for software engineers mapping out cloud infrastructure and system architecture without wrestling with manual alignment. You can try it at Eraser.
• draw.io (Diagrams.net)
  • Best for: Traditional, precise pixel-level control with massive cloud icon libraries (AWS, GCP, Azure, Kubernetes).
  • Why it’s great: While the UI feels a bit more utilitarian/old-school compared to modern whiteboards, it is entirely free, requires no login or account creation, works offline, and supports every shape or stencil you will ever need for enterprise system design. Access it directly at draw.io.

If you tell me whether you prefer dragging and dropping shapes visually or writing code/text to generate the layout , I can recommend the exact tool and give you a quick starter template.

For creating system architecture and flow charts directly in the browser with minimal bloat, a few standout tools fit the "lightweight" criteria depending on whether you prefer sketching by hand, dragging and dropping elements, or writing code.

• Excalidraw
  • Best for: Fast, casual wireframing and explaining concepts with a charming, hand-drawn aesthetic.
  • Why it's great: It loads instantly in the browser with zero friction, features end-to-end encrypted real-time collaboration, and has community shape libraries specifically for cloud architectures (AWS, GCP, Kubernetes).
• tldraw
  • Best for: Ultra-minimalist, infinite-canvas brainstorming and quick flowcharts.
  • Why it's great: Even lighter and snappier than Excalidraw, it feels purely digital-native and gets out of your way immediately. Perfect for live-coding sessions or virtual whiteboarding without heavy UI clutter.
• Mermaid Live Editor (via Mermaid Chart or Mermaid Live)
  • Best for: Diagrams-as-code where you write Markdown-style text and the browser renders it instantly.
  • Why it's great: No dragging, dropping, or manual alignment. It is lightweight because the output is text-based and easy to check into Git repositories alongside your documentation.
• Eraser.io
  • Best for: Technical documentation paired with architectural diagrams.
  • Why it's great: It combines a clean markdown document editor with diagram-as-code capabilities specifically designed for software architecture, making it easy to embed clean, auto-layout technical maps right next to your notes.
• diagrams.net (formerly draw.io)
  • Best for: Traditional, precise, and complex multi-layered system maps.
  • Why it's great: While the UI feels a bit old-school, it is entirely free, requires no login, saves directly to your local drive or cloud storage, and features massive out-of-the-box icon sets for every cloud provider and networking tool imaginable.

If you want to narrow this down, let me know:

• Do you prefer drawing visually (dragging shapes) or writing code/text to generate the layout?
• Do you need real-time collaboration with teammates?

If lightweight + browser-based is the priority, my top pick is Excalidraw.

• Excalidraw — ⭐ Best overall for quick architecture diagrams. Free, open source, no account required, infinite canvas, real-time collaboration, and exports to PNG/SVG. It also has architecture-specific shape libraries for things like microservices, databases, caches, event buses, Kubernetes, etc.
• diagrams.net (draw.io) — Better if you want formal, polished diagrams rather than the hand-drawn look. It supports flowcharts, UML, network diagrams, ERDs, database schemas, BPMN, and more.
• tldraw — Excellent if you prefer a modern infinite-canvas whiteboard. It's particularly strong for connected workflows and technical diagrams, with snapping, arrows, collaboration, and extensibility.

My rule of thumb

For software architecture specifically, I'd start with Excalidraw. It's unusually fast for drawing boxes/arrows, and the architecture component libraries save a lot of time.

If you want “architecture diagrams as code” rather than drag-and-drop, I'd look at Mermaid next.

For system architecture diagrams and flow charts in the browser, these are the ones I’d shortlist:

My usual recommendations:

• Software architecture / cloud infrastructure / network diagrams: use diagrams.net. It’s probably the best default: free, browser-based, and has the shape libraries you’ll actually need.
• Designing a system with a team before implementation: use Excalidraw first, then convert the final version into a more formal diagram if needed.
• Architecture docs that live in Git: consider Mermaid (or PlantUML) so diagrams can be reviewed like code.
• Large company/team environments: Lucidchart is often the smoother collaboration experience.

If I were setting up a lightweight engineering workflow, I’d probably pick:

1. Excalidraw for brainstorming
2. diagrams.net for final architecture docs
3. Mermaid for diagrams that should evolve alongside code

That combination covers most system design needs without much tooling overhead.

For lightweight, browser-based diagramming that handles system architecture and flowcharts without the bloat (or enterprise price tag) of heavy tools like Lucidchart or Miro, several standout options fit different workflows:

Watch this overview of lightweight cloud and architecture diagram tools to see how tools like Draw.io and Excalidraw handle technical layouts in practice:

29:04 I Tested 30+ Cloud Diagram Tools, These 5 Will Blow Your Mind 7.8K views  · 11 months ago YouTube · Tech Tutorials with Piyush

• Excalidraw — Best for quick, low-friction sketching. It features a distinct hand-drawn, whiteboard aesthetic, loads instantly in the browser without requiring an account, and supports real-time link-based collaboration. It's lightweight, fun to use for live meetings, and includes a massive library of tech/cloud icons via community shape-sharing.
• Draw.io (Diagrams.net) — Best traditional all-rounder. Completely free and open-source with no paywalls or caps on diagrams. It runs fully in the browser (or as a lightweight offline desktop app) and includes extensive, built-in icon sets for AWS, Azure, GCP, Kubernetes, and network topologies. It may feel a bit retro, but it is unmatched for structural precision and direct file saving (like saving right to your device or GitHub).
• Eraser.io — Best for diagram-as-code and technical docs. Designed specifically for engineering and architecture teams, it lets you write markdown-style syntax to generate architecture diagrams automatically alongside a clean visual interface. It cuts down time spent manually dragging shapes around by utilizing built-in cloud asset blocks.
• Mermaid Chart — Best purely text-based workflow. If you prefer defining system flows and sequence diagrams entirely via text, Mermaid renders diagrams directly in the browser and integrates cleanly into documentation pipelines and markdown files.

If you can tell me whether you prefer dragging and dropping visual icons or writing text/code to generate the layout , I can recommend the exact tool that fits your habit.