Draw.io Diagram Studio
Agents365-ai/drawio-skill
Creates and edits editable draw.io diagrams from descriptions, code, infrastructure files, SQL and API schemas, with sync, review, test and export tools.
Create text-driven visuals in Markdown: charts, diagrams, cards, architecture and page layouts.
Install Documd Visuals
$ npx skills add markdown-viewer/skills --skill documd-visuals -a claude-codeProject install by default; add -g for ~/.claude/skills/.
$ gh skill install markdown-viewer/skills documd-visuals --agent claude-codeProject scope by default; add --scope user for a personal install. Needs GitHub CLI 2.90.0 or later (public preview).
$ git clone --depth 1 https://github.com/markdown-viewer/skills.git skills-src && mkdir -p .claude/skills && cp -r skills-src/documd-visuals .claude/skills/documd-visuals && rm -rf skills-srcUse ~/.claude/skills/ instead of .claude/skills for a personal install. The folder must contain SKILL.md.
Claude Code skills documentation · loads skills from .claude/skills/
Install the "documd-visuals" agent skill from https://github.com/markdown-viewer/skills/tree/main/documd-visuals into .claude/skills/documd-visuals/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "documd-visuals", then confirm the skill loads.Claude Code copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$skill-installer install https://github.com/markdown-viewer/skills/tree/main/documd-visualsType this inside Codex. $skill-installer <name> installs a curated skill from openai/skills. The installer writes to $CODEX_HOME/skills (default ~/.codex/skills). Restart Codex if the skill does not show up.
$ npx skills add markdown-viewer/skills --skill documd-visuals -a codexProject install goes to .agents/skills/; add -g for ~/.codex/skills/.
$ gh skill install markdown-viewer/skills documd-visuals --agent codexProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/markdown-viewer/skills.git skills-src && mkdir -p .agents/skills && cp -r skills-src/documd-visuals .agents/skills/documd-visuals && rm -rf skills-srcUse ~/.agents/skills/ instead of .agents/skills for a personal install.
Codex skills documentation · loads skills from .agents/skills/
Install the "documd-visuals" agent skill from https://github.com/markdown-viewer/skills/tree/main/documd-visuals into .agents/skills/documd-visuals/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "documd-visuals", then confirm the skill loads.Codex copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ npx skills add markdown-viewer/skills --skill documd-visuals -a cursorProject install goes to .agents/skills/; add -g for ~/.cursor/skills/.
$ gh skill install markdown-viewer/skills documd-visuals --agent cursorProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/markdown-viewer/skills.git skills-src && mkdir -p .cursor/skills && cp -r skills-src/documd-visuals .cursor/skills/documd-visuals && rm -rf skills-srcUse ~/.cursor/skills/ instead of .cursor/skills for a personal install.
Cursor skills documentation · loads skills from .cursor/skills/, .agents/skills/, .claude/skills/, .codex/skills/
Install the "documd-visuals" agent skill from https://github.com/markdown-viewer/skills/tree/main/documd-visuals into .cursor/skills/documd-visuals/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "documd-visuals", then confirm the skill loads.Cursor copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ gemini skills install https://github.com/markdown-viewer/skills.git --path documd-visuals--scope user (default) or --scope workspace; --path is the subfolder of the repo that holds the skill; --consent skips the security confirmation prompt.
$ npx skills add markdown-viewer/skills --skill documd-visuals -a gemini-cliProject install goes to .agents/skills/; add -g for ~/.gemini/skills/.
$ gh skill install markdown-viewer/skills documd-visuals --agent gemini-cliProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/markdown-viewer/skills.git skills-src && mkdir -p .gemini/skills && cp -r skills-src/documd-visuals .gemini/skills/documd-visuals && rm -rf skills-srcUse ~/.gemini/skills/ instead of .gemini/skills for a personal install, then run /skills reload.
Gemini CLI skills documentation · loads skills from .gemini/skills/, .agents/skills/
Install the "documd-visuals" agent skill from https://github.com/markdown-viewer/skills/tree/main/documd-visuals into .gemini/skills/documd-visuals/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "documd-visuals", then confirm the skill loads.Gemini CLI copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ gh skill install markdown-viewer/skills documd-visualsInstalls for Copilot at project scope by default; add --scope user for a personal install. Preview a skill first with gh skill preview. Needs GitHub CLI 2.90.0 or later (public preview).
$ npx skills add markdown-viewer/skills --skill documd-visuals -a github-copilotProject install goes to .agents/skills/; add -g for ~/.copilot/skills/.
$ git clone --depth 1 https://github.com/markdown-viewer/skills.git skills-src && mkdir -p .github/skills && cp -r skills-src/documd-visuals .github/skills/documd-visuals && rm -rf skills-srcUse ~/.copilot/skills/ instead of .github/skills for a personal install. Commit .github/skills so cloud agent and code review can use it.
GitHub Copilot skills documentation · loads skills from .github/skills/, .claude/skills/, .agents/skills/
Install the "documd-visuals" agent skill from https://github.com/markdown-viewer/skills/tree/main/documd-visuals into .github/skills/documd-visuals/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "documd-visuals", then confirm the skill loads.GitHub Copilot copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ npx skills add markdown-viewer/skills --skill documd-visuals -a opencodeOpenCode documents no install command of its own. Project install goes to .agents/skills/; add -g for ~/.config/opencode/skills/.
$ gh skill install markdown-viewer/skills documd-visuals --agent opencodeProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/markdown-viewer/skills.git skills-src && mkdir -p .opencode/skills && cp -r skills-src/documd-visuals .opencode/skills/documd-visuals && rm -rf skills-srcUse ~/.config/opencode/skills/ instead of .opencode/skills for a personal install.
OpenCode skills documentation · loads skills from .opencode/skills/, .claude/skills/, .agents/skills/
Install the "documd-visuals" agent skill from https://github.com/markdown-viewer/skills/tree/main/documd-visuals into .opencode/skills/documd-visuals/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "documd-visuals", then confirm the skill loads.OpenCode copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
Facts
- Skill name
documd-visuals- GitHub stars
- 3.4k
- Token cost
- ~3.3k tokens
- SKILL.md length
- 1,167 words
- Files
- 396
- Skills in repo
- 1
- Repo updated
- First seen
- Licence
- CC-BY-4.0
At a glance
Create text-driven visuals in Markdown: charts, diagrams, cards, architecture and page layouts.
- Works in 7 steps: Allowed fences — plantuml / puml · vega… → Nothing outside that list. A fence the… → One diagram per fence. Do not put two… → …
- A document needs a diagram
- SKILL.md covers Iron rules, Route by goal, Engine cheat sheet and Capability boundaries, plus 4 more sections
- Calls npx
What it does
Documd Visuals is an agent skill from markdown-viewer/skills. 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…
Its SKILL.md is about 3.3k tokens, which your agent loads only when the skill is triggered. The skill folder holds 399 other files (for example `LICENSE.md`, `catalog/scenarios.json` and `catalog/scenarios.md`). Compatibility notes: Figures are text in the Markdown — fenced blocks or bare HTML — and the host viewer renders them live: nothing to pre-render, build or install. Export to html…
It sits in Data & Analytics, covering Diagrams. It works with draw.io, Kubernetes and Mermaid. The repository describes itself as: Opinionated skills for AI coding agents to create stunning diagrams and visualizations directly in Markdown. These skills extend agent capabilities across diagram generation… The licence is CC-BY-4.0.
When your agent uses it
- A document needs a diagram
- Tasks that involve Diagrams
Example prompts
- “/documd-visuals”
Requirements
- Node.js
- Compatibility (from SKILL.md): Figures are text in the Markdown — fenced blocks or bare HTML — and the host viewer renders them live: nothing to pre-render, build or install. Export to html / epub / docx / pdf is optional and needs Node 18+ and Chrome/Chromium, via `npx @markdown-viewer/documd`.
Workflow steps
7 steps, taken from the first numbered list in SKILL.md.
- Allowed fences — plantuml / puml · vega · vega-lite · echarts · infographic,
- Nothing outside that list. A fence the list does not name is a bug, not a lesser option —
- 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
- Inline the data. vega / vega-lite / echarts must carry their own values / series data;
- State the reading in the copy. Every figure answers one question — put it in the prose or the
- Pick a theme, then colour from it. Colours come from one of the themes indexed in
What it can do on your machine
Read from SKILL.md and the folder at commit 2672b69. It shows what the files ask for, not the result of running them.
Tool permissions
Pre-approves nothing: there is no allowed-tools line, so your agent's usual permission prompts apply.
From allowed-tools in the SKILL.md frontmatter.
Runs code
Shell commands in SKILL.md call:
npx
From the folder's file list and the shell code blocks in SKILL.md.
Network
Links to these hosts (documentation or services it may open):
docu.md
From URLs in SKILL.md, links to its own repository left out.
Credentials
Names no API keys, tokens, secrets or passwords.
From names ending in _API_KEY, _TOKEN, _SECRET, _KEY or _PASSWORD in SKILL.md.
Compatibility
Figures are text in the Markdown — fenced blocks or bare HTML — and the host viewer renders them live: nothing to pre-render, build or install. Export to html / epub / docx / pdf is optional and needs Node 18+ and Chrome/Chromium, via `npx @markdown-viewer/documd`.
From compatibility in the SKILL.md frontmatter.
Context cost
Documd Visuals loads about 3.3k tokens when it runs. Until then it costs about 258 tokens; SKILL.md has 1,167 words of instructions outside code blocks.
Estimates: characters ÷ 4, the usual rule of thumb; real counts depend on the model's tokenizer. Scripts and assets cost tokens only if the agent reads them.
Safety
Auto-check passed
The automated check found no risky patterns in SKILL.md.
Automated static check — not a guarantee. Review scripts before installing. It scans the text of SKILL.md for risky patterns (piping downloads into a shell, reading credential files, hidden Unicode, destructive commands); files beside SKILL.md are not scanned.
SKILL.md
The full file from markdown-viewer/skills at commit 2672b69, republished under its CC-BY-4.0 licence (© markdown-viewer). 1,167 words, ~3,342 tokens.
Download SKILL.mdSave it as
.claude/skills/documd-visuals/SKILL.md (or your agent's skills folder). This skill also uses 395 other files; get the full folder from GitHub.- name
- documd-visuals
- 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.
- compatibility
- Figures are text in the Markdown — fenced blocks or bare HTML — and the host viewer renders them live: nothing to pre-render, build or install. Export to html / epub / docx / pdf is optional and needs Node 18+ and Chrome/Chromium, via `npx @markdown-viewer/documd`.
- license
- CC-BY-4.0
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.
A — data & metrics
| Goal | Trigger keywords | Engines | Read |
|---|---|---|---|
| service-reliability | latency · p95/p99 · SLO · SLA · error budget · burn rate · availability · uptime · reliability | echarts vega infographic | goals/service-reliability.md |
| ops-monitoring | incident load · alert volume · outliers · anomalies · service scorecard · support volume | echarts vega infographic | goals/ops-monitoring.md |
| delivery-throughput | throughput · cycle time · lead time · velocity · capacity · staffing · backlog · WIP · rank movement | echarts vega infographic | goals/delivery-throughput.md |
| goal-and-status-reporting | OKR · KPI · target vs actual · goal attainment · status board · dashboard · scorecard | echarts vega infographic html-css | goals/goal-and-status-reporting.md |
| product-metrics | conversion · funnel · adoption · retention · churn · activation · signup · cohorts · experiment | echarts infographic | goals/product-metrics.md |
| business-reporting | quarterly results · revenue · ARR · revenue mix · margin · periodic results · forecast | infographic vega echarts | goals/business-reporting.md |
| go-to-market | pipeline · channel · partner · partner tiers · market entry · sales funnel · SWOT · campaigns | echarts infographic | goals/go-to-market.md |
| cost-and-budget | cost · spend · budget · cloud bill · savings · cost reduction · capex · unit economics | echarts infographic vega | goals/cost-and-budget.md |
| data-exploration | correlation · distribution · regression · outlier detection · missing data · small multiples · density | vega echarts | goals/data-exploration.md |
B — process & systems
| Goal | Trigger keywords | Engines | Read |
|---|---|---|---|
| engineering-operations | standup · sprint ritual · team rhythm · on-call · coverage · shift handover · deploy cadence · checklist | infographic vega echarts | goals/engineering-operations.md |
| incident-management | incident · postmortem · escalation · triage · runbook · change request · launch readiness · review | infographic echarts html-css | goals/incident-management.md |
| process-and-workflow | approval · workflow · swimlane · SOP · process map · BPMN · gate · procurement | plantuml infographic | goals/process-and-workflow.md |
| software-design | class · domain model · component · package · layering · use case · object · C4 container · SysML | plantuml | goals/software-design.md |
| software-behaviour | state machine · lifecycle · sequence · interaction · messaging · event flow · EIP · deployment | plantuml | goals/software-behaviour.md |
| dependencies-and-relations | dependency · call graph · impact analysis · coupling · ownership · causality · fishbone | plantuml vega echarts infographic | goals/dependencies-and-relations.md |
| system-architecture | system architecture · layer stack · zones · pipeline stages · service catalog · request path · connectors | html-css | goals/system-architecture.md |
C — infrastructure & governance
| Goal | Trigger keywords | Engines | Read |
|---|---|---|---|
| cloud-architecture | AWS · Azure · Kubernetes · container · serverless · IoT · edge · VPC · observability | plantuml infographic | goals/cloud-architecture.md |
| data-platform | ETL · lakehouse · warehouse · CDC · streaming · ingestion · catalog · ML pipeline · ER model | plantuml | goals/data-platform.md |
| network-topology | network · topology · DMZ · wireless · firewall · switch · packet · route · traffic | plantuml echarts | goals/network-topology.md |
| security-and-compliance | zero trust · IAM · encryption · threat model · trust boundary · controls · evidence · audit · compliance · risk | plantuml infographic html-css | goals/security-and-compliance.md |
| enterprise-architecture | ArchiMate · capability map · value stream · stakeholder map · business architecture | plantuml infographic | goals/enterprise-architecture.md |
| organization-and-roles | org chart · reporting line · workforce · capability coverage · capability maturity · handoffs · responsibilities | infographic vega echarts html-css | goals/organization-and-roles.md |
| people-and-hiring | hiring · headcount plan · interview loop · onboarding · career ladder · certifications · progression | infographic | goals/people-and-hiring.md |
Show full SKILL.md (521 more words)Show less
D — knowledge & expression
| Goal | Trigger keywords | Engines | Read |
|---|---|---|---|
| knowledge-and-outline | mind map · outline · knowledge map · concept map · topics · word cloud | plantuml infographic vega echarts | goals/knowledge-and-outline.md |
| planning-and-roadmap | roadmap · milestone · timeline · Gantt · quarterly plan · release schedule · strategy focus | infographic vega plantuml html-css | goals/planning-and-roadmap.md |
| migration-and-rollout | migration · cutover · rollout waves · phased delivery · programme · work breakdown | plantuml infographic | goals/migration-and-rollout.md |
| comparison-and-selection | compare · versus · build or buy · decision record · quadrant · vendor selection · trade-off · priority | infographic html-css | goals/comparison-and-selection.md |
| internal-documents | memo · brief · charter · abstract · policy · quote · principles | html-css infographic | goals/internal-documents.md |
| catalogues-and-inventories | catalogue · inventory · entitlements · offerings · standard tools · support tiers | infographic | goals/catalogues-and-inventories.md |
| customer-and-partner-comms | customer story · case study · sales brief · bulletin · announcement · partner brief · education module | html-css | goals/customer-and-partner-comms.md |
| theme-and-tone | print · photocopy · handout · low vision · large print · colour-blind · slide · projected · long-form | infographic echarts plantuml | goals/theme-and-tone.md |
Engine cheat sheet
| Engine | Reach for it when | Look elsewhere when |
|---|---|---|
plantuml | UML/ArchiMate/BPMN semantics, brand and device icons (9,514 stencils), or a relationship graph that should lay itself out | It is a chart |
vega / vega-lite | The data needs work first — join, window, fold, regression, density, facets, small multiples | One polished chart with heavy styling (echarts) |
echarts | Report-grade chart or KPI dashboard: axes, series, thresholds, annotations, gauges | The data must be transformed first |
infographic | A designed-looking board: roadmap, timeline, checklist, comparison, quadrant, knowledge map | Axes, several series or statistical shapes (echarts) |
| HTML/CSS | Cards, memos, overviews, page-level layouts | Another engine already renders that diagram |
Details, limits and pitfalls: plantuml ·
echarts · vega · infographic ·
html-css.
Capability boundaries
These are not possible; pick the fallback instead of retrying.
| Want | Fallback |
|---|---|
3D / globe / WebGL charts (no echarts-gl) | 2D echarts; scatter/graph for shape |
| Geographic maps (no bundled map data, no GeoJSON offline) | schematic rectangle layout, or an HTML/CSS region diagram |
dataset.transform in ECharts (throws RangeError in 6.1.0) | sort and derive upstream, then dataset.source |
Functions in an echarts option (parsed as JSON) | template strings ("{c}%"), per-item label objects |
External data or images (data.url, remote URLs) | inline values, data URLs |
| PlantUML WBS / Salt / Timing / ditaa / JSON / YAML / EBNF / nwdiag / SDL / math (parse, draw nothing useful) | @startmindmap, a boxed rectangle tree, HTML/CSS mockups, or a code fence |
| Interactive charts (tooltip, zoom, brush) | annotate directly: labels, thresholds, callouts |
Icons in vega / echarts | plantuml stencils |
Free-form positioning in infographic | HTML/CSS for pixel control |
Reading a document
To read a document in the browser or in VS Code, install docu.md Markdown Viewer: https://docu.md.
Exporting & verifying — optional
Authoring never needs this. The documd CLI converts a document or a diagram source to a file,
extracts figures as images, and verifies that blocks render — for when the output is a file. Nothing to
install: npx @markdown-viewer/documd in.md out.docx. Flags, formats and the npm-scope warning:
converting.md.
When a block does not render
- Fence in the allowed list? Exactly one block per figure?
- Is it a listed anti-pattern in that engine's reference (see Engine cheat sheet) — or strict
syntax (JSON for
echarts/vega, no empty lines in bare HTML)? - Then switch to the alternative engine the goal guide names; most scenarios have two.
- Or verify by rendering:
npx @markdown-viewer/documd file.md --assets /tmp/figs.
Where everything lives
catalog/scenarios.md indexes every scenario with its domain, engines, tier and
example path — start there; then goals/<domain>.md, engines/<engine>.md, examples/<domain>/<file>.md.
© markdown-viewer, CC-BY-4.0. Rendered from Markdown: HTML in the file is shown as text, images as links, and headings moved down two levels. Raw file
Files
SKILL.md and 395 other files in documd-visuals of markdown-viewer/skills.
- SKILL.md
- LICENSE.md
- catalog/scenarios.json
- catalog/scenarios.md
- catalog/scenarios.tsv
- converting.md
- engines/coverage/echarts.md
- engines/coverage/html-css.md
- engines/coverage/infographic.md
- engines/coverage/plantuml.md
- engines/coverage/vega.md
- engines/echarts.md
- engines/html-css.md
- engines/infographic-templates.tsv
- engines/infographic.md
- engines/plantuml-stencils/README.md
- engines/plantuml-stencils/alibaba_cloud.md
- … and 379 more
Open the folder on GitHubat commit 2672b69
Compare with similar skills
Documd Visuals next to the 5 skills that share the most tags, products or categories with it. Stars are the repository's; “used in” counts other GitHub owners with a copy.
| Skill | Stars | Used in | Tokens | Auto-check | Licence | Repo updated |
|---|---|---|---|---|---|---|
| Documd Visuals this skillmarkdown-viewer/skills | 3.4k | — | ~3.3k | Automated safety check: Pass | CC-BY-4.0 | |
| Draw.io Diagram StudioAgents365-ai/drawio-skill | 10k | — | ~2.4k | Automated safety check: Notes | MIT | |
| Drawio Skillyuanchen-home/cumcm-step-review | 319 | — | ~11k | Automated safety check: Pass | MIT | |
| Diagram Designcathrynlavery/diagram-design | 44k | 1 repos | ~7.5k | Automated safety check: Pass | MIT | |
| Diagram Designkdlbs/kandev | 903 | 1 repos | ~8k | Automated safety check: Pass | MIT | |
| AI Daily DigestvigorX777/ai-daily-digest | 1.6k | — | ~1.3k | Automated safety check: Pass | None |
Similar skills
Drawio Skill
yuanchen-home/cumcm-step-review
A skill your agent uses when the user requests diagrams, flowcharts, architecture diagrams, ER diagrams, UML / sequence / class diagrams, SysML / MBSE diagrams (block definition, internal block…
Diagram Design
cathrynlavery/diagram-design
Creates branded diagrams, from architecture, flowchart and sequence to charts and maps, as self-contained HTML with inline SVG, with import from draw.io, Mermaid and Excalidraw.
Diagram Design
kdlbs/kandev
Create branded architecture, IT current-state, flowchart, sequence, state machine, ER/data model, timeline, swimlane, quadrant, radar/spider, polar chart (polar/radial lollipop), loop/flywheel…
AI Daily Digest
vigorX777/ai-daily-digest
Fetches RSS feeds from 90 top Hacker News blogs (curated by Karpathy), uses AI to score and filter articles, and generates a daily digest in Markdown with Chinese-translated titles, category…
Drawio
bahayonghang/drawio-skills
Create, edit, replicate, import, and export draw.io diagrams with an offline YAML-first workflow: architecture, network topologies, flowcharts, UML/ER, org charts, Mermaid/CSV conversion, existing…
Related
Works with
Questions about Documd Visuals
What does Documd Visuals do?
Create text-driven visuals in Markdown: charts, diagrams, cards, architecture and page layouts. Documd Visuals is an agent skill from markdown-viewer/skills. Create text-driven visuals in Markdown: charts, diagrams, cards, architecture and page layouts.
When should I use Documd Visuals?
Documd Visuals fits situations like: A document needs a diagram; tasks that involve Diagrams.
How do I install Documd Visuals in Claude Code?
Run `npx skills add markdown-viewer/skills --skill documd-visuals -a claude-code`. Or copy the skill folder (documd-visuals in markdown-viewer/skills) into .claude/skills/documd-visuals in your project. Claude Code loads it when a task matches its description.
How do I install Documd Visuals in Codex?
Run `npx skills add markdown-viewer/skills --skill documd-visuals -a codex`. Or copy the skill folder (documd-visuals in markdown-viewer/skills) into .agents/skills/documd-visuals in your project. Codex loads it when a task matches its description.
Can I use Documd Visuals in Cursor, Gemini CLI or GitHub Copilot?
Cursor, Gemini CLI, GitHub Copilot and OpenCode also load SKILL.md folders. With the skills CLI, run `npx skills add markdown-viewer/skills --skill documd-visuals -a cursor` (or -a gemini-cli, github-copilot or opencode for the others). To copy it by hand, put the folder in .cursor/skills/documd-visuals, .gemini/skills/documd-visuals, .github/skills/documd-visuals and .opencode/skills/documd-visuals in your project.
What does Documd Visuals need to run?
Going by SKILL.md and its folder, Documd Visuals needs the command-line tools its instructions call (npx). Our summary lists: Node.js. Compatibility (from SKILL.md): Figures are text in the Markdown — fenced blocks or bare HTML — and the host viewer renders them live: nothing to pre-render, build or install. Export to html / epub / docx / pdf is optional and needs Node 18+ and Chrome/Chromium, via `npx @markdown-viewer/documd`. .
Does Documd Visuals access the network?
SKILL.md names 1 domain. As links in the text: docu.md. This is read from the text; nothing was executed.
Is Documd Visuals safe to install?
Our automated static check of SKILL.md found no risky patterns, such as piping downloads into a shell, reading credential files or hidden Unicode. It is not a guarantee. Review the folder before installing.
What licence does Documd Visuals use?
Documd Visuals is published under the CC-BY-4.0 licence (declared in SKILL.md). It allows redistribution, so the full SKILL.md is shown on this page.
How many tokens does Documd Visuals use?
About 3.3k tokens (SKILL.md is roughly 13k characters). Agents keep only the skill's name and description in context until a task matches; then they load SKILL.md in full.
What are the alternatives to Documd Visuals?
Skills that share tags, products or a category with Documd Visuals: Draw.io Diagram Studio (Agents365-ai/drawio-skill, 10k stars), Drawio Skill (yuanchen-home/cumcm-step-review, 319 stars), Diagram Design (cathrynlavery/diagram-design, 44k stars) and Diagram Design (kdlbs/kandev, 903 stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.
Who maintains Documd Visuals?
markdown-viewer (a GitHub organization) maintains it in markdown-viewer/skills, which has 3,357 GitHub stars. The repository was last updated on October 5, 2026.
Source: markdown-viewer/skills on GitHub. Facts on this page come from the repository at the commit we read; the author's words are quoted as theirs.