EditorialDiagram4px Grid
Align node coordinates, widths, heights, and corner radii to multiples of four. A shared grid makes tiers line up, gives labels predictable clearance, and lets small manual adjustments remain consistent.
✨ Built on the open-source diagram-design specification — Instant Web Playground, Zero CLI Setup
Editorial Diagram Design Playground & AI Beautifier
Use the online Diagram Design playground as a Mermaid Beautifier: paste code, import a .drawio file, or describe your system. Create publication-grade Editorial SVG with clear hierarchy, precise connectors, and typography made for presentations—all in your browser.
Explore the example for free
Example previewDrag nodes. Arrow keys move 4px. Space + drag pans.
Checking geometry…
Take it with you
Free PNG includes an EditorialDiagram watermark.
Thin lines. Considered type. No shadows.
Why Use an Online Diagram Design Playground Instead of Native Mermaid?
Native Mermaid captures relationships; editorial Diagram Design also shapes how people read them. Use this Mermaid Beautifier to address four visual gaps: routing, hierarchy, color, and typography. Compare the same ten components in a crowded source-style drawing and an Editorial SVG layout below.
- Routing
- Diagonal shortcuts and unmarked crossings make unrelated paths look connected.
- Hierarchy
- Equal-size boxes give the gateway, business services, and databases the same visual weight.
- Color & depth
- Unrelated pastel fills and drop shadows compete with the architecture itself.
- Typography & export
- Default-looking labels leave little distinction between names, roles, and relationship annotations.
- Routing
- Orthogonal routes with r=8 elbows separate request traffic, storage access, and event delivery.
- Hierarchy
- Service and data tiers, shorter storage nodes, and role labels establish a deliberate reading order.
- Color & depth
- Five semantic color tokens, fine borders, and a restrained coral focal treatment keep attention on the system.
- Typography & export
- Instrument Serif, Geist, and Geist Mono assign distinct roles. SVG keeps text and geometry editable; vector export is a paid feature.
The source-style drawing deliberately illustrates avoidable layout choices. Mermaid and Draw.io can both be styled well; this comparison explains the editorial decisions rather than a limitation of either editor.
Audience-Aware Diagram Design: Engineer (1:1) vs. Executive Mode
Audience-aware Diagram Design adapts one system for different readers. Engineer mode preserves components 1:1, Mixed mode groups related implementation details, and Executive mode reduces the system to its core capabilities. The example below shows the progression from 24 nodes to 12, then 7 for an executive presentation.
Engineer (1:1 · 24 Nodes)
Keep all 24 components separate: APIs, databases, caches, adapters, and workers. This is the view for reviewing ownership and implementation dependencies before making an architecture decision.
Mixed (12 Nodes)
Combine each service with its dedicated store or closely related worker. Twelve named responsibilities retain Access, Catalog, Checkout, Payments, Delivery, and Insights without making every audience read infrastructure details.
Executive (7 Nodes)
Reduce the twelve responsibilities to seven capabilities: Access, Catalog, Cart, Orders, Payments, Delivery, and Insights. Keep Cart and Orders distinct within Checkout so the executive presentation retains that decision point. Use the detailed view when a specific storage or recovery path matters.
Illustrative audience reduction: 24 → 12 → 7 nodes. Every grouped node records its original members. The connectors summarize capability handoffs, not every runtime call; the interactive sample above is a separate ten-node system.
The 6 Editorial Diagram Design Principles & Geometry Laws
These Diagram Design tips turn the editorial specification into repeatable rules for spacing, routes, emphasis, color, and type. The playground checks geometry and supports 4px drag adjustments when a layout needs a final correction.
Orthogonal r=8 Elbows
Route off-axis architecture and flow connectors through horizontal and vertical segments with 8px rounded turns. Keep arrows away from labels. Charts such as Sankey and polar plots retain the curves their data encoding requires.
Single Accent Focal Rule
Choose a primary decision, integration point, or bottleneck as the visual focus. Reserve coral for that story and keep supporting components quiet. Labels and shapes must still communicate meaning when color is removed.
--paper--ink--muted--soft--accent
5 Semantic Color Tokens
Use --paper for the canvas, --ink for primary text, --muted for annotations, --soft for quiet boundaries, and --accent for emphasis. Change the palette without changing what each visual role means.
Instrument Serif + Geist Typography
Set editorial headings in Instrument Serif, component names in Geist, and technical annotations in Geist Mono. Distinct text roles separate the diagram’s story from implementation details without adding decoration.
WCAG AA Brand Extraction
Enter a public brand URL to extract the five-color palette. The extractor checks ink against paper at a minimum 4.5:1 contrast ratio and corrects that pair when needed. Review the full diagram separately for accessibility.
41 Diagram Design Types & Layout Grammars
Choose the grammar that matches your question: software relationships, product decisions, or quantitative data. Each entry links to its own public guide. Ten types include dedicated interactive examples; the others explain the layout and how to prepare your source for the workbench.
Software Engineering
- System architectureShow service boundaries, storage ownership, and request routing.
- Architecture deltaExplain exactly what changes between two architecture versions.
- IT current stateCompare current, transitional, and target IT capabilities.
- FlowchartMake conditional steps, decisions, and retry loops readable.
- Sequence diagramTrace ordered messages between named participants.
- State machineDescribe legal states, transition events, and recovery paths.
- Entity relationshipExplain domain entities and relationship cardinalities.
- UML class diagramReview class responsibilities, inheritance, and composition.
- Database schemaInspect physical tables, keys, column types, and foreign keys.
- DeploymentLocate software artifacts inside real runtime environments.
- Dependency graphFind upstream prerequisites and downstream change impact.
- Data flowFollow data movement through transformations and stores.
- Platform integrationMap ingestion, transformation, and serving in a data platform.
- Security matrixCompare data-platform roles against resources and permissions.
Product & Planning
- TimelineExplain milestones along a shared chronological axis.
- SwimlaneShow who owns each step and where handoffs occur.
- QuadrantPosition options against two independent decision dimensions.
- Loop / flywheelExplain reinforcing feedback, balancing feedback, or recurring work.
- TreeExplain a hierarchy with explicit parent-child relationships.
- Organization chartMake reporting lines and team responsibilities visible.
- Layer stackSeparate responsibilities into ordered architectural layers.
- High-level overviewSummarize a system as a small set of business capabilities.
- ProcessPresent ordered stages with clear inputs and outcomes.
- KanbanOrganize work by status while preserving ownership and limits.
- User journeyConnect a customer’s stages, actions, and friction points.
- Service blueprintConnect customer actions to frontstage and backstage delivery.
- Story mapArrange user activities, tasks, and release slices in context.
- Wardley mapMap a value chain against visibility and evolution.
- FishboneExplore possible causes of a clearly stated outcome.
Data Visualization
- RadarCompare profiles across several consistently scaled dimensions.
- Polar chartDisplay values or events with a genuinely cyclical dimension.
- Venn diagramExplain set membership and meaningful intersections.
- Pyramid / funnelExplain ordered levels, foundations, or progressive narrowing.
- Bar chartCompare category magnitudes on a common quantitative scale.
- WaterfallExplain how signed changes reconcile a starting and ending total.
- TreemapCompare parts of a whole within a hierarchy.
- HeatmapFind patterns across two ordered dimensions using a stated color scale.
- Line chartShow change over an ordered interval without inventing continuity.
- Gantt chartPlan dated work, durations, and parallel tracks on one time axis.
- Scatter plotInspect the relationship between two measured variables.
- Sankey diagramTrack conserved quantities through sources, stages, and destinations.
Diagram Design & SVG Beautifier FAQ
What is Editorial Diagram Design?
- Editorial Diagram Design applies a consistent visual specification to a diagram: a 4px grid, orthogonal connectors with r=8 elbows, one accent focal point, five semantic color tokens, and clear typography roles. A Mermaid theme changes an existing rendering’s appearance; this playground rebuilds the source topology as an editorial SVG layout for your audience. Review generated diagrams against the source before presenting them.
Can I run the Claude Code diagram-design skill online in my browser?
- You can use the open-source diagram-design skill’s editorial specification and 41 layout grammars in this online Diagram Design playground, with no local Claude Code installation or CLI setup. Paste Mermaid or describe your system, choose an audience, and generate an editorial SVG layout. Cached examples are free to explore; new AI generations require an account, credits, and an available model provider.
Can the Mermaid Beautifier import .drawio files and simplify diagrams for executives?
- Yes. The Mermaid Beautifier accepts Mermaid code and plain text; paid plans also support .drawio and Excalidraw file imports and full Executive generation. Engineer mode preserves detailed components and connections, Mixed mode summarizes related components into up to 12 nodes, and Executive mode reduces them to no more than seven core capabilities with a simplification note. This page illustrates 24 → 12 → 7 nodes. Use Engineer mode to review details hidden by the summaries.
What can I try free, and can I export an editable SVG?
- You can explore cached examples, change their audience views, and try local color presets without signing in or spending AI credits. New AI generations require an account, credits, and a configured model. The free plan supports Mermaid or text input and standard PNG export. Paid plans unlock file imports, full Executive generation, editable SVG, Figma clipboard, HTML, and higher-resolution PNG exports. Check the plan shown in the workbench before exporting.