Layout & Presentation

17 Domain-Native Engines & 8 Publication Themes

From microservices and security perimeters to medallion pipelines and sprint roadmaps.

🏗️

Architecture & Systems

type=architecture

Ranked DAG topology with smart obstacle-avoiding edge routing (default).

type=flowchart

Top-down decision branches, conditional routing, and pipeline steps.

type=tree

Parent/child hierarchies with shared horizontal sibling buses.

type=state

Cycle-safe state machine transitions, loops, and self-referencing arcs.

type=sequence

Participant columns, lifelines, ordered messages, and activation spans.

🛡️

Structure & Security Boundaries

type=layers

Full-width horizontal stacked abstraction bands (OSI, CSS cascade, memory).

type=nested

Concentric rounded boundaries with stepped insets for defense-in-depth.

type=swimlane

Cross-functional team lanes and multi-actor handoff tracks.

🔄

Pipelines, Roadmaps & Radial

type=timeline

Horizontal hairline baseline with alternating milestone placement.

type=gantt

Phase-based horizontal bar stacking with phase and span properties.

type=medallion

Multi-tier Bronze → Silver → Gold lakehouse data stages.

type=flywheel

Circular closed-loop compounding engine with tangential flow paths.

type=constellation

Radial focal-node layout with deterministic orbit decoration.

🎨

Curated Publication Themes

theme=paper

Clean light documentation canvas with high-contrast series palette.

theme=editorial

Serif typography, refined ink lines, and muted semantic accents.

theme=terminal

Monospace CLI aesthetic with vibrant phosphorescent glow accents.

theme=sketchy

Organic hand-drawn whiteboard style with SVG displacement turbulence.

theme=ink

Monochromatic blue tones inspired by ballpoint pens, fountain pens, cyanotype & porcelain prints.

theme=doodle

Playful hand-drawn doodle sketchbook with felt-tip markers and comic block shadows.

theme=blueprint

Technical CAD drafting grid with cyan wireframe geometry.

theme=midnight

Deep developer canvas with layered glassmorphism elevations.

Universal Ingestion

Never Start From Scratch

Convert existing static architecture definitions into animated MarkdyScript scenes in 1 command or 1 click.

$markdy import flow.mmd --out flow.markdy

ORIGINAL STATIC INPUTflowchart.mmd

Static 2D Diagram / Manifest

flowchart LR
  Client[Client Browser] --> Gateway[API Gateway]
  Gateway --> Auth[Auth Service]
  Auth --> DB[(PostgreSQL)]
  Auth -.-> Cache[(Redis Session)]

ANIMATED MARKDYSCRIPToutput.markdy

Native WAAPI Browser Motion

scene theme=paper type=flowchart
layout TB

service Client "Client Browser"
gateway Gateway "API Gateway"
service Auth "Auth Microservice"
cache Cache "Redis Session"
database DB "PostgreSQL"

beat flow:
  show $nodes stagger=60ms
  Client -> Gateway "POST /login"
  Gateway -> Auth "Validate"
  Auth -> DB "Query Credentials"
  Auth -> Cache "Set Session"
  Gateway <- Auth "JWT Token"

player:
  playback:
    loop true
  controls:
    theme true
  interaction:
    zoom true
    pan true
    click_to_play true
    double_click_to_reset true
    keyboard false
  chrome:
    badge true
    progress boundary
    color "#3b82f6"

Core Value

Why Engineers & Teams Choose Markdy

A diagramming layer built for modern software architecture, autonomous coding agents, and CI/CD reviews.

🧭Core Engine

Diagram-Native DSL & Motion

Declare semantic nodes, groups, flows, and timed beats in reviewable text. Layout, collision avoidance, and choreography are 100% automatic.

Learn more ↗

🔄Compat

Universal Ingestion

1-click transpilation from Mermaid flowcharts, Draw.io XML, Docker Compose, Kubernetes YAML, and Terraform state into animated scenes.

Learn more ↗

🤖MCP Server

AI-Native & MCP Server

Official Model Context Protocol server for Claude, Cursor, and Antigravity with self-healing syntax diagnostics and prompt templates.

Learn more ↗

🛡️CI/CD Linter

Architecture Governance

Automated CI/CD linter catches deadlock cycles, cross-layer bypasses, ungrounded services, and outputs semantic PR diffs.

Learn more ↗

Capability Matrix

Full System Support & Integration Matrix

Transparent overview of supported ingestion formats, export targets, analysis features, and framework integrations.

🔄

Ingestion & Transpilation Inputs

Source Format	Status	Supported Features	Documentation & Demo
Mermaid Flowcharts (`.mmd`, ```mermaid)	Stable	Nodes, subgraphs, direction (LR/TB), flow labels, shapes	Migration Guide ↗
Docker Compose (`docker-compose.yml`)	Stable	Services, container ports, volume storage, networks	Import in Studio ↗
Kubernetes Manifests (`k8s.yaml`)	Stable	Deployments, Pods, Services, Ingress, PersistentVolumes	K8s Guide ↗
Terraform State / HCL (`.tf`, `.tfstate`)	Stable	AWS / GCP / Azure resources, VPCs, subnets, DAG dependencies	Import in Studio ↗
Draw.io XML (`.drawio`, `.xml`)	Beta	mxGraph vertex geometry, labels, grouped containers	Try Draw.io Import ↗

🚀

Export Targets & Developer Frameworks

Target / Platform	Status	Package / Tool	Capabilities
Browser Web Animations (WAAPI)	Stable	`@markdy/renderer-dom`	Hardware-accelerated 60fps motion, camera framing, pulse cues
Standalone HTML Bundle	Stable	`markdy render <file>`	Zero-dependency offline HTML file with embedded dark/light themes
Vector SVG & PNG Raster	Stable	Studio / CLI	Crisp infinite-resolution SVG vectors with embedded styles
Astro Integration	Stable	`@markdy/astro`	SSR-friendly `<Markdy />` component with client hydration
MDX / Next.js / Docusaurus	Stable	`@markdy/mdx`	`<MarkdyDiagram />` component with indentation collapse resiliency
AI MCP Server & Diagnostics	Stable	`@markdy/mcp-server`	Native tools for Cursor, Claude, Antigravity with self-healing repairs
CI/CD Governance & Multi-File Check	Stable	`markdy check` / `markdy lint`	Deadlock cycle prevention, cross-layer linter, `--dist` HTML validator

AI-Native Architecture

Official Model Context Protocol (MCP) Server

Point Claude Desktop, Cursor, or Antigravity to Markdy for instant AST validation and self-healing diagrams.

How AI pairs with Markdy

Hosted Agent Reference
Share markdy.com/AGENT.md or llms.txt with your coding assistant.
Prompt with Natural Language
"Draw a cache-aside architecture diagram with Redis and Postgres on user checkout."
Autonomous Self-Healing Loop
The MCP server automatically parses the AST and fixes invalid cues or node typos.

Claude Desktop / Cursor MCP Config

{
  "mcpServers": {
    "markdy": {
      "command": "npx",
      "args": ["-y", "@markdy/mcp-server"]
    }
  }
}

Quickstart & Integrations

Docs-as-Code in Any Framework

Vanilla JS / Any Bundler

import { createDiagram } from "@markdy/renderer-dom";

const diagram = createDiagram({
  container: document.getElementById("scene"),
  code: `
    scene theme=paper
    client WebApp -> service Api -> database Postgres
  `,
});

diagram.play();

Astro Island Component

---
import { Markdy } from "@markdy/astro";

const sceneCode = `
  scene theme=paper
  client WebApp -> service Api -> database Postgres
`;
---

<Markdy code={sceneCode} autoplay />

MDX Markdown Embedded Block

// In your MDX documentation file:
```markdy
scene theme=paper
client Browser -> gateway API -> cache Redis
```

CLI Installation & Rendering

# Install CLI globally
npm install -g @markdy/cli

# Render scene to interactive HTML
markdy render system.markdy --open

# Batch validate all diagrams in CI/CD
markdy check-all ./docs/diagrams

FAQ

Frequently Asked Questions

What is Markdy?

Markdy is an open-source, diagram-native DSL for animated architecture and system diagrams. You write semantic nodes, groups, flows, and beats in plain text; Markdy compiles browser-native motion graphics with zero coordinate math and zero manual keyframing.

How is Markdy different from Mermaid, PlantUML, or D2?

Mermaid, D2, and PlantUML produce static 2D images. Markdy is designed for system motion: request-response paths, cache invalidations, event streaming, camera framing, and step-by-step lifecycles rendered via the browser-native Web Animations API.

Does Markdy require Canvas or WebGL?

No. Markdy uses DOM elements, CSS transforms, and the Web Animations API. Scenes are crisp at any DPI, lightweight, accessible, and run seamlessly inside Astro, MDX, React, or static docs sites.

Can AI coding agents generate Markdy diagrams?

Yes! Markdy's line-based grammar is designed for LLMs. Our official @markdy/mcp-server connects to Cursor, Claude Desktop, and Antigravity to validate, transpile, and self-heal diagrams in real time.

Animated architecture diagrams from plain text.

Generate Animated Architecture with AI Agents

17 Domain-Native Engines & 8 Publication Themes

Architecture & Systems

Structure & Security Boundaries

Pipelines, Roadmaps & Radial

Curated Publication Themes

Never Start From Scratch

Why Engineers & Teams Choose Markdy

Diagram-Native DSL & Motion

Universal Ingestion

AI-Native & MCP Server

Architecture Governance

Full System Support & Integration Matrix

Ingestion & Transpilation Inputs

Export Targets & Developer Frameworks

Official Model Context Protocol (MCP) Server

How AI pairs with Markdy

Docs-as-Code in Any Framework

Frequently Asked Questions