Documd Visuals

OrganizationPopular

markdown-viewer

documd-visuals

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.

Overview

Publisher	markdown-viewer
Repository	`skills`
Skill name	`documd-visuals`
Stars	3.4K
Forks	191
Bundled files	353
License	CC-BY-4.0
Links	Skill source Repository

Markdown instructions
A SKILL.md file the model loads on demand, so it only costs tokens when a request actually matches.
Works with any LLM
AI skills are plain Markdown, not provider-specific code, so this works with GPT, Claude, Gemini, Grok, or a local model.
353 bundled files
Scripts, templates, and references the model can read while it works. Files are read-only and never executed.
Open source
Published by markdown-viewer on GitHub. Read the source before you install it.

Installation

Install the Documd Visuals AI skill in TypingMind to use it with any LLM, or drop it into another agent that reads SKILL.md.

Install in TypingMind

TypingMind installs a skill straight from its GitHub folder — it reads SKILL.md, bundles the resource files, and stores the result locally.

Open the app and go to Plugins → Skills.
Choose "Install from GitHub".
Paste the skill folder URL below and confirm.
https://github.com/markdown-viewer/skills/tree/main/documd-visuals
Enable the skill in any chat where you want it available.

Plugins → Skills → Add skill → From GitHub URL, then paste the folder URL and press Continue.

Install in another agent

Any agent that reads the Agent Skills format can use this skill — copy the folder into that agent's skills directory.

Claude Code — .claude/skills

git clone --depth 1 https://github.com/markdown-viewer/skills.git /tmp/skills
mkdir -p .claude/skills
cp -r /tmp/skills/documd-visuals .claude/skills/documd-visuals

Restart Claude Code after copying so it picks up the new skill.

Use it in TypingMind

Enable Documd Visuals in any TypingMind chat and the model takes it from there. Its name and description sit in the system prompt, and the moment a request matches, the model loads the full instructions itself — you never invoke it by hand, and it costs no tokens until it is actually used.

The model loads Documd Visuals on its own as soon as a request matches it.

Works with any AI model

AI skills are plain Markdown instructions rather than provider-specific code, so Documd Visuals is not tied to the model it was written for. Install it once in TypingMind and use it with GPT-5, Claude, Gemini, Grok, DeepSeek, Mistral, Llama, or a local model you run yourself — all on your own API keys.

Loaded only when it is needed
The system prompt carries just the name and description. The instructions are fetched on the first matching request, so an idle skill costs nothing.
Switch models mid-chat
Because the skill is instructions rather than code, changing model does not break it — the next model reads the same SKILL.md.

Skill instructions

This is the SKILL.md content the model loads. Read it before installing — a skill is instructions your model will follow.

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.md for a system, executive-brief-summary.md for a card.
Inline the data. vega / vega-lite / echarts must carry their own values / series data; 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

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.

Bundled files

The model reads these on demand while the skill is loaded. They are exposed as readable files and are never executed.

and 140 more files.

Frequently asked questions

What does the Documd Visuals AI skill do?

Why use Documd Visuals on TypingMind?

Because you install it once and use it with any model. Documd Visuals is plain Markdown rather than provider-specific code, so the same skill runs on GPT-5, Claude, Gemini, Grok, or a local model — and you can switch model mid-chat without it breaking. TypingMind runs on your own API keys, so you pay providers directly instead of a per-seat subscription, and your skills and chats stay in your own storage.

How do I install Documd Visuals in TypingMind?

Open Plugins → Skills → Install from GitHub in TypingMind and paste https://github.com/markdown-viewer/skills/tree/main/documd-visuals. TypingMind reads its SKILL.md and bundles its files and installs it as a skill you can enable per chat.

Which AI models can use Documd Visuals?

Any model you connect in TypingMind. AI skills are plain Markdown instructions rather than provider-specific code, so GPT, Claude, Gemini, Grok, and local models can all load this skill when a request matches it.

How many AI models can I use with Documd Visuals?

As many as you like. As long as a model supports skills, you can use Documd Visuals with it — GPT, Claude, Gemini, Grok, DeepSeek, Mistral, Llama and more — all on TypingMind with your own API keys.

Is the Documd Visuals AI skill free?

Yes. It is published on GitHub by markdown-viewer under the CC-BY-4.0 license. You only pay your own AI provider for the tokens you use.

What are AI skills?

An AI skill is a reusable instruction bundle that teaches an AI model how to do one specific task. It follows the open Agent Skills format: a SKILL.md file with a name and description, plus any scripts, templates or reference files the model may need. The model reads the instructions only when your request matches the skill, so an installed skill costs nothing until it is used.

How are AI skills different from plugins or MCP servers?

A plugin or MCP server gives a model new tools to call — code that runs somewhere and returns a result. An AI skill gives the model knowledge and process instead: how to approach a task, which steps to follow, what good output looks like. Skills are plain Markdown, so they need no server, no API key and no runtime, and they work with any model.

View all

Pinecone

NousResearch

OrganizationPopular

Managed vector DB for production RAG and search.

Qdrant

Vector search engine for production RAG systems.

Tensorrt Llm

High-throughput LLM inference on NVIDIA GPUs.

Internal Comms

A set of resources to help me write all kinds of internal communications, using the formats that my company likes to use. Claude should use this skill whenever asked to write some sort of internal…

Overview

Installation

Install in TypingMind

Install in another agent

Use it in TypingMind

Works with any AI model

Skill instructions

documd visuals

Iron rules

Route by goal

A — data & metrics

B — process & systems

C — infrastructure & governance

D — knowledge & expression

Engine cheat sheet

Capability boundaries

Reading a document

Exporting & verifying — optional

When a block does not render

Where everything lives

Bundled files

Frequently asked questions

Related AI Skills

Set up your own AI workspace now