17 Domain-Native Engines & 8 Publication Themes

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

Architecture & Systems

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

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

Parent/child hierarchies with shared horizontal sibling buses.

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

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

Structure & Security Boundaries

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

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

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

Pipelines, Roadmaps & Radial

Horizontal hairline baseline with alternating milestone placement.

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

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

Circular closed-loop compounding engine with tangential flow paths.

Radial focal-node layout with deterministic orbit decoration.

Curated Publication Themes

Clean light documentation canvas with high-contrast series palette.

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

Monospace CLI aesthetic with vibrant phosphorescent glow accents.

Organic hand-drawn whiteboard style with SVG displacement turbulence.

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

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

Technical CAD drafting grid with cyan wireframe geometry.

Deep developer canvas with layered glassmorphism elevations.

Never Start From Scratch

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

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

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:
    speed true
    speeds "0.25"
    fullscreen true
    gif true
    theme true
  interaction:
    zoom true
    pan true
    click_to_play true
    double_click_to_reset true
    keyboard false
  chrome:
    badge true
    progress none
    color "#3b82f6"

Why Engineers & Teams Choose Markdy

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

Diagram-Native DSL & Motion

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

Universal Ingestion

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

AI-Native & MCP Server

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

Architecture Governance

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

Full System Support & Integration Matrix

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

Ingestion & Transpilation Inputs

Export Targets & Developer Frameworks

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

1. Hosted Agent Reference

   Share markdy.com/AGENT.md or llms.txt with your coding assistant.

2. Prompt with Natural Language

   "Draw a cache-aside architecture diagram with Redis and Postgres on user checkout."

3. Autonomous Self-Healing Loop

   The MCP server automatically parses the AST and fixes invalid cues or node typos.

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

Docs-as-Code in Any Framework

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();

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

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

<Markdy code={sceneCode} autoplay />

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

# 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

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.