Markdown docs with draw.io & Mermaid diagrams, code and media
Markdown that renders everything
Headings
Section heading
Subsection
Smaller subsection
Paragraphs and inline emphasis
Lists
Code blocks
Alerts (GitHub-flavored)
Tabs
Tables
Images
Sizing
Video
Self-hosted MP4
YouTube
Vimeo
Loom
Audio
Mermaid diagrams
Drawn diagrams (draw.io)
Trusted embeds
Horizontal rule
Markdown that renders everything DSR Docs is Markdown-based documentation, so plain Markdown goes in. What comes out is syntax-highlighted code, live diagrams, tabbed examples, callouts, zoomable images, embedded video and audio — all styled to your brand, all on this one page. This isn't a feature list; it's the renderer running. Scroll through and see for yourself. Headings Standard Markdown headings — through . They build the in-page Table of Contents on the right rail. Anchor links are emitted for each. Paragraphs and inline emphasis Just write text. Bold , italic , strikethrough , , and external links all work via standard Markdown. Lists Unordered, ordered, and nested — all standard CommonMark. First bullet Second bullet Nested item Another nested item Third bullet 1. Ordered item 2. Another ordered item 3. And one more Code blocks Fenced code blocks with a language tag get syntax highlighting via Shiki. The header carries a language label and a copy-to-clipboard button. Source for the TypeScript block typescript type PageEntry = { slug string; title string; order number }; NOTE TIP INFO IMPORTANT SUCCESS WARNING CAUTION DANGER [!…] [!FOO] tabs Tables Standard GFM tables. Pipes, headers, and alignment. HTTP method Idempotent? Used for ----------- --------- --------------------------- GET yes Retrieving a resource POST no Creating, RPC-style actions PUT yes Replacing a resource PATCH no Partial update DELETE yes Removing a resource Images Standard Markdown image syntax. The renderer wraps it in a clickable zoom overlay — click to see full-size with pan + keyboard shortcuts ( , , , arrow keys, ). Sizing The image dialog in the rich editor (Insert → Image, or click an existing image and pick Edit ) has dedicated Width and Height fields. They get encoded into the Markdown title slot — so an image sized through the editor round-trips as plain CommonMark and stays editable from any text editor. Width only ( ) — caps the rendered width; height scales proportionally. Width × height ( ) — hard caps on both dimensions. Clearing both fields restores the natural size. The same slot serves regular captions when it isn't a pixel count — a caption uses , a sized image uses or . Video The component branches on URL same syntax for self-hosted MP4, YouTube, Vimeo, and Loom. No separate directive. Self-hosted MP4 YouTube Any or URL renders through the privacy-enhanced embed. Vimeo A standard URL becomes the embed. Loom Loom share links resolve to the endpoint automatically. Audio Audio has its own directive — — separate from because a podcast clip or narration is primary content, not a figure that happens to play sound. It renders as a native inside a hairline plate. audio{src="/demo/DSRDocs.wav" title="DSR Docs — sample voiceover"} Two attributes (required) — root-relative path or absolute URL. , , , , all work. (recommended) — caption shown above the player. An unlabeled audio plate gives readers no context. Mermaid diagrams Fenced code block with as the language. Rendered client-side. Source mermaid flowchart LR A[Step 1] -- B[Step 2] connect-src 'self' embed <iframe ---` on its own line emits a horizontal rule. Useful for breaking long pages into reading sections. That's one page. Everything above is plain Markdown plus a handful of natural extensions — write it once in text, and it renders like this, on your brand, everywhere. The same engine renders your API references natively alongside this prose see one engine, every API for how OpenAPI, GraphQL, and Doxygen sit next to Markdown, or document OpenAPI, GraphQL & C/C++ SDKs together for the multi-spec workflow. [!IMPORTANT] Want this on your own documentation? Write to docs@dsr-corporation.com. Ask about migration, licensing, or anything this page didn't cover.