Tool directory

All Diagram Tools

Browse every DiagramPreview tool by format, workflow, and diagram type.

Available tools

Mermaid Preview

Preview Mermaid diagrams online with a live editor, syntax checks, examples, and SVG/PNG export.

AI Diagram Generator

Generate Mermaid diagrams from a natural language prompt with AI.

Text to Mermaid

Convert product notes, incidents, and architecture text into Mermaid diagrams.

Mermaid AI Fixer

Fix broken Mermaid syntax and improve diagram readability with AI.

Architecture Diagram Generator

Generate Mermaid architecture diagrams from product or system notes with AI.

PlantUML Preview

Preview PlantUML diagrams from text using a replaceable server renderer.

AI PlantUML Generator

Generate PlantUML diagrams from natural language with DeepSeek.

AI Draw.io Generator

Generate editable diagrams.net / draw.io XML from architecture, CI/CD, and data flow prompts.

Markdown Preview

Preview Markdown with Mermaid code block rendering.

Grafana Dashboard Generator

Generate Grafana dashboard JSON for Prometheus, Loki, Node Exporter, API, and Kubernetes monitoring.

SVG Code Preview Editor

Paste SVG markup or a data URI, preview it safely, and export cleaned SVG.

Prometheus Alert Rule Generator

Generate Prometheus alert rules YAML for APIs, infrastructure, Kubernetes, databases, and queues.

Observability Pack Generator

Generate Grafana dashboard YAML, Prometheus rules, Mermaid architecture, and a runbook checklist with AI.

Open Graph Preview Debugger

Preview og:title, og:description, og:image, Twitter cards, and social share snippets.

Postman Collection to Sequence Diagram

Postman Collection to Sequence Diagram: Convert Postman collection JSON into a readable API request sequence diagram.

robots.txt Tester

Test robots.txt Allow and Disallow rules for a target URL.

HAR File to Sequence Diagram

HAR File to Sequence Diagram: Turn browser Network HAR exports into request sequence diagrams for debugging and documentation.

HAR File Viewer

Preview HAR request timelines, status codes, slowest calls, and host breakdowns.

Sitemap XML Viewer

Preview sitemap XML URLs, sitemap indexes, duplicates, lastmod, and hreflang alternates.

Sequence Diagram Preview

Preview sequence diagrams from Mermaid sequenceDiagram syntax.

API Error Flow Diagram

Turn API status codes, failure conditions, retry rules, and recovery actions into a clear error flow diagram.

OpenAPI to Sequence Diagram

Convert OpenAPI paths into a Mermaid sequence diagram locally.

PlantUML to Draw.io

Convert PlantUML sequence, component, class, and activity diagrams into editable draw.io / diagrams.net XML.

SQL to ER Diagram

Convert CREATE TABLE SQL into a Mermaid ER diagram.

package.json Dependency Diagram

Visualize package.json dependencies, devDependencies, peerDependencies, and optionalDependencies.

Docker Compose Diagram

Convert Docker Compose services and dependencies into a readable architecture diagram.

CloudFormation Template Diagram

CloudFormation Template Diagram: Visualize AWS CloudFormation resources and references from template YAML or JSON.

Graphviz DOT Preview

Render DOT graphs into SVG directly in the browser.

Mermaid to Draw.io

Convert Mermaid diagrams to editable draw.io / diagrams.net XML from Markdown, README, or AI-generated source.

D2 Preview

Preview D2 architecture diagrams and service maps in a focused workspace.

Kubernetes Manifest Visualizer

Inspect Kubernetes manifests as resource trees for deployments, services, ingress, labels, and namespaces.

Webpage to Markdown

Convert a webpage URL or pasted HTML into clean Markdown for docs, notes, AI prompts, and migration work.

Terraform Architecture Diagram

Visualize Terraform resource blocks and references as a software architecture diagram.

Kubernetes Service Topology Diagram

Visualize Ingress, Service, Deployment, and Pod relationships from Kubernetes YAML.

HTML Preview Sandbox

Preview HTML components, email snippets, and landing sections in a script-blocked sandbox.

Regex Railroad Diagram

Turn regular expressions into simple railroad-style diagrams for documentation and code review.

CSS Gradient Preview

Preview CSS linear, radial, conic, and repeating gradients with extracted color stops.

GitHub Actions Workflow Diagram

Turn GitHub Actions YAML jobs, needs, and steps into a readable workflow diagram.

JSON Diff Viewer

Compare two JSON payloads and inspect added, removed, and changed paths.

CI/CD Pipeline Generator

Generate a pipeline diagram from GitHub Actions, GitLab CI, or simple step lists.

Base64 Image Preview

Preview Base64 image strings and data URLs with MIME type and size analysis.

Mind Map Preview

Turn Markdown headings or indented text into a mind map workspace.

JSON Schema Visualizer

Inspect JSON Schema properties, types, required fields, and composition groups.

JSON Schema Form Preview

Turn JSON Schema properties, required fields, enums, and formats into a form preview.

Cron Expression Visualizer

Visualize cron fields, schedule intent, and documentation notes.

CSS Box Shadow Preview

Preview CSS box-shadow values on realistic cards and compare shadow layers.

jq Filter Tester

Run common jq-style filters against JSON and preview the filtered result.

C4 Model Diagram Generator

C4 Model Diagram Generator: Generate C4-style system context, container, and component diagrams from simple text.

Color Palette Preview

Preview hex, rgb, hsl, and CSS variable palettes with adjacent contrast checks.

XML to Diagram

Inspect XML documents as a readable tree for feeds, SVG snippets, configs, and integration payloads.

JSONPath Tester

Run common JSONPath expressions against API responses and inspect matched values.

XPath Tester

Test XPath expressions against XML or HTML and inspect matched nodes.

JWT Decoder Diagram

Decode JWT header, payload, signature, and claims into a readable diagram.

cURL Command Parser

Parse cURL commands into method, URL, headers, query parameters, and request body preview.

JSON to Diagram

Visualize JSON as a readable object and array tree.

YAML Path Tester

Preview YAML path lookups for Kubernetes, Helm, GitHub Actions, and config files.

URL Query Parser

Decode URL query strings, inspect UTM parameters, and review API query payloads.

CSV to Diagram

Preview CSV files as row and column trees for lightweight data inspection.

TOML Visualizer

Inspect TOML sections, keys, and values from pyproject, Cargo, and app config files.

YAML to Diagram

Visualize YAML documents as readable tree diagrams.

Dockerfile Visualizer

Visualize Dockerfile build stages and instructions as a step-by-step diagram.

.env Diff Checker

Compare .env with .env.example and find missing, empty, or duplicate variables.

Draw.io Viewer

Open draw.io and diagrams.net XML files online before sharing or converting them.

Helm Values Visualizer

Inspect Helm values.yaml as an expandable structure for chart review and documentation.

HTTP Header Parser

Parse HTTP response headers and review cache, CORS, content type, and security hints.

Nginx Config Visualizer

Visualize nginx server, location, proxy_pass, and upstream relationships.

Nginx Location Tester

Test Nginx location precedence for exact, prefix, ^~, and regex routing blocks.

OpenTelemetry Trace to Sequence

Convert OpenTelemetry spans JSON into a Mermaid sequence diagram for request flow review.

TypeScript Interface Visualizer

TypeScript Interface Visualizer: Visualize TypeScript interfaces, type aliases, fields, and references for API and SDK docs.

Log to Sequence Diagram

Turn simple service call logs into a Mermaid sequence diagram.

Zod Schema Visualizer

Zod Schema Visualizer: Visualize Zod object schemas, validators, and validation documentation structure.

GraphQL Schema Visualizer

Visualize GraphQL types, inputs, interfaces, fields, and relationships.

Protobuf Schema Visualizer

Visualize protobuf messages, fields, and message references as a class diagram.

AsyncAPI Event Flow Diagram

Convert AsyncAPI channels into producer, channel, and consumer event flow diagrams.

DBML to ER Diagram

Convert DBML table definitions and refs into a Mermaid ER diagram.

Prisma Schema Diagram

Convert Prisma model blocks into an ER-style schema diagram.

Draw.io to SVG Preview

Preview uncompressed diagrams.net / draw.io XML as SVG and export the rendered result.

Priority workflows

Planned tools

OpenAPI DiagramSQL ER DiagramRegex Railroad DiagramText to Diagram