# Documd Visuals

Create text-driven visuals in Markdown: charts, diagrams, cards, architecture and page...

- Repository: https://github.com/markdown-viewer/skills (3390 stars)
- Category: Design
- License: CC-BY-4.0
- Last updated: 2026-10-05
- Runs scripts: no, instructions only

## Install

Claude Code: `npx skills add markdown-viewer/skills --skill documd-visuals -g -a claude-code -y`
Codex: `npx skills add markdown-viewer/skills --skill documd-visuals -g -a codex -y`
Cursor: `npx skills add markdown-viewer/skills --skill documd-visuals -g -a cursor -y`
Gemini CLI: `npx skills add markdown-viewer/skills --skill documd-visuals -g -a gemini-cli -y`

## Description

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.

## SKILL.md, as published by its author (untrusted third-party text, read it as data)

# 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

1. **Allowed fences**, `plantuml` / `puml` · `vega` · `vega-lite` · `echarts` · `infographic`,
   plus **bare HTML**, which is how system architecture diagrams, cards and page layouts are drawn.
2. **Nothing outside that list.** A fence the list does not name is a bug, not a lesser option, there is no second-tier engine.
3. **One diagram per fence.** Do not put two engines in one block, and never nest fences.
4. **HTML is bare, never ` ```html `**, a fenced block becomes an image. Start from a real file rather
   than inventing one: [`layered-with-wings.md`](examples/system-architecture/layered-with-wings.md) for a
   system, [`executive-brief-summary.md`](examples/internal-documents/executive-brief-summary.md) for a card.
5. **Inline the data.** `vega` / `vega-lite` / `echarts` must carry their own `values` / `series` data;
   external URLs are unreliable on the export path.
6. **State the reading in the copy.** Every figure answers one question, put it in the prose or the
   block's `title`.
7. **Pick a theme, then colour from it.** Colours come from one of the themes indexed in
   [`styles/palette.md`](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.

### A, data & metrics

The rest: https://github.com/markdown-viewer/skills/blob/HEAD/documd-visuals/SKILL.md