WASM · SVG · Rust

DocOps Extension Showcase & Playground

Interactive playground and feature reference for generating SVG charts, badges, and architecture decision records directly in the browser via WebAssembly.

DocOps DSL Source
Live SVG Preview ✓ Rendered

Feature Overview & Capabilities

DocOps provides a unified declarative syntax for embedding rich visual artifacts directly within technical documentation and markdown.

Architecture Decision Records

Structure architectural context, decisions, consequences, colored participant avatars, and markdown/hyperlink references with [docops,adr].

Bar & Column Charts

Support for simple, cylinder, grouped, and stacked bars with premium light/dark styling via [docops,bar].

Pie & Donut Charts

Proportional visualizers supporting solid pies, donut rings, percentage badges, and legends with [docops,pie].

Shields & Status Badges

Shields.io-style status badges with customizable labels, colors, column wraps, gaps, and icons via [docops,badge].

Combination Charts

Overlay volume bars and rate/percentage lines with dual Y-axes using [docops,combination].

Multi-Series Line Charts

Temporal trends and multi-metric comparisons with gradient fill areas via [docops,line].

Magic Quadrant

2D priority mapping for strategic decision-making with customizable axes and quadrant labels via [docops,quadrant].

Comparison Scorecards

Visual before-and-after release scorecards with status sections, checklist indicators, and dark mode support via [docops,scorecard].

✓ DSL copied to clipboard!