[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"project-75118":3},{"id":4,"name":5,"fullName":6,"owner":7,"repo":5,"description":8,"homepage":9,"htmlUrl":10,"language":10,"languages":10,"totalLinesOfCode":10,"stars":11,"forks":12,"watchers":13,"openIssues":14,"contributorsCount":15,"subscribersCount":15,"size":15,"stars1d":16,"stars7d":17,"stars30d":18,"stars90d":15,"forks30d":15,"starsTrendScore":19,"compositeScore":20,"rankGlobal":10,"rankLanguage":10,"license":10,"archived":21,"fork":21,"defaultBranch":22,"hasWiki":23,"hasPages":21,"topics":24,"createdAt":10,"pushedAt":10,"updatedAt":25,"readmeContent":26,"aiSummary":27,"trendingCount":15,"starSnapshotCount":15,"syncStatus":28,"lastSyncTime":29,"discoverSource":30},75118,"skills","markdown-viewer\u002Fskills","markdown-viewer","Opinionated skills for AI coding agents to create stunning diagrams and visualizations directly in Markdown. These skills extend agent capabilities across diagram generation, data visualization, and technical documentation.","",null,2940,173,7,1,0,40,64,518,120,28.72,false,"main",true,[],"2026-06-12 02:03:32","# Markdown Viewer Agent Skills\n\nOpinionated skills for AI coding agents to create stunning diagrams and visualizations directly in Markdown. These skills extend agent capabilities across diagram generation, data visualization, and technical documentation.\n\n**14 skills** covering 5 rendering engines — from software modeling to enterprise architecture, data analytics, and editorial-quality content cards.\n\nSkills follow the [Agent Skills](https:\u002F\u002Fagentskills.io\u002F) format.\n\n---\n\n## 🧭 Quick Navigation\n\n**[🚀 Installation](#-installation)** • **[📚 Available Skills](#-available-skills)** • **[📖 Skill Structure](#-skill-structure)** • **[🔗 Links](#-links)**\n\n---\n\n## 🚀 Installation\n\n### Quick Install (Recommended)\n\n```bash\nnpx skills add markdown-viewer\u002Fskills\n```\n\nThis method works with multiple AI coding agents (Claude Code, Codex, Cursor, etc.)\n\n### Manual Installation\n\n**For Claude Code (Manual)**\n```bash\ncp -r skills\u002F\u003Cskill-name> ~\u002F.claude\u002Fskills\u002F\n```\n\n**For claude.ai**\n\nAdd skills to project knowledge or paste SKILL.md contents into the conversation.\n\n**For GitHub Copilot \u002F VS Code**\n\nSkills are automatically detected when placed in `.github\u002Fskills\u002F` directory.\n\n---\n\n## 📚 Available Skills\n\n### Standalone Skills\n\n| Category | Skill | Code Fence | Description | Best For |\n|----------|-------|------------|-------------|----------|\n| � Data Charts | [vega](vega\u002FSKILL.md) | ` ```vega-lite ` \u002F ` ```vega ` | Data-driven charts with Vega-Lite and Vega | Bar, line, scatter, heatmap, area charts, radar, word cloud |\n| 📈 Infographic | [infographic](infographic\u002FSKILL.md) | ` ```infographic ` | 70+ pre-designed templates with YAML syntax | KPI cards, timelines, roadmaps, SWOT, funnels, org trees |\n| 🎨 Mind Map | [canvas](canvas\u002FSKILL.md) | ` ```canvas ` | Spatial node-based diagrams with JSON Canvas format | Mind maps, knowledge graphs, concept maps, planning boards |\n\n### HTML\u002FCSS Embedded Skills\n\nThese skills generate HTML\u002FCSS directly embedded in Markdown (no code fence):\n\n| Category | Skill | Templates | Description | Best For |\n|----------|-------|-----------|-------------|----------|\n| 🏛️ Layered Architecture | [architecture](architecture\u002FSKILL.md) | 13 layouts × 12 styles | Color-coded layer diagrams with grid-based component layout | System layers, microservices, enterprise apps |\n| 🃏 Info Cards | [infocard](infocard\u002FSKILL.md) | 13 layouts × 14 styles | Editorial-style information cards with magazine-quality typography | Knowledge summaries, data highlights, event announcements |\n\n### PlantUML-Based Skills\n\nThese skills use PlantUML as the diagram engine, with domain-specific mxgraph stencil icons and conventions. All use ` ```plantuml ` or ` ```puml ` code fence.\n\n| Category | Skill | Description | Best For |\n|----------|-------|-------------|----------|\n| 📐 UML Diagrams | [uml](uml\u002FSKILL.md) | 14 UML diagram types with 9500+ mxgraph stencil icons | Software modeling, design patterns, API flows |\n| ☁️ Cloud Architecture | [cloud](cloud\u002FSKILL.md) | AWS, Azure, GCP, Alibaba, IBM, OpenStack, Kubernetes icons | Cloud infrastructure, serverless, multi-cloud |\n| 🌐 Network Topology | [network](network\u002FSKILL.md) | Network diagrams with Cisco\u002FCitrix\u002Findustry device icons | LAN\u002FWAN, enterprise networks, data center |\n| 🔒 Security Architecture | [security](security\u002FSKILL.md) | IAM, encryption, firewall, threat detection, compliance icons | Threat models, zero-trust, compliance auditing |\n| 🏢 ArchiMate | [archimate](archimate\u002FSKILL.md) | Enterprise architecture with ArchiMate layered modeling | Business\u002Fapplication\u002Ftechnology layer modeling |\n| 📋 BPMN | [bpmn](bpmn\u002FSKILL.md) | Business process modeling, EIP, and Lean Mapping stencils | Workflow automation, EIP, value stream mapping |\n| 📊 Data Analytics | [data-analytics](data-analytics\u002FSKILL.md) | Data pipeline and analytics workflow diagrams | ETL\u002FELT pipelines, data warehouses, ML workflows |\n| 📡 IoT | [iot](iot\u002FSKILL.md) | IoT device, sensor, and edge computing diagrams | Smart home\u002Ffactory, fleet management, digital twins |\n| 🧠 Mind Map | [mindmap](mindmap\u002FSKILL.md) | Native PlantUML mind map syntax with directional branches and rich text | Brainstorming trees, study outlines, decision maps |\n\n### Skill Selection Guide\n\n| Use Case | Recommended Skill | Reason |\n|----------|-------------------|--------|\n| **Software Modeling** | | |\n| Flowchart \u002F process flow | `uml` | PlantUML activity diagram with auto-layout |\n| Sequence diagram | `uml` | UML lifeline and flow shapes |\n| State machine | `uml` | UML statechart notation |\n| Class \u002F object diagram | `uml` | Standard UML notation |\n| Component \u002F deployment | `uml` | UML component and deployment views |\n| Dependency graph \u002F module relations | `uml` | Package diagram with hierarchical layout |\n| **Data Visualization** | | |\n| Bar \u002F line \u002F scatter chart | `vega` | Data-driven visualization |\n| Heatmap \u002F multi-series | `vega` | Statistical analysis |\n| Radar chart \u002F word cloud | `vega` | Advanced Vega syntax |\n| KPI dashboard \u002F metrics | `infographic` | Pre-designed card templates |\n| Timeline \u002F roadmap | `infographic` | Built-in timeline templates |\n| SWOT \u002F comparison | `infographic` | Structured comparison templates |\n| **Content & Presentation** | | |\n| Knowledge summary card | `infocard` | Editorial typography and layout |\n| Data highlight \u002F metrics card | `infocard` | Magazine-quality data presentation |\n| Event announcement | `infocard` | Professional card design |\n| Topic overview | `infocard` | Content-driven tone sensing |\n| **Concept Mapping** | | |\n| Mind map \u002F brainstorm (hierarchical auto-layout) | `mindmap` | PlantUML mind map syntax with automatic tree layout |\n| Mind map \u002F brainstorm (free-position) | `canvas` | Free spatial positioning |\n| Knowledge graph | `canvas` | Node-edge with coordinates |\n| **Architecture** | | |\n| System layers (User→App→Data→Infra) | `architecture` | Color-coded HTML\u002FCSS layer templates |\n| Microservices architecture | `architecture` | Grid-based component layout |\n| Enterprise architecture (ArchiMate) | `archimate` | ArchiMate layered modeling notation |\n| **Network & Cloud** | | |\n| Network topology (LAN\u002FWAN) | `network` | Cisco\u002FCitrix\u002Findustry device icons |\n| AWS architecture | `cloud` | AWS stdlib icons |\n| Azure \u002F GCP \u002F Alibaba Cloud | `cloud` | Provider-specific PlantUML stdlib |\n| Kubernetes deployment | `cloud` | K8s-specific icons |\n| **Security** | | |\n| Threat model | `security` | Security-specific icons and patterns |\n| Zero-trust architecture | `security` | IAM, firewall, encryption icons |\n| Compliance diagram | `security` | Audit and compliance flows |\n| **Business Process** | | |\n| BPMN workflow | `bpmn` | BPMN notation with swim lanes |\n| Integration pattern (EIP) | `bpmn` | Enterprise integration patterns |\n| Value stream mapping | `bpmn` | Lean Mapping stencils |\n| **Data Engineering** | | |\n| ETL\u002FELT pipeline | `data-analytics` | Data pipeline icons and patterns |\n| Data warehouse architecture | `data-analytics` | Warehouse\u002Flake\u002Flakehouse models |\n| ML workflow | `data-analytics` | ML pipeline visualization |\n| **IoT** | | |\n| Sensor network | `iot` | IoT device and sensor icons |\n| Edge computing architecture | `iot` | Edge\u002Fcloud integration patterns |\n| Digital twin \u002F fleet management | `iot` | Asset modeling and tracking |\n\n---\n\n## 📖 Skill Structure\n\nEach skill contains:\n\n```\nskills\u002F\n├── \u003Cskill-name>\u002F\n│   ├── SKILL.md        # Detailed instructions for the agent (with YAML frontmatter)\n│   ├── examples\u002F       # Example diagrams (PlantUML-based skills)\n│   ├── references\u002F     # Syntax specs and examples (canvas, vega, infographic)\n│   ├── layouts\u002F        # Layout templates (architecture, infocard)\n│   └── styles\u002F         # Color style templates (architecture, infocard)\n└── README.md           # This file\n```\n\n### Skill Hierarchy\n\n```mermaid\nflowchart TD\n    plantuml[\"📐 PlantUML\u003Cbr\u002F>\u003Csmall>Base: text-based diagramming engine\u003C\u002Fsmall>\"]\n    standalone[\"🧩 Standalone\u003Cbr\u002F>\u003Csmall>Independent rendering engines\u003C\u002Fsmall>\"]\n    htmlcss[\"🎨 HTML\u002FCSS\u003Cbr\u002F>\u003Csmall>Direct HTML embedding\u003C\u002Fsmall>\"]\n    \n    plantuml --> uml[\"📐 uml\u003Cbr\u002F>\u003Csmall>14 UML types + 9500 stencils\u003C\u002Fsmall>\"]\n    plantuml --> cloud[\"☁️ cloud\u003Cbr\u002F>\u003Csmall>AWS\u002FAzure\u002FGCP\u002FAlibaba\u002FIBM\u003C\u002Fsmall>\"]\n    plantuml --> network[\"🌐 network\u003Cbr\u002F>\u003Csmall>Cisco\u002FCitrix devices\u003C\u002Fsmall>\"]\n    plantuml --> security[\"🔒 security\u003Cbr\u002F>\u003Csmall>IAM\u002FFirewall\u002FEncryption\u003C\u002Fsmall>\"]\n    plantuml --> archimate[\"🏢 archimate\u003Cbr\u002F>\u003Csmall>Enterprise ArchiMate layers\u003C\u002Fsmall>\"]\n    plantuml --> bpmn[\"📋 bpmn\u003Cbr\u002F>\u003Csmall>BPMN\u002FEIP\u002FLean Mapping\u003C\u002Fsmall>\"]\n    plantuml --> dataanalytics[\"📊 data-analytics\u003Cbr\u002F>\u003Csmall>ETL\u002FWarehouse\u002FML\u003C\u002Fsmall>\"]\n    plantuml --> iot[\"📡 iot\u003Cbr\u002F>\u003Csmall>Sensors\u002FEdge\u002FSmart systems\u003C\u002Fsmall>\"]\n    plantuml --> mindmap[\"🧠 mindmap\u003Cbr\u002F>\u003Csmall>Hierarchical brainstorming maps\u003C\u002Fsmall>\"]\n    \n    standalone --> vega[\"📊 vega\u003Cbr\u002F>\u003Csmall>Data-driven charts\u003C\u002Fsmall>\"]\n    standalone --> infographic[\"📈 infographic\u003Cbr\u002F>\u003Csmall>70+ YAML templates\u003C\u002Fsmall>\"]\n    standalone --> canvas[\"🎨 canvas\u003Cbr\u002F>\u003Csmall>JSON Canvas mind maps\u003C\u002Fsmall>\"]\n    \n    htmlcss --> architecture[\"🏛️ architecture\u003Cbr\u002F>\u003Csmall>12 styles × 13 layouts\u003C\u002Fsmall>\"]\n    htmlcss --> infocard[\"🃏 infocard\u003Cbr\u002F>\u003Csmall>14 styles × 13 layouts\u003C\u002Fsmall>\"]\n```\n\n### SKILL.md Format\n\nEach `SKILL.md` includes:\n- **YAML frontmatter** with `name`, `description`, and `metadata` fields\n- **Critical Syntax Rules** to avoid common errors\n- **Templates \u002F Examples** for reference\n- **Common Pitfalls** and solutions\n\n---\n\n## 🎯 Usage Tips\n\n### For AI Agents\n\nWhen the agent receives a request involving diagrams or visualizations:\n\n1. **Identify the diagram type** from user requirements\n2. **Read the appropriate SKILL.md** for detailed instructions\n3. **Follow the syntax rules** carefully to avoid render failures\n4. **Use the code fence** specified in each skill\n\n### Code Fence Reference\n\n| Skill | Code Fence | Output Format |\n|-------|------------|---------------|\n| Vega-Lite | ` ```vega-lite ` | SVG\u002FCanvas |\n| Vega | ` ```vega ` | SVG\u002FCanvas |\n| Infographic | ` ```infographic ` | HTML |\n| Canvas | ` ```canvas ` | SVG |\n| UML | ` ```plantuml ` \u002F ` ```puml ` | SVG |\n| Cloud | ` ```plantuml ` \u002F ` ```puml ` | SVG |\n| Network | ` ```plantuml ` \u002F ` ```puml ` | SVG |\n| Security | ` ```plantuml ` \u002F ` ```puml ` | SVG |\n| ArchiMate | ` ```plantuml ` \u002F ` ```puml ` | SVG |\n| BPMN | ` ```plantuml ` \u002F ` ```puml ` | SVG |\n| Data Analytics | ` ```plantuml ` \u002F ` ```puml ` | SVG |\n| IoT | ` ```plantuml ` \u002F ` ```puml ` | SVG |\n| Mindmap | ` ```plantuml ` \u002F ` ```puml ` | SVG |\n| Architecture | (no fence, raw HTML) | HTML |\n| Infocard | (no fence, raw HTML) | HTML |\n\n---\n\n## 🔗 Links\n\n- [Markdown Viewer Extension](https:\u002F\u002Fdocu.md) - The rendering engine behind these skills\n- [Agent Skills Format](https:\u002F\u002Fagentskills.io\u002F) - Standard format for AI agent skills\n- [Chrome Extension](https:\u002F\u002Fchromewebstore.google.com\u002Fdetail\u002Fmarkdown-viewer\u002Fjekhhoflgcfoikceikgeenibinpojaoi) - Install for Chrome\u002FEdge\n- [Firefox Add-on](https:\u002F\u002Faddons.mozilla.org\u002Ffirefox\u002Faddon\u002Fmarkdown-viewer-extension\u002F) - Install for Firefox\n- [VS Code Extension](https:\u002F\u002Fmarketplace.visualstudio.com\u002Fitems?itemName=xicilion.markdown-viewer-extension) - Install for VS Code\n\n---\n\n## 🤝 Contributing\n\nTo add a new skill:\n\n1. Create a new folder under `skills\u002F` with your skill name\n2. Add a `SKILL.md` file following the standard format:\n   ```yaml\n   ---\n   name: your-skill-name\n   description: Brief description of the skill\n   metadata:\n     author: Your attribution text\n   ---\n   ```\n3. Include examples\u002Freferences in a subfolder\n4. Update this README to include your skill in the tables\n\n---\n\n## 📄 License\n\nGPL-3.0\n","markdown-viewer\u002Fskills 是一个为 AI 编码代理设计的技能集，旨在直接在 Markdown 中创建出色的图表和可视化内容。该项目包含了14种技能，覆盖了5种渲染引擎，支持从软件建模到企业架构、数据分析以及编辑级质量的内容卡片等多种应用场景。这些技能遵循 Agent Skills 格式，并且可以轻松地与多个AI编码代理（如Claude Code, Codex, Cursor等）集成。无论是需要生成数据驱动的图表、信息图还是UML图，此项目都能提供相应的解决方案，特别适合于技术文档编写、项目规划及数据展示等场景。",2,"2026-06-11 03:52:23","high_star"]