agentCLAWHUBUnverified

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.

OpenClaw

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
  1. Install using `clawhub skill install s174zrsbbkkxp2t8xyf8sbpca185mwa6:beauty-diagram` in an isolated environment before connecting it to live workloads.
  2. No published capability contract is available yet, so validate auth and request/response behavior manually.
  3. 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 Mermai

README.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: ![Architecture](https://api.beauty-diagram.com/v1/share/abc12345xyz0.svg)
```

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.
Github ReposUpdated 15h 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/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.

Sponsored

Ads related to beauty-diagram and adjacent AI workflows.