無料GitHub で公開
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.
インストール方法を見る含まれるファイル（200）
- SKILL.md13.3 KB
- catalog/scenarios.json92.0 KB
- catalog/scenarios.md23.2 KB
- catalog/scenarios.tsv16.6 KB
- converting.md9.8 KB
- engines/coverage/echarts.md12.1 KB
- engines/coverage/html-css.md8.4 KB
- engines/coverage/infographic.md18.1 KB
- engines/coverage/plantuml.md10.5 KB
- engines/coverage/vega.md12.0 KB
- engines/echarts.md5.5 KB
- engines/html-css.md10.1 KB
- engines/infographic-templates.tsv7.1 KB
- engines/infographic.md6.9 KB
- engines/plantuml-stencils/alibaba_cloud.md19.3 KB
- engines/plantuml-stencils/android.md3.7 KB
- engines/plantuml-stencils/archimate.md793 B
- engines/plantuml-stencils/archimate3.md2.3 KB
- engines/plantuml-stencils/arrows.md1.6 KB
- engines/plantuml-stencils/atlassian.md1.9 KB
- engines/plantuml-stencils/aws.md7.5 KB
- engines/plantuml-stencils/aws2.md17.0 KB
- engines/plantuml-stencils/aws3.md13.5 KB
- engines/plantuml-stencils/aws3d.md3.9 KB
- engines/plantuml-stencils/aws4.md57.2 KB
- engines/plantuml-stencils/azure.md4.5 KB
- engines/plantuml-stencils/basic.md1.3 KB
- engines/plantuml-stencils/bootstrap.md361 B
- engines/plantuml-stencils/bpmn.md8.9 KB
- engines/plantuml-stencils/cabinets.md2.7 KB
- engines/plantuml-stencils/cisco_safe.md33.2 KB
- engines/plantuml-stencils/cisco.md20.5 KB
- engines/plantuml-stencils/cisco19.md15.1 KB
- engines/plantuml-stencils/citrix.md4.8 KB
- engines/plantuml-stencils/citrix2.md6.7 KB
- engines/plantuml-stencils/dfd.md414 B
- engines/plantuml-stencils/eip.md2.1 KB
- engines/plantuml-stencils/electrical.md35.8 KB
- engines/plantuml-stencils/floorplan.md3.1 KB
- engines/plantuml-stencils/flowchart.md1.6 KB
- engines/plantuml-stencils/fluid_power.md11.6 KB
- engines/plantuml-stencils/gcp.md5.2 KB
- engines/plantuml-stencils/gcp2.md18.4 KB
- engines/plantuml-stencils/gmdl.md5.8 KB
- engines/plantuml-stencils/ibm_cloud.md6.5 KB
- engines/plantuml-stencils/ibm.md580 B
- engines/plantuml-stencils/infographic.md1.7 KB
- engines/plantuml-stencils/ios7.md8.5 KB
- engines/plantuml-stencils/kubernetes.md2.6 KB
- engines/plantuml-stencils/kubernetes2.md2.5 KB
- engines/plantuml-stencils/lean_mapping.md1.9 KB
- engines/plantuml-stencils/mockup.md5.2 KB
- engines/plantuml-stencils/mscae.md23.7 KB
- engines/plantuml-stencils/networks.md3.8 KB
- engines/plantuml-stencils/networks2.md7.6 KB
- engines/plantuml-stencils/office.md27.4 KB
- engines/plantuml-stencils/openstack.md1.3 KB
- engines/plantuml-stencils/pid.md23.5 KB
- engines/plantuml-stencils/pid2inst.md1.3 KB
- engines/plantuml-stencils/pid2misc.md679 B
- engines/plantuml-stencils/pid2valves.md1.8 KB
- engines/plantuml-stencils/rack.md32.9 KB
- engines/plantuml-stencils/rackGeneral.md697 B
- engines/plantuml-stencils/README.md3.3 KB
- engines/plantuml-stencils/salesforce.md3.8 KB
- engines/plantuml-stencils/sap.md366 B
- engines/plantuml-stencils/signs.md15.5 KB
- engines/plantuml-stencils/sitemap.md2.4 KB
- engines/plantuml-stencils/sysml.md1.3 KB
- engines/plantuml-stencils/uml25.md465 B
- engines/plantuml-stencils/veeam.md18.3 KB
- engines/plantuml-stencils/veeam2.md12.2 KB
- engines/plantuml-stencils/vvd.md4.4 KB
- engines/plantuml-stencils/webicons.md7.3 KB
- engines/plantuml-stencils/weblogos.md8.6 KB
- engines/plantuml.md10.4 KB
- engines/vega.md5.4 KB
- examples/business-reporting/candlestick-quarterly-price-range.md2.7 KB
- examples/business-reporting/channel-performance-comparison.md2.5 KB
- examples/business-reporting/comparison-bars.md3.2 KB
- examples/business-reporting/product-mix-donut-badges.md1.8 KB
- examples/business-reporting/quarterly-results-columns.md1.8 KB
- examples/business-reporting/quarterly-share-normalized-stack.md2.9 KB
- examples/business-reporting/regional-revenue-split.md1.8 KB
- examples/business-reporting/revenue-concentration-topk-others.md3.3 KB
- examples/business-reporting/revenue-staircase-plan.md2.0 KB
- examples/business-reporting/subscription-tiers-wheel.md1.8 KB
- examples/business-reporting/sustainability-goals-progress.md2.3 KB
- examples/catalogues-and-inventories/service-offerings-grid.md1.8 KB
- examples/catalogues-and-inventories/support-tier-entitlements.md2.6 KB
- examples/catalogues-and-inventories/tooling-standard-inventory.md2.5 KB
- examples/cloud-architecture/aws-serverless-architecture.md5.4 KB
- examples/cloud-architecture/cloud-migration-approaches.md2.1 KB
- examples/cloud-architecture/iot-platform.md5.9 KB
- examples/cloud-architecture/kubernetes-platform.md5.2 KB
- examples/cloud-architecture/operations-observability-aws.md5.8 KB
- examples/comparison-and-selection/backlog-priority-quadrant.md2.5 KB
- examples/comparison-and-selection/buy-vs-build-comparison.md2.3 KB
- examples/comparison-and-selection/decision-comparison-card.md3.4 KB
- examples/comparison-and-selection/monolith-vs-modular.md2.9 KB
- examples/comparison-and-selection/operating-model-option-map.md2.1 KB
- examples/comparison-and-selection/packaging-choice-cards.md2.1 KB
- examples/comparison-and-selection/release-plan-tradeoff-fold.md2.3 KB
- examples/comparison-and-selection/scenario-planning-quadrant.md2.2 KB
- examples/comparison-and-selection/test-automation-quadrant.md2.2 KB
- examples/comparison-and-selection/vendor-selection-scorecard.md2.3 KB
- examples/cost-and-budget/budget-allocation-donut.md1.9 KB
- examples/cost-and-budget/budget-drawdown-waterfall.md1.8 KB
- examples/cost-and-budget/capacity-cost-dual-axis.md2.6 KB
- examples/cost-and-budget/cloud-spend-nested-pie.md4.1 KB
- examples/cost-and-budget/cost-center-treemap.md5.2 KB
- examples/cost-and-budget/cost-reduction-waterfall.md2.0 KB
- examples/cost-and-budget/cost-structure-split.md1.8 KB
- examples/cost-and-budget/headcount-variance-diverging-bars.md3.6 KB
- examples/cost-and-budget/pie-budget-share.md2.4 KB
- examples/cost-and-budget/run-rate-waterfall.md4.0 KB
- examples/cost-and-budget/sunburst-lifecycle-share.md3.1 KB
- examples/cost-and-budget/treemap-portfolio-breakdown.md3.3 KB
- examples/customer-and-partner-comms/customer-story-card.md3.1 KB
- examples/customer-and-partner-comms/education-module-card.md2.8 KB
- examples/customer-and-partner-comms/news-bulletin-card.md3.1 KB
- examples/customer-and-partner-comms/partner-brief-card.md3.1 KB
- examples/customer-and-partner-comms/sales-brief-card.md3.0 KB
- examples/data-exploration/deviation-from-average.md2.6 KB
- examples/data-exploration/imputed-gap-trend.md3.0 KB
- examples/data-exploration/metric-correlation-matrix.md3.4 KB
- examples/data-exploration/metric-distribution-small-multiples.md2.7 KB
- examples/data-exploration/parallel-risk-screen.md3.4 KB
- examples/data-exploration/regression-trend-fit.md2.7 KB
- examples/data-exploration/scatter-segment-correlation.md3.3 KB
- examples/data-exploration/segment-pattern-small-multiples.md2.8 KB
- examples/data-exploration/streamgraph-topic-composition.md2.9 KB
- examples/data-exploration/stripplot-region-spread.md2.4 KB
- examples/data-platform/data-platform-lakehouse.md6.6 KB
- examples/data-platform/entity-relationships-crows-foot.md4.2 KB
- examples/data-platform/machine-learning-pipeline.md6.6 KB
- examples/delivery-throughput/adoption-shift-slope.md3.8 KB
- examples/delivery-throughput/asset-size-packing.md4.7 KB
- examples/delivery-throughput/backlog-ranking-dataset.md3.9 KB
- examples/delivery-throughput/build-time-candles.md3.6 KB
- examples/delivery-throughput/demand-overview-detail.md3.1 KB
- examples/delivery-throughput/engineering-time-100pct-bars.md3.4 KB
- examples/delivery-throughput/growth-vs-efficiency-path.md4.1 KB
- examples/delivery-throughput/pictorialbar-capacity-symbols.md2.6 KB
- examples/delivery-throughput/plan-to-actual-bridge.md3.6 KB
- examples/delivery-throughput/rank-movement-over-time.md3.4 KB
- examples/delivery-throughput/release-duration-distribution.md2.7 KB
- examples/delivery-throughput/release-size-violin.md5.9 KB
- examples/delivery-throughput/release-time-split-donut.md3.2 KB
- examples/delivery-throughput/request-size-distribution.md2.1 KB
- examples/delivery-throughput/support-capacity-units.md3.6 KB
- examples/delivery-throughput/team-capacity-ramp.md1.9 KB
- examples/delivery-throughput/team-rank-bump-chart.md3.8 KB
- examples/delivery-throughput/team-throughput-bars.md1.8 KB
- examples/delivery-throughput/throughput-band-range-area.md3.8 KB
- examples/dependencies-and-relations/clustered-architecture.md4.9 KB
- examples/dependencies-and-relations/dependency-graph.md4.8 KB
- examples/dependencies-and-relations/fishbone-causal-tree.md4.8 KB
- examples/dependencies-and-relations/graph-platform-dependencies.md3.2 KB
- examples/dependencies-and-relations/module-import-arcs.md7.0 KB
- examples/dependencies-and-relations/platform-dependency-graph.md2.7 KB
- examples/dependencies-and-relations/relationship-network-neato.md5.0 KB
- examples/dependencies-and-relations/service-call-force-map.md5.8 KB
- examples/dependencies-and-relations/service-dependency-network.md3.0 KB
- examples/dependencies-and-relations/service-ownership-circle-graph.md3.6 KB
- examples/dependencies-and-relations/table-node-structures.md4.3 KB
- examples/engineering-operations/calendar-release-pace.md3.0 KB
- examples/engineering-operations/daily-ops-checklist-columns.md2.0 KB
- examples/engineering-operations/deploy-frequency-calendar.md4.7 KB
- examples/engineering-operations/deploy-punchcard-weekday-hour.md4.8 KB
- examples/engineering-operations/launch-readiness-checklist.md1.9 KB
- examples/engineering-operations/oncall-coverage-wheel.md1.9 KB
- examples/engineering-operations/operating-cycle-loop.md2.0 KB
- examples/engineering-operations/quarterly-business-rhythm.md2.1 KB
- examples/engineering-operations/shift-handover-timeline.md2.0 KB
- examples/engineering-operations/sprint-standup-talking-points.md2.0 KB
- examples/engineering-operations/support-shift-handover.md2.1 KB
- examples/enterprise-architecture/archimate-layered-model.md6.2 KB
- examples/enterprise-architecture/capability-map.md5.6 KB
- examples/enterprise-architecture/stakeholder-circle-wheel.md2.6 KB
- examples/go-to-market/donut-channel-mix.md2.6 KB
- examples/go-to-market/lead-source-rose.md3.2 KB
- examples/go-to-market/market-entry-swot.md2.4 KB
- examples/go-to-market/partner-onboarding-timeline.md2.1 KB
- examples/go-to-market/partner-tiers-pyramid.md2.0 KB
- examples/go-to-market/sales-qualification-gates.md2.0 KB
- examples/go-to-market/traffic-source-mix-split.md1.8 KB
- examples/goal-and-status-reporting/delivery-score-threshold-bands.md3.9 KB
- examples/goal-and-status-reporting/goal-attainment-background-bars.md3.0 KB
- examples/goal-and-status-reporting/kpi-dashboard.md4.8 KB
- examples/goal-and-status-reporting/leadership-metric-board.md1.9 KB
- examples/goal-and-status-reporting/metric-snapshot-board.md4.0 KB
- examples/goal-and-status-reporting/program-status-ribbons.md2.0 KB
- examples/goal-and-status-reporting/target-attainment-bullet.md2.7 KB
- examples/incident-management/bug-triage-filters.md2.6 KB
- examples/incident-management/change-request-columns.md2.0 KB
- examples/incident-management/field-ops-playbook.md2.5 KB
- examples/incident-management/incident-escalation-path.md2.3 KB
- examples/incident-management/incident-response-runbook.md2.0 KB
- examples/incident-management/incident-review-card.md3.8 KB
SKILL.md（原文）
インストールする前に、エージェントに与えられる指示の中身を確認できます。
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 |
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.
レビュー
まだレビューはありません。使ってみた感想をお寄せください。