agentCLAWHUBUnverified
“Render Mermaid diagrams as beautiful SVG, PNG, or ASCII art. Supports 6 chart types (flowchart, sequence, state, class, ER, XY chart), 16 built-in themes, 5 style presets, CSS-level customization, interactive preview, and batch rendering. Works in termin
Render Mermaid diagrams as beautiful SVG, PNG, or ASCII art. Supports 6 chart types (flowchart, sequence, state, class, ER, XY chart), 16 built-in themes, 5...
OpenClaw
Rank
62
Safety
84
Downloads
2.2k
Updated
Oct 9, 2026
Version
1.0.0
Source
CLAWHUB
About
What it does, and when to use it.
Capability contract not published. No trust telemetry is available yet. 2.2K downloads reported by the source. Last updated 10/9/2026.
Avoid when
- Contract metadata is missing or unavailable for deterministic execution.
Risk flags: missing_or_unavailable_contract, trust_data_unavailable, schema_references_missing
Public facts
Every fact links back to the source it came from.
- Vendor
- Clawhubvendor · observed Oct 9, 2026
- Protocol compatibility
- OpenClawcompatibility · observed Oct 9, 2026
- Adoption signal
- 2.2K downloadsadoption · observed Oct 9, 2026
- Latest release
- 1.0.0release · observed Mar 28, 2026
- Handshake status
- UNKNOWNsecurity
Install and run
Setup complexity: medium.
clawhub skill install s17cgjcpz3n46wtafpz0mmxjtx83rk70:beautiful-mermaid- Install using `clawhub skill install s17cgjcpz3n46wtafpz0mmxjtx83rk70:beautiful-mermaid` in an isolated environment before connecting it to live workloads.
- No published capability contract is available yet, so validate auth and request/response behavior manually.
- Review the upstream CLAWHUB listing at https://clawhub.ai/chouraycn/beautiful-mermaid before using production credentials.
Contract: missing
curl -s "https://www.xpersona.co/api/v1/agents/clawhub-chouraycn-beautiful-mermaid/snapshot"
Documentation
CLAWHUB
79,176 characters of source documentation, loaded on request.
Extracted files
5 files captured from the source.
SKILL.md
--- name: beautiful-mermaid version: 1.0.0 description: "Render Mermaid diagrams as beautiful SVG, PNG, or ASCII art. Supports 6 chart types (flowchart, sequence, state, class, ER, XY chart), 16 built-in themes, 5 style presets, CSS-level customization, interactive preview, and batch rendering. Works in terminal, chat, or web environments." description_zh: "Mermaid 图表美化渲染工具，支持流程图/序列图/状态图/类图/ER图/XY图表6种类型，16主题5预设，可导出SVG/PNG/ASCII" description_en: "Beautiful Mermaid diagram renderer (SVG/PNG/ASCII, 16 themes, 5 presets, interactive preview)" homepage: https://github.com/chouraycn/beautiful-mermaid icon: beautiful-mermaid.png --- # Beautiful Mermaid Skill ## 概述 Beautiful Mermaid 是一个高性能的 Mermaid 图表渲染库，专为 AI 时代设计。它将 Mermaid 语法转换为美观的 SVG 图形、PNG 位图或 ASCII 艺术字，支持同步渲染、全主题定制、CSS级样式定制，零 DOM 依赖。 | 说明 | 地址 | |------|------| | 本 Skill | [https://github.com/chouraycn/beautiful-mermaid](https://github.com/chouraycn/beautiful-mermaid) | | 上游项目 | [https://github.com/lukilabs/beautiful-mermaid](https://github.com/lukilabs/beautiful-mermaid) | ## 核心能力 ### 1. 支持的图表类型 - **流程图 (Flowchart)**：`graph TD`、`graph LR`、`graph BT`、`graph RL` 等方向 - **序列图 (Sequence Diagram)**：参与者之间的交互 - **状态图 (State Diagram)**：状态转换 - **类图 (Class Diagram)**：面向对象设计 - **实体关系图 (ER Diagram)**：数据库设计 - **XY 图表**：条形图、折线图、组合图（`xychart-beta` 语法） ### 2. 输出格式 - **SVG**：适用于富 UI 界面，支持透明背景和内联样式 - **PNG**：适用于文档嵌入、高清位图输出，支持自定义尺寸和 DPI - **ASCII/Unicode**：适用于终端环境，支持颜色输出 ### 3. 主题系统 - **15 内置主题**：tokyo-night、dracula、github-dark、nord 等（9 暗色 + 6 亮色） - **完整 7 字段**：每个主题包含 `bg`、`fg`、`line`、`accent`、`muted`、`surface`、`border` 全部字段 - **Mono 模式**：仅需提供背景色(bg)和前景色(fg)，自动推导整套配色 - **自定义主题**：可覆盖任意元素颜色 - **Shiki 集成**：通过 `fromShikiTheme()` 直接使用 VS Code 编辑器主题 #### 主题完整对照表 | 主题名 | 类型 | 背景色 | 强调色(accent) | 推荐预设 | 适用场景 | |--------|------|--------|--------------|---------|---------| | `zinc-light` | 亮色 | `#FFFFFF` | `#3F3F46` | outline | 极简文档 | | `zinc-dark` | 暗色 | `#18181B` | `#A1A1AA` | glass | 极简暗场景 | | `tokyo-night` | 暗色 | `#1a1b26` | `#7aa2f7` | glass | 代码架构图 | | `tokyo-night-storm` | 暗色 | `#24283b` | `#7aa2f7` | modern | 系统设计图 | | `tokyo-night-light` | 亮色 | `#d5d6db` | `#34548a` | modern | 亮色演示 | | `catppuccin-mocha` | 暗色 | `#1e1e2e` | `#cba6f7` | glass | 产品展示 | | `catppuccin-latte` | 亮色 | `#eff1f5` | `#8839ef` | modern | 分享文档 | | `nord` | 暗色 | `#2e3440` | `#88c0d0` | modern | 技术文档暗色 | | `nord-light` | 亮色 | `#eceff4` | `#5e81ac` | outline | 技术文档亮色 | | `dracula` | 暗色 | `#282a36` | `#bd93f9` | gradient | 视觉展示 | | `github-light` | 亮色 | `#ffffff` | `#0969da` | default | GitHub/文档 | | `github-dark` | 暗色 | `#0d1117` | `#4493f8` | modern | 代码深度分析 | | `solarized-light` | 亮色 | `#fdf6e3` | `#268bd2` | outline | 护眼亮色 | | `solarized-dark` | 暗色 | `#002b36` | `#268bd2` | modern | 护眼暗色 | | `one-dark` | 暗色 | `#282c34` | `#c678dd` | gradient | 紫色调 | #### 主题字段说明 | 字段 | 说明 | 用途 | |------|------|------| | `bg` | 画布背景色 | 整体底色 | | `fg` | 主前景/文字色 | 节点标签、主要文字 | | `line` | 连线颜色 | 边/箭头连线 | | `accent` | 强调色 | 箭头头部、子图标题、高亮节点 | | `muted` | 次要色
README.md
# Beautiful Mermaid Skill 使用指南 ## 项目地址 | 说明 | 地址 | |------|------| | 本 Skill | [https://github.com/chouraycn/beautiful-mermaid](https://github.com/chouraycn/beautiful-mermaid) | | 上游项目 | [https://github.com/lukilabs/beautiful-mermaid](https://github.com/lukilabs/beautiful-mermaid) | ## 快速开始 ### 1. 安装依赖 ```bash cd beautiful-mermaid npm install ``` ### 2. 交互式预览 (推荐) ```bash # 在浏览器中打开样式定制预览工具 open assets/preview.html ``` **预览工具功能**： - 15 个内置主题即时预览，点击切换 - 9 种图表类型：流程图、序列图、状态图、类图、ER 图、柱状图、折线图、组合图、水平柱状图 - 节点样式：背景色、圆角、边框、阴影 - 连线样式：粗细、颜色、箭头、圆角 - 5 种预设风格：默认、现代简约、渐变、线条轮廓、毛玻璃 - 一键导出带完整样式的 SVG 文件 - 使用 beautiful-mermaid 库渲染，与 CLI 输出一致 ### 3. 运行示例 ```bash # 流程图 node scripts/render.js assets/examples/flowchart-basic.mmd -o flowchart-basic.svg # 序列图 node scripts/render.js assets/examples/sequence-diagram.mmd -o sequence-diagram.svg # 状态图 node scripts/render.js assets/examples/state-diagram.mmd -o state-diagram.svg # ER 图 node scripts/render.js assets/examples/er-diagram.mmd -o er-diagram.svg # 类图 node scripts/render.js assets/examples/class-diagram.mmd -o class-diagram.svg # XY 柱状图 node scripts/render.js assets/examples/xychart-bar.mmd -o xychart-bar.svg # XY 折线图 node scripts/render.js assets/examples/xychart-line.mmd -o xychart-line.svg # XY 组合图 node scripts/render.js assets/examples/xychart-combo.mmd -o xychart-combo.svg ``` ### 4. 使用不同主题 ```bash # 使用 dracula 主题 node scripts/render.js assets/examples/flowchart-basic.mmd -t dracula -o flowchart-dracula.svg # 使用 catppuccin-mocha 主题 node scripts/render.js assets/examples/flowchart-basic.mmd -t catppuccin-mocha -o flowchart-catppuccin.svg # 使用 github-light 主题 (亮色) node scripts/render.js assets/examples/flowchart-basic.mmd -t github-light -o flowchart-light.svg ``` ### 5. 渲染为 PNG (高清位图) ```bash # 标准尺寸 PNG (1200px) node scripts/render.js assets/examples/flowchart-basic.mmd -f png -o flowchart.png # 2K 高清 PNG (2400px) node scripts/render.js assets/examples/flowchart-basic.mmd -f png -w 2400 -o flowchart-hd.png # 2x 缩放 PNG node scripts/render.js assets/examples/flowchart-basic.mmd -f png -s 2 -o flowchart-2x.png # 4K 超清 PNG (4800px) node scripts/render.js assets/examples/flowchart-basic.mmd -f png -s 4 -o flowchart-4k.png # 印刷质量 (300 DPI) node scripts/render.js assets/examples/flowchart-basic.mmd -f png --dpi 300 -o flowchart-print.png ``` ### 6. 渲染为 ASCII (终端输出) ```bash node scripts/render.js assets/examples/flowchart-basic.mmd -f ascii ``` ### 7. 自定义颜色 (Mono 模式) ```bash # 自定义背景和前景色 node scripts/render.js assets/examples/flowchart-basic.mmd \ --bg '#1a1b2e' \ --fg '#e0e0e0' \ --accent '#ff6b6b' \ -o flowchart-custom.svg ``` ### 8. XY 图表交互式 tooltip ```bash # 启用鼠标悬停 tooltip node scripts/render.js assets/examples/xychart-bar.mmd --interactive -o chart-interactive.svg ``` ## 示例文件说明 | 文件 | 说明 | |------|------| | `flowchart-basic.mmd` | 基础流程图示例 | | `sequence-diagram.mmd` | 序列图示例 | | `state-diagram.mmd` | 状态图示例 | | `er-diagram.mmd` | 实体关系图示例 | | `class-diagram.mmd` | 类图示例 | | `xych
_meta.json
{
"ownerId": "kn7f72xykk4r98gjxj6pgyec0s832w86",
"slug": "beautiful-mermaid",
"version": "1.0.0",
"publishedAt": 1774672015689
}references/api-config.json
{
"type": "module",
"title": "Mermaid 配置选项",
"description": "renderMermaidSVG、renderMermaidSVGAsync、renderMermaidASCII、parseMermaid、fromShikiTheme 的完整配置选项",
"version": "1.1.3",
"options": {
"renderMermaidSVG": {
"parameters": {
"text": {
"type": "string",
"required": true,
"description": "Mermaid 图表代码"
},
"options": {
"type": "RenderOptions",
"required": false,
"default": "{}"
}
},
"render_options": {
"bg": {
"type": "string",
"default": "#FFFFFF",
"description": "背景色，支持 CSS 变量",
"examples": ["#1a1b26", "var(--background)"]
},
"fg": {
"type": "string",
"default": "#27272A",
"description": "前景色/文字颜色，支持 CSS 变量",
"examples": ["#a9b1d6", "var(--foreground)"]
},
"line": {
"type": "string",
"required": false,
"description": "连线颜色"
},
"accent": {
"type": "string",
"required": false,
"description": "箭头/高亮色",
"examples": ["#7aa2f7", "#61afef"]
},
"muted": {
"type": "string",
"required": false,
"description": "次要文字/标签颜色",
"examples": ["#565f89", "#5c6370"]
},
"surface": {
"type": "string",
"required": false,
"description": "节点填充色",
"examples": ["#1f2335", "#21252b"]
},
"border": {
"type": "string",
"required": false,
"description": "节点边框色",
"examples": ["#3b4261", "#181a1f"]
},
"font": {
"type": "string",
"default": "Inter",
"description": "字体族"
},
"transparent": {
"type": "boolean",
"default": false,
"description": "是否使用透明背景"
},
"padding": {
"type": "number",
"default": 40,
"description": "画布内边距 (px)"
},
"nodeSpacing": {
"type": "number",
"default": 24,
"description": "同级节点水平间距"
},
"layerSpacing": {
"type": "number",
"default": 40,
"description": "层间垂直间距"
},
"componentSpacing": {
"type": "number",
"default": 24,
"description": "断开组件间距"
},
"interactive": {
"type": "boolean",
"default": false,
"description": "启用 XY 图表悬浮 tooltip"
}
}
},
"renderMermaidSVGAsync": {
"description": "renderMermaidSVG 的异步版本，返回 Promise<string>",
"parameters": {
"text": {
"type": "string",
"required": true,
"description": "Mermaid 图表代码"
},
"options": {
"type": "RenderOptions",
"required": false,
"description": "与 renderMermaidSVG 相同的选项"
}
}
},
skill-card.md
## Description: Render Mermaid diagrams as beautiful SVG, PNG, or ASCII art with support for flowchart, sequence, state, class, ER, and XY chart types, built-in themes, style presets, CSS customization, interactive preview, and batch rendering. This skill is ready for commercial/non-commercial use. ## Publisher: [chouraycn](https://clawhub.ai/user/chouraycn) ### License/Terms of Use: MIT-0 ## Use Case: Developers and engineers use this skill to render Mermaid diagrams into polished SVG, PNG, ASCII, or rich HTML outputs for documentation, presentations, terminal workflows, and web previews. ### Deployment Geography for Use: Global ## Known Risks and Mitigations: Risk: The security review reports active local HTML preview behavior and confirmed unsanitized HTML/SVG insertion paths, making untrusted Mermaid input risky. Mitigation: Use the skill only with trusted .mmd files, skip automatic previews when not needed, and avoid opening generated HTML from untrusted Mermaid input until the @icon and preview innerHTML paths are sanitized. Risk: Generated diagrams or rich HTML may include content derived from user-provided diagram metadata. Mitigation: Review generated SVG, PNG, ASCII, or HTML outputs before publishing or embedding them in downstream documents or sites. ## Reference(s): - [ClawHub skill page](https://clawhub.ai/chouraycn/skills/beautiful-mermaid) - [Publisher profile](https://clawhub.ai/user/chouraycn) - [Beautiful Mermaid repository](https://github.com/chouraycn/beautiful-mermaid) - [Upstream Beautiful Mermaid project](https://github.com/lukilabs/beautiful-mermaid) - [Mermaid documentation](https://mermaid.js.org/) - [API configuration](references/api-config.json) ## Skill Output: **Output Type(s):** [text, markdown, code, shell commands, configuration, guidance, files] **Output Format:** [Markdown guidance with shell commands and generated SVG, PNG, ASCII, or HTML files] **Output Parameters:** [1D] **Other Properties Related to Output:** [May open an interactive local HTML preview and may batch-render multiple .mmd files.] ## Skill Version(s): 1.0.0 (source: SKILL.md frontmatter, package.json, ClawHub release metadata) ## Ethical Considerations: Users should evaluate whether this skill is appropriate for their environment, review any generated or modified files before relying on them, and apply their organization's safety, security, and compliance requirements before deployment.
Github ReposUpdated 4h agoRank 70
AionUi
Free, local, open-source 24/7 Cowork app and OpenClaw for Gemini CLI, Claude Code, Codex, OpenCode, Qwen Code, Goose CLI, Auggie, and more | 🌟 Star if you like it!
MCPOPENCLAW
Github ReposUpdated 6mo agoRank 70
activepieces
AI Agents & MCPs & AI Workflow Automation • (~400 MCP servers for AI agents) • AI Automation / AI Agent with MCPs • AI Workflows & AI Agents • MCPs for AI Agents
OPENCLAW
Github ReposUpdated 6mo agoRank 70
cherry-studio
AI productivity studio with smart chat, autonomous agents, and 300+ assistants.
MCPOPENCLAW
Github ReposUpdated 7mo agoRank 70
CopilotKit
The Frontend for Agents & Generative UI. React + Angular
OPENCLAW
Machine-readable data
The same record, as JSON, for agents and crawlers.
{
"facts": [
{
"factKey": "vendor",
"category": "vendor",
"label": "Vendor",
"value": "Clawhub",
"href": "https://clawhub.ai/chouraycn/skills/beautiful-mermaid",
"sourceUrl": "https://clawhub.ai/chouraycn/skills/beautiful-mermaid",
"sourceType": "profile",
"confidence": "medium",
"observedAt": "2026-10-09T17:41:14.941Z",
"isPublic": true
},
{
"factKey": "protocols",
"category": "compatibility",
"label": "Protocol compatibility",
"value": "OpenClaw",
"href": "https://www.xpersona.co/api/v1/agents/clawhub-chouraycn-beautiful-mermaid/contract",
"sourceUrl": "https://www.xpersona.co/api/v1/agents/clawhub-chouraycn-beautiful-mermaid/contract",
"sourceType": "contract",
"confidence": "medium",
"observedAt": "2026-10-09T17:41:14.941Z",
"isPublic": true
},
{
"factKey": "traction",
"category": "adoption",
"label": "Adoption signal",
"value": "2.2K downloads",
"href": "https://clawhub.ai/chouraycn/beautiful-mermaid",
"sourceUrl": "https://clawhub.ai/chouraycn/beautiful-mermaid",
"sourceType": "profile",
"confidence": "medium",
"observedAt": "2026-10-09T17:41:14.941Z",
"isPublic": true
},
{
"factKey": "latest_release",
"category": "release",
"label": "Latest release",
"value": "1.0.0",
"href": "https://clawhub.ai/chouraycn/beautiful-mermaid",
"sourceUrl": "https://clawhub.ai/chouraycn/beautiful-mermaid",
"sourceType": "release",
"confidence": "medium",
"observedAt": "2026-03-28T04:26:55.689Z",
"isPublic": true
},
{
"factKey": "handshake_status",
"category": "security",
"label": "Handshake status",
"value": "UNKNOWN",
"href": "https://www.xpersona.co/api/v1/agents/clawhub-chouraycn-beautiful-mermaid/trust",
"sourceUrl": "https://www.xpersona.co/api/v1/agents/clawhub-chouraycn-beautiful-mermaid/trust",
"sourceType": "trust",
"confidence": "medium",
"observedAt": null,
"isPublic": true
}
],
"events": [
{
"eventType": "release",
"title": "Release 1.0.0",
"description": "Initial release of beautiful-mermaid. - Render Mermaid diagrams as SVG, PNG, or ASCII art with 6 chart types supported (flowchart, sequence, state, class, ER, XY charts). - Includes 16 built-in themes, 5 style presets, and supports full CSS-level customization. - Features an interactive preview tool (requires using preview_url before rendering, unless user opts out). - Batch rendering and rich HTML export with multi-diagram aggregation, theme inheritance, and metadata support. - Works in terminal, chat, and web environments. - Supports React integration and both synchronous/asynchronous rendering APIs.",
"href": "https://clawhub.ai/chouraycn/beautiful-mermaid",
"sourceUrl": "https://clawhub.ai/chouraycn/beautiful-mermaid",
"sourceType": "release",
"confidence": "medium",
"observedAt": "2026-03-28T04:26:55.689Z",
"isPublic": true
}
]
}Record generated Oct 9, 2026.