Documd Visuals
Create text-driven visuals in Markdown: charts, diagrams, cards, architecture and page...
Install
npx skills add markdown-viewer/skills --skill documd-visuals -g -a claude-code -y- Repository
- markdown-viewer/skills3.4k
- Category
- Design
- Updated
- 1mo ago
- License
- CC-BY-4.0
- Context cost
- Mediumabout 2,994 tokens
- Runs scripts
- No, instructions only
What it does
Create text-driven visuals in Markdown: charts, diagrams, cards, architecture and page layouts. Charts and analytical views (bar, line, pie, heatmap, correlation, regression); reliability and operations (latency, incident, throughput, cycle time, OKR, standup, on-call); product and finance (funnel, retention, revenue, budget); process and workflow (approval, BPMN); software design and behaviour (class, state machine, sequence, C4); dependencies and impact (dependency graph, ER, causality); system architecture as HTML (layer stack, wings, zones, topology, service catalogue, request paths); infrastructure (cloud, Kubernetes, ETL, network, security, IAM, compliance); governance and people (ArchiMate, org chart, hiring); knowledge and planning (mind map, roadmap, Gantt, migration); documents (comparison, SWOT, memo, policy, catalogue, case study). Use when a document needs a diagram, chart or card. Figures render live. Not for slide decks or math notation. Not recommended: mermaid / canvas / drawio / dot.
documd visuals
Routing for every diagram, chart, card and layout this document pipeline can render.
Figures are text, in place. A fence (plantuml · vega · echarts · infographic) or bare HTML
written into the Markdown is the figure: the viewer draws it live, the block stays editable, and nothing
is pre-rendered, built or exported first. documd is optional, export and verification only.
Iron rules
- Allowed fences,
plantuml/puml·vega·vega-lite·echarts·infographic, plus bare HTML, which is how system architecture diagrams, cards and page layouts are drawn. - Nothing outside that list. A fence the list does not name is a bug, not a lesser option, there is no second-tier engine.
- One diagram per fence. Do not put two engines in one block, and never nest fences.
- HTML is bare, never
```html, a fenced block becomes an image. Start from a real file rather than inventing one:layered-with-wings.mdfor a system,executive-brief-summary.mdfor a card. - Inline the data.
vega/vega-lite/echartsmust carry their ownvalues/seriesdata; external URLs are unreliable on the export path. - State the reading in the copy. Every figure answers one question, put it in the prose or the
block's
title. - Pick a theme, then colour from it. Colours come from one of the themes indexed in
styles/palette.md; copy that theme's block for your engine and take every value from it, a hex picked by hand, or two themes in one figure, is a bug. Charts pass the categorical ramp in order; cards use one accent plus neutrals.
Route by goal
Find the reader's goal, open the goal guide, pick an example. Engines are suggestions; the guide and examples are authoritative.
