beauty-diagram
Use when the user asks for a sleek, modern Mermaid / PlantUML diagram (e.g. "beautify this flowchart", "make this look like a deck slide", "produce an SVG of this architecture"), wants AI to generate a diagram from a text description, wants a public share link for a diagram, wants to render every diagram file in a folder, or wants to render Mermaid / PlantUML fenced code blocks inside a Markdown file (README, docs) into images. This skill teaches you to call the Beauty Diagram CLI (`bd`) — never to hand-author SVG when a source diagram exists.
Rank
62
Safety
84
Downloads
1.6k
Updated
Oct 10, 2026
Version
1.7.0
Source
CLAWHUB
About
What it does, and when to use it.
Capability contract not published. No trust telemetry is available yet. 1.6K downloads reported by the source. Last updated 10/10/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 10, 2026
- Protocol compatibility
- OpenClawcompatibility · observed Oct 10, 2026
- Adoption signal
- 1.6K downloadsadoption · observed Oct 10, 2026
- Latest release
- 1.7.0release · observed Aug 4, 2026
- Handshake status
- UNKNOWNsecurity
Install and run
Setup complexity: low.
clawhub skill install s174zrsbbkkxp2t8xyf8sbpca185mwa6:beauty-diagram- Install using `clawhub skill install s174zrsbbkkxp2t8xyf8sbpca185mwa6:beauty-diagram` 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/levi840714/beauty-diagram before using production credentials.
Contract: missing
curl -s "https://www.xpersona.co/api/v1/agents/clawhub-levi840714-beauty-diagram/snapshot"
Documentation
CLAWHUB
143,901 characters of source documentation, loaded on request.
Extracted files
5 files captured from the source.
SKILL.md
---
name: beauty-diagram
description: Use when the user asks for a sleek, modern Mermaid / PlantUML diagram (e.g. "beautify this flowchart", "make this look like a deck slide", "produce an SVG of this architecture"), wants AI to generate a diagram from a text description, wants a public share link for a diagram, wants to render every diagram file in a folder, or wants to render Mermaid / PlantUML fenced code blocks inside a Markdown file (README, docs) into images. This skill teaches you to call the Beauty Diagram CLI (`bd`) — never to hand-author SVG when a source diagram exists.
version: 1.7.0
metadata:
openclaw:
requires:
bins:
- node
- npx
---
# Beauty Diagram skill
Beauty Diagram beautifies Mermaid / PlantUML diagrams into
sleek, modern SVG or PNG. It runs as a public API; this skill
delegates to the `bd` CLI (npm package `@beauty-diagram/cli`) so you
keep zero state in the agent. (draw.io / SVG import is editor-only —
not exposed through `/v1/*`.)
## When to use
- The user asks for a **polished, professional, slide-ready** version of a
diagram source they already have or you can generate.
- The user wants you to **render Mermaid or PlantUML** from a model-generated
source string.
- The user wants the server to **generate a diagram from a text description**
("draw me a signup flow", "diagram our deploy pipeline") — use
`bd ai generate` for this; it returns Mermaid source you then beautify.
- The user wants to **share a diagram link** (e.g. paste into Slack / a doc).
- The user has Mermaid in a repo (README, ADR, RFC) and wants to **export
SVGs** alongside.
- The user has a **directory full of diagram source files** and wants every one
of them rendered (e.g. "render all the .mmd files in docs/diagrams"). Use
`bd batch`.
- The user wants their **Markdown files (README, ADR, blog post) to display the
diagrams inline** on GitHub / their static site, not just show the source
code block. Use `bd extract` — three modes available:
- **Default (inline)**: no flags. Injects `/v1/beautify.svg?source=...` URLs
after each fence. No API calls during extract, no files written, no quota
consumed. Always watermarked (anonymous endpoint).
- **Share (`--share`)**: mints a `/v1/share/<token>.svg` URL per unique fence.
**Watermark-free for Pro/Premium**. Requires an API key. Each unique
source consumes 1 share quota the first time; identical fences are
deduplicated; per-owner local cache means re-runs cost zero quota.
- **Sidecar (`--assets-dir ./img`)**: writes local SVG files via `/v1/export`.
Watermark-free for Pro/Premium, consumes export quota.
GitHub strips raw inline `<svg>`, so any of these modes' ``
reference is the correct embed strategy.
## When NOT to use
- The user only wants the Mermaid source itself, not an export.
- The user wants pixel-precise control over the SVG markup (Beauty Diagram
rewrites layout for presentation; it does not preserve raw MermaiREADME.md
# Beauty Diagram skill Turn Mermaid / PlantUML source into sleek, modern SVG or PNG — straight from your agent. This skill teaches Claude (or any compatible agent) to call the [`bd` CLI](https://www.npmjs.com/package/@beauty-diagram/cli) instead of hand-authoring SVG, so you get consistent, slide-quality diagrams without leaving the conversation. ## What it does - Beautifies existing Mermaid / PlantUML files into polished SVG/PNG - Renders model-generated diagram source on demand - **Generates a diagram from a text prompt** via `bd ai generate` (Pro / Premium plans only) - Produces shareable `https://www.beauty-diagram.com/s/...` links - **Generates direct embed URLs** for README / Notion / blog use: runs `bd share` and returns `https://api.beauty-diagram.com/v1/share/<id>.svg` rather than emitting raw Mermaid — the URL works as a plain `<img src>` anywhere that renders images. Anonymous (watermarked) embeds are also available via `bd embed-url` with no sign-in required. - Surfaces actionable error codes (`quota_exhausted`, `parse_failed`, `prompt_injection`, …) instead of silently retrying ## Requirements - **Node.js** (for `npx @beauty-diagram/cli`); no global install needed - **Optional**: a Beauty Diagram API key for unwatermarked output, share links, and higher quotas — anonymous demo mode works out of the box (1 export per IP per 24h) - **For AI generation**: an API key with the `ai:write` scope on a Pro or Premium plan. Anonymous and free plans cannot call `bd ai generate`. Get a key at <https://www.beauty-diagram.com/account/api-keys>. ## Triggering The skill activates when a user asks for things like: - "beautify this flowchart" - "make this Mermaid diagram look like a deck slide" - "give me an SVG of this architecture" - "draw me a diagram of the signup flow" - "share this diagram as a link" ## Example ``` You: Here's our service flow in Mermaid — make it slide-ready and give me a share link. Agent (uses skill): $ bd beautify flow.mmd --theme modern --out flow.svg $ bd share flow.mmd --title "Service flow" → https://www.beauty-diagram.com/s/abc123 ``` ``` You: Draw me a deploy pipeline diagram and beautify it. Agent (uses skill, Pro plan): $ bd ai generate "deploy pipeline with build, test, staging, prod" --out deploy.mmd $ bd beautify deploy.mmd --out deploy.svg → wrote deploy.mmd (editable) + deploy.svg (presentation) ``` ``` You: Add this architecture diagram to my README as an embedded image. Agent (uses skill, Pro/Premium plan): $ bd embed-url ./architecture.mmd --share → https://api.beauty-diagram.com/v1/share/abc12345xyz0.svg Injects into README:  ``` See `examples/` for runnable diagram sources and `scripts/` for shell wrappers you can drop into a repo. ## Source-level directives Both the `bd` CLI and the Obsidian plugin support `bd:KEY=VALUE` directives embedded at the **start of your diagram source**
_meta.json
{
"ownerId": "kn727br5w8gyw9x95hd4cs66ss85nwcg",
"slug": "beauty-diagram",
"version": "1.7.0",
"publishedAt": 1785834559687
}CHANGELOG.md
# Changelog All notable changes to the `beauty-diagram` skill are documented here. ## [1.6.1] - 2026-06-16 ### Changed: `bd:bg` now documents the full `white` / `dark` / `transparent` set - The `bg` directive previously documented `transparent` as the only honoured value. It now documents the full set the CLI and API accept — `theme` (default), `white`, `dark` (the diagram's ink is hue-lifted so edges and labels stay legible), and `transparent` — so the skill suggests the right value. Unknown values fall back to `theme`.
skill-card.md
## Description: Guides agents to use the Beauty Diagram CLI to generate, beautify, export, share, and embed Mermaid or PlantUML diagrams as polished SVG or PNG outputs. This skill is ready for commercial/non-commercial use. ## Publisher: [levi840714](https://clawhub.ai/user/levi840714) ### License/Terms of Use: MIT-0 ## Use Case: Developers, technical writers, and agents use this skill to turn Mermaid or PlantUML source into presentation-ready diagram files, share links, or Markdown embeds. It also guides optional text-to-diagram generation through the Beauty Diagram CLI when the user has the required plan and API scope. ### Deployment Geography for Use: Global ## Known Risks and Mitigations: Risk: The scripts invoke an unpinned npm CLI, so behavior could change when `npx @beauty-diagram/cli` resolves a newer package. Mitigation: Pin or lock the `@beauty-diagram/cli` version before use and review package updates before adopting them. Risk: Share and share-embed workflows can publish diagrams to public external URLs. Mitigation: Ask for explicit approval before creating hosted URLs, and prefer local sidecar SVG output for private repositories or sensitive diagrams. Risk: Diagram sources or prompts are sent to Beauty Diagram when workflows call the public API. Mitigation: Use the skill only with content suitable for Beauty Diagram processing and run the CLI with least privilege in workspaces that may contain secrets. ## Reference(s): - [ClawHub skill page](https://clawhub.ai/levi840714/skills/beauty-diagram) - [Beauty Diagram site](https://www.beauty-diagram.com) - [Beauty Diagram CLI on npm](https://www.npmjs.com/package/@beauty-diagram/cli) - [Beauty Diagram API keys](https://www.beauty-diagram.com/account/api-keys) ## Skill Output: **Output Type(s):** [text, markdown, code, shell commands, configuration, guidance] **Output Format:** [Markdown guidance with shell commands, Mermaid or PlantUML source, file paths, and generated SVG/PNG or share/embed URL references] **Output Parameters:** [1D] **Other Properties Related to Output:** [May produce local .mmd, .puml, .svg, or .png files and public Beauty Diagram share/embed URLs depending on the selected workflow.] ## Skill Version(s): 1.7.0 (source: ClawHub release, SKILL.md frontmatter, package.json; CHANGELOG top entry is 1.6.1) ## 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.
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!
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
cherry-studio
AI productivity studio with smart chat, autonomous agents, and 300+ assistants.
CopilotKit
The Frontend for Agents & Generative UI. React + Angular
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/levi840714/skills/beauty-diagram",
"sourceUrl": "https://clawhub.ai/levi840714/skills/beauty-diagram",
"sourceType": "profile",
"confidence": "medium",
"observedAt": "2026-10-10T07:09:11.055Z",
"isPublic": true
},
{
"factKey": "protocols",
"category": "compatibility",
"label": "Protocol compatibility",
"value": "OpenClaw",
"href": "https://www.xpersona.co/api/v1/agents/clawhub-levi840714-beauty-diagram/contract",
"sourceUrl": "https://www.xpersona.co/api/v1/agents/clawhub-levi840714-beauty-diagram/contract",
"sourceType": "contract",
"confidence": "medium",
"observedAt": "2026-10-10T07:09:11.055Z",
"isPublic": true
},
{
"factKey": "traction",
"category": "adoption",
"label": "Adoption signal",
"value": "1.6K downloads",
"href": "https://clawhub.ai/levi840714/beauty-diagram",
"sourceUrl": "https://clawhub.ai/levi840714/beauty-diagram",
"sourceType": "profile",
"confidence": "medium",
"observedAt": "2026-10-10T07:09:11.055Z",
"isPublic": true
},
{
"factKey": "latest_release",
"category": "release",
"label": "Latest release",
"value": "1.7.0",
"href": "https://clawhub.ai/levi840714/beauty-diagram",
"sourceUrl": "https://clawhub.ai/levi840714/beauty-diagram",
"sourceType": "release",
"confidence": "medium",
"observedAt": "2026-08-04T09:09:19.687Z",
"isPublic": true
},
{
"factKey": "handshake_status",
"category": "security",
"label": "Handshake status",
"value": "UNKNOWN",
"href": "https://www.xpersona.co/api/v1/agents/clawhub-levi840714-beauty-diagram/trust",
"sourceUrl": "https://www.xpersona.co/api/v1/agents/clawhub-levi840714-beauty-diagram/trust",
"sourceType": "trust",
"confidence": "medium",
"observedAt": null,
"isPublic": true
}
],
"events": [
{
"eventType": "release",
"title": "Release 1.7.0",
"description": "inline",
"href": "https://clawhub.ai/levi840714/beauty-diagram",
"sourceUrl": "https://clawhub.ai/levi840714/beauty-diagram",
"sourceType": "release",
"confidence": "medium",
"observedAt": "2026-08-04T09:09:19.687Z",
"isPublic": true
}
]
}Record generated Oct 10, 2026.
