# As a condition of accessing this website, you agree to abide by the following # content signals: # (a) If a Content-Signal = yes, you may collect content for the corresponding # use. # (b) If a Content-Signal = no, you may not collect content for the # corresponding use. # (c) If the website operator does not include a Content-Signal for a # corresponding use, the website operator neither grants nor restricts # permission via Content-Signal with respect to the corresponding use. # The content signals and their meanings are: # search: building a search index and providing search results (e.g., returning # hyperlinks and short excerpts from your website's contents). Search does not # include providing AI-generated search summaries. # ai-input: inputting content into one or more AI models (e.g., retrieval # augmented generation, grounding, or other real-time taking of content for # generative AI search answers). # ai-train: training or fine-tuning AI models. # ANY RESTRICTIONS EXPRESSED VIA CONTENT SIGNALS ARE EXPRESS RESERVATIONS OF # RIGHTS UNDER ARTICLE 4 OF THE EUROPEAN UNION DIRECTIVE 2019/790 ON COPYRIGHT # AND RELATED RIGHTS IN THE DIGITAL SINGLE MARKET. # BEGIN Cloudflare Managed content User-agent: * Content-Signal: search=yes,ai-train=no Allow: / User-agent: Amazonbot Disallow: / User-agent: Applebot-Extended Disallow: / User-agent: Bytespider Disallow: / User-agent: CCBot Disallow: / User-agent: ClaudeBot Disallow: / User-agent: CloudflareBrowserRenderingCrawler Disallow: / User-agent: Google-Extended Disallow: / User-agent: GPTBot Disallow: / User-agent: meta-externalagent Disallow: / # END Cloudflare Managed Content tldiagram - System Architecture Diagrams
Features Automation How it works Pricing Docs Open Source Terms Privacy
Get Started

Hide the noise. See the right detail.

Build, nest, and explore complex systems through a high-performance interactive graph interface. Turn your diagrams into living documentation that evolves with your codebase.

Keep scrolling
Design

Modern & easy to use UI.

Slick interface that feels familiar from the first click. High-performance, low-friction, and customizable.

Click to Interact
Open-source

Quickstart

tld
curl -LsSf https://tldiagram.com/install.sh | sh -s serve --open

No dependencies. View Documentation →

Or just let your agent take the wheel

your favorite agent
>

Follow the instructions in the link below and create a diagram of this codebase. https://raw.githubusercontent.com/Mertcikla/tld/refs/heads/main/skills/create-diagram/SKILL.md

Includes a CLI optimized for agent usage and a MCP server.

Features

Diagramming tool that scales with your architecture.

A canvas built for busy engineers.

Keep it simple, without compromise

Drag, drop, connect, and rearrange nodes with zero friction. Zoom from the full system down to individual components in milliseconds.

PERSON Client Browser SERVICE Load Balancer nginx SYSTEM Auth Service JWT / OAuth2 CONTAINER Order Service Node.js CONTAINER Product Service Go DATABASE PostgreSQL Primary DB QUEUE Redis Cache Sessions API GATEWAY API Gateway Kong / REST API GATEWAY · Kong · REST · gRPC SERVICE Rate Limiter Redis-backed SERVICE JWT Verify OAuth2 · JWKS API Router upstream dispatch SERVICE Circuit Breaker Resilience4j

Hierarchical Nesting

Systems within systems. Drill into any node to reveal its inner architecture. Model microservice clusters, bounded contexts, and deployment zones with unlimited depth.

FreeDraw Mode

Sketch freely. Annotate instantly. Collaborate live.

Switch to FreeDraw mode and draw directly on your diagrams - brainstorm, jot quick notes, circle pain points. Perfect for presentations, workshops, and remote calls.

Built for ease of use

Label connections with protocols, data flows, or descriptions. Edges auto-route around nodes and snap cleanly to ports.

Built for Dark Mode

Neumorphic clay design system. High-contrast, eye-friendly interface crafted for long engineering sessions.

Git Source Linking

Connect nodes directly to your repositories. A highlighted yet unobtrusive way to take quick peeks into the code running behind your architecture.

Context on demand

Zoom in to get exactly the technical detail you need, exactly when you need it. Get both big-picture clarity and deep precision in one tool.

⌘+ Zoom in
⌘− Zoom out
⌘0 Fit to view
Download on the App Store Get it on Google Play
VS Code Extension VS Code
AI + CLI

Generate diagrams
with agent Skills.

Use our plugins and CLI tool to scan your codebase and generate high-fidelity diagrams in minutes.

Auto-generated from real codebases.

Kubernetes View Diagram →
PyTorch View Diagram →
Apache Kafka View Diagram →
eShop Reference Application View Diagram →
Workflow

From blank canvas to
living architecture

Three steps to a diagram your whole team can understand.

🏗️

Create a diagram

Name your system and open the canvas. Diagrams are organized as workspaces you can share, clone, or evolve over time as your architecture grows.

🔗

Add & connect nodes

Drop in services, databases, people, and queues. Connect them with directed edges and label each relationship with the protocol or data flow it represents.

🔍

Drill in & explore

Click into any node to expand its internal architecture. Zoom, pan, and navigate the minimap. Share the diagram URL with your team for live review.

Ready to map your system?

Start diagramming in
under 60 seconds

No credit card required. No installs. Just open the canvas and start building.

Get started - it's free View pricing
Download on the App Store Get it on Google Play
VS Code Extension VS Code