Skip to content

domain-skills: add mermaid.live render & validate skill#400

Open
MatheusGSD wants to merge 1 commit into
browser-use:mainfrom
MatheusGSD:domain-skills/mermaid-live-render
Open

domain-skills: add mermaid.live render & validate skill#400
MatheusGSD wants to merge 1 commit into
browser-use:mainfrom
MatheusGSD:domain-skills/mermaid-live-render

Conversation

@MatheusGSD
Copy link
Copy Markdown

@MatheusGSD MatheusGSD commented Jun 1, 2026

Adds domain-skills/mermaid.live/render.md.

What it captures (non-obvious):

  • mermaid.live state lives in the URL hash as #pako:<data> where <data> is the editor-state JSON zlib-deflated then URL-safe base64 — plain base64 gives a blank editor. Includes a 6-line Python builder (the harness already runs Python).
  • How to confirm a parse/render headlessly (no screenshot, no local mermaid CLI): poll the DOM for an injected svg#graph-* with many <g> nodes vs a syntax-error string. Useful right after editing any file that embeds Mermaid.

Field-tested rendering two diagrams from a docs repo (one with subgraphs + node→subgraph edges + dotted labels; SVG came back with 136 <g> nodes, syntaxErr:false).

🤖 Generated with Claude Code


Summary by cubic

Adds a new domain-skills/mermaid.live/render.md skill that explains how to render and validate Mermaid diagrams in mermaid.live via the #pako: URL hash. Enables headless parse checks without screenshots or the Mermaid CLI.

  • New Features
    • Documents the #pako: hash format for mermaid.live (zlib-deflated, URL-safe base64 editor state JSON; plain base64 yields a blank editor).
    • Includes a small Python helper to build the URL and notes a short post-load wait for client-side render.
    • Describes a DOM-based check to confirm parse success (look for svg#graph-* with many <g> nodes or detect syntax error text).

Written for commit 51f0075. Summary will update on new commits.

Review in cubic

How to render arbitrary Mermaid via the mermaid.live #pako: URL (zlib-deflate + URL-safe base64, NOT plain base64) and confirm a parse/render headlessly via the DOM (svg#graph-* with many <g> nodes vs syntax-error text) — no screenshot or local mermaid CLI needed.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
@browser-harness-review
Copy link
Copy Markdown

✅ Skill review passed

Reviewed 1 file(s) — no findings.

Copy link
Copy Markdown
Contributor

@cubic-dev-ai cubic-dev-ai Bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

No issues found across 1 file

Re-trigger cubic

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant