System diagrams come in many shapes. An engineering roadmap requires a temporal timeline or Gantt schedule; a layered network requires an OSI abstraction stack; concentric security scopes require defense-in-depth boundaries; a data platform requires a multi-tier Bronze → Silver → Gold medallion pipeline; an algorithm benchmark requires a multi-axis radar chart; and a product discovery workshop thrives on hand-drawn whiteboard aesthetics.
Markdy's compiler provides 17 specialized layout engines and 8 publication themeswhile maintaining a single, unified MarkdyScript grammar.
1. Temporal Layouts: Timeline & Gantt
For roadmaps, milestone releases, and engineering phase sequencing, Markdy provides first-class temporal layouts:
Horizontal Timeline (type=timeline)
Lays out milestones along a central hairline baseline, alternating node placements above and below to eliminate label collision.
scene theme=editorial type=timeline width=1200 height=600
service AlphaRelease "v0.1 Alpha Launch"
service BetaRelease "v0.5 Public Beta" focal=true
service GARelease "v1.0 General Availability"
service EnterpriseTier "v2.0 Enterprise Tier"
beat timeline_reveal "Platform Evolution":
show $nodes stagger=60ms
glow BetaRelease "First paying customers"Gantt Chart (type=gantt)
Stacks task rows vertically while positioning horizontal bar spans along the timeline based on phase= and span= properties.
scene theme=paper type=gantt width=1200 height=600
service CoreRefactor "Core Architecture Refactor" phase=0 span=3
service APIDesign "API Design & Review" phase=1 span=2 focal=true
service FrontendRevamp "Frontend Revamp" phase=2 span=3
service SecurityAudit "SOC2 Security Audit" phase=4 span=2
beat roadmap_reveal "Engineering Phases":
show $nodes stagger=40ms
glow APIDesign "Critical path"2. Conceptual & Metric Topologies: Venn & Radar
Venn Diagram (type=venn)
Places 2–3 intersecting circles with automatic proximity scaling and compounding opacity tints, highlighting the focal sweet spot.
scene theme=editorial type=venn width=1000 height=800
service Desirability "Customer Desirability"
service Feasibility "Technical Feasibility" focal=true
service Viability "Business Viability"
beat reveal "Finding the Sweet Spot":
show $nodes stagger=80ms
glow Feasibility "Core differentiator"Multi-Axis Radar (type=radar)
Renders polygon radar charts with equi-angular radial axes and a 5-color desaturated series palette (sage, dusty-blue, mustard, rust-brown, slate).
3. Domain-Specific Topologies: Medallion, Flywheel, & Pyramid
- Layers (
type=layers): Full-width horizontal stacked abstraction bands for protocol stacks (OSI 7-layer) and memory hierarchies. - Nested (
type=nested): Concentric rounded boundaries with stepped insets for defense-in-depth and zero-trust security perimeters. - Medallion (
type=medallion): Three-stage data lakehouse pipeline with Bronze raw ingestion, Silver cleansed tables, and Gold aggregate data products. - Flywheel (
type=flywheel/type=loop): Circular compounding loop with tangential flow paths for AI training cycles and data flywheels. - Quadrant (
type=quadrant): 2×2 strategic decision matrix for technology radar assessments and CAP theorem trade-offs. - Pyramid (
type=pyramid): Hierarchical value pyramid with step-proportional width scaling for telemetry and observability stacks. - Swimlane (
type=swimlane): Multi-tier cross-functional horizontal lane partitions for distributed saga transactions.
4. Publication Themes: Terminal & Sketchy
Markdy includes 8 built-in themes for every documentation context:
paper: Clean light documentation canvas with subtle hairline grid.editorial: Warm cream paper with serif headings, flat cards, and ink/accent contrast.terminal: Dark CLI/TUI canvas with dot grid, monospace typography, and neon red glow.sketchy: Hand-drawn whiteboard theme with organic displacement filters and offset shadows.nebula: Deep space canvas with constellation twinkling stars and orbit rings.midnight,blueprint, andgraphite: Developer dark canvases.
Ready to create your next diagram? Try the Markdy Playground or explore all patterns in the Documentation.