Add bundled Markdown Viewer skill (#964)
Co-authored-by: openclaw <openclaw@openclaws-Mac-mini.local>
This commit is contained in:
thursdaycapital
@@ -0,0 +1,86 @@
|
|||||||
|
---
|
||||||
|
name: markdown-viewer
|
||||||
|
description: "Create rich diagrams, data visualizations, technical architecture views, and editorial content cards directly in Markdown using the Markdown Viewer Agent Skills pack. Use for Mermaid-like diagram requests, PlantUML architecture diagrams, Vega charts, JSON Canvas maps, infographics, UML, cloud/network/security/data/IoT diagrams, and polished Markdown documentation visuals."
|
||||||
|
version: 1.0.0
|
||||||
|
author: Ekko
|
||||||
|
license: MIT
|
||||||
|
platforms: [linux, macos, windows]
|
||||||
|
metadata:
|
||||||
|
hermes:
|
||||||
|
source: markdown-viewer/skills
|
||||||
|
tags: [markdown-viewer, diagrams, visualization, plantuml, vega, infographic, documentation]
|
||||||
|
prerequisites:
|
||||||
|
commands: [node, npx]
|
||||||
|
---
|
||||||
|
|
||||||
|
# Markdown Viewer
|
||||||
|
|
||||||
|
Use this skill when the user wants a diagram, visualization, architecture view, data chart, technical documentation graphic, infographic, mind map, or editorial-quality content card directly inside Markdown.
|
||||||
|
|
||||||
|
Markdown Viewer Agent Skills is an opinionated skill pack for AI coding agents. It covers diagram generation, data visualization, and technical documentation using multiple Markdown-rendered engines, including PlantUML, Vega/Vega-Lite, JSON Canvas, infographic blocks, and direct HTML/CSS embeds.
|
||||||
|
|
||||||
|
## Setup
|
||||||
|
|
||||||
|
If the upstream skill pack is not installed, install it first:
|
||||||
|
|
||||||
|
```bash
|
||||||
|
npx skills add markdown-viewer/skills
|
||||||
|
```
|
||||||
|
|
||||||
|
After installation, prefer reading the specific upstream skill for the requested output type before writing complex diagrams. The pack includes detailed syntax rules, examples, and common pitfalls for each renderer.
|
||||||
|
|
||||||
|
## Skill Selection
|
||||||
|
|
||||||
|
Choose the smallest renderer that fits the user's goal:
|
||||||
|
|
||||||
|
| User goal | Use |
|
||||||
|
| --- | --- |
|
||||||
|
| Bar, line, scatter, heatmap, area, radar, word cloud, or data-driven chart | `vega` / `vega-lite` |
|
||||||
|
| KPI card, roadmap, timeline, SWOT, funnel, org chart, or structured visual summary | `infographic` |
|
||||||
|
| Free-position mind map, concept map, knowledge graph, or planning board | `canvas` |
|
||||||
|
| System layers, microservices, app/data/infrastructure layers | `architecture` |
|
||||||
|
| Editorial knowledge card, event card, data highlight, or polished content tile | `infocard` |
|
||||||
|
| UML class, sequence, activity, state, component, deployment, package, or use-case diagram | `uml` |
|
||||||
|
| AWS, Azure, GCP, Alibaba Cloud, Kubernetes, serverless, or multi-cloud diagram | `cloud` |
|
||||||
|
| LAN/WAN, data center, enterprise network, or device topology | `network` |
|
||||||
|
| Threat model, zero-trust, IAM, firewall, encryption, or compliance view | `security` |
|
||||||
|
| Enterprise architecture with business/application/technology layers | `archimate` |
|
||||||
|
| BPMN workflow, swim lanes, integration pattern, or value stream map | `bpmn` |
|
||||||
|
| ETL/ELT, warehouse, lakehouse, ML pipeline, or analytics workflow | `data-analytics` |
|
||||||
|
| Sensors, edge computing, smart factory/home, fleet, or digital twin view | `iot` |
|
||||||
|
| Hierarchical brainstorm tree or study outline | `mindmap` |
|
||||||
|
|
||||||
|
## Output Rules
|
||||||
|
|
||||||
|
- Write the result in Markdown unless the user asks for a separate file.
|
||||||
|
- Use the correct code fence for the chosen renderer:
|
||||||
|
- `vega-lite` or `vega` for data charts.
|
||||||
|
- `infographic` for infographic YAML blocks.
|
||||||
|
- `canvas` for JSON Canvas maps.
|
||||||
|
- `plantuml` or `puml` for UML, cloud, network, security, ArchiMate, BPMN, data analytics, IoT, and PlantUML mind maps.
|
||||||
|
- For `architecture` and `infocard`, embed the HTML/CSS directly in Markdown when that renderer expects raw HTML instead of a code fence.
|
||||||
|
- Keep diagrams focused. Prefer a clear, accurate first version over decorative complexity.
|
||||||
|
- Label nodes and edges with domain language the user already used.
|
||||||
|
- For technical diagrams, include enough structure to be useful in docs: boundaries, data flow, dependencies, trust zones, layers, or ownership where relevant.
|
||||||
|
- For data visualizations, include explicit sample data or use the data the user supplied. Do not invent real metrics without marking them as placeholders.
|
||||||
|
- For security or compliance diagrams, avoid implying guarantees. Show controls, boundaries, and risks factually.
|
||||||
|
|
||||||
|
## Workflow
|
||||||
|
|
||||||
|
1. Identify the user's artifact type: chart, diagram, architecture, process, mind map, infographic, or card.
|
||||||
|
2. Select the renderer from the guide above.
|
||||||
|
3. If the pack is installed locally, read the corresponding upstream `SKILL.md` for exact syntax and pitfalls.
|
||||||
|
4. Draft the Markdown artifact with the correct code fence or raw HTML/CSS style.
|
||||||
|
5. Check syntax before delivery: matching fences, valid JSON/YAML where required, PlantUML starts and ends correctly, and labels are readable.
|
||||||
|
6. If the user needs a file, save it as `.md` and include only the final artifact plus concise notes.
|
||||||
|
|
||||||
|
## Delivery
|
||||||
|
|
||||||
|
When finished, tell the user:
|
||||||
|
|
||||||
|
- which renderer or sub-skill you used;
|
||||||
|
- where the Markdown file is, if one was created;
|
||||||
|
- any placeholder data or assumptions;
|
||||||
|
- any viewer requirement, such as needing a Markdown Viewer extension or compatible renderer.
|
||||||
|
|
||||||
|
Do not use static screenshots when the user asked for Markdown-native visuals. The value of this skill is that the output stays editable, reviewable, and renderable from Markdown.
|
||||||
Reference in New Issue
Block a user