PaintForge turns plain-language requirements, Mermaid input, or repository evidence into validated, interactive standalone HTML diagrams.
Install & Download
1. ClawHub CLI
The fastest way to install a skill directly from the registry.
npx clawhub@latest install paintforge
2. Manual Installation
Copy the skill folder to one of these locations
~/.openclaw/skills/ <project>/skills/ Priority: Workspace > Local > Bundled
3. Prompt Installation
Copy this prompt to OpenClaw to install it automatically.
Help me install paintforge using Clawhub. If Clawhub is not installed, install it first (npm i -g clawhub).
Prefer to download?
Get the raw skill files in a ZIP archive.
What is PaintForge?
PaintForge is an Openclaw Skills diagram-generation tool for creating polished, self-contained HTML visualizations with inline SVG, responsive desktop layouts, dark and light themes, pan and zoom, search, relationship tracing, and optional motion. It accepts natural-language requirements or pasted Mermaid topology and converts them into fresh, typed JSON specifications rather than mechanically copying Mermaid styling.
The skill supports 16 diagram types, including architecture, workflow, sequence, dataflow, lifecycle, ER, dependency, organization, mind map, flowchart, network, matrix, kanban, Venn, Gantt, and Sankey diagrams. Every candidate is validated before delivery, with deterministic artifact receipts, SHA-256 hashes, export support, and truthful reporting of browser and visual-review evidence. This makes PaintForge a reliable choice among Openclaw Skills for technical documentation, system communication, and presentation-ready engineering visuals.
PaintForge Use Cases
- Visualize software architecture, cloud infrastructure, security boundaries, and service relationships.
- Document workflows, approval gates, CI/CD processes, runbooks, and operational procedures.
- Illustrate API call chains, asynchronous traces, request lifecycles, and response paths.
- Map data pipelines, ETL/ELT processes, data lineage, governance, and downstream consumers.
- Model state machines, retries, waiting states, failures, and terminal lifecycle states.
- Design database schemas with entities, primary keys, foreign keys, and cardinality.
- Explore module dependencies, package imports, runtime relationships, and organization structures.
- Create brainstorming mind maps, process flowcharts, priority matrices, kanban boards, timelines, and quantity-flow diagrams.
- Convert or beautify Mermaid flowcharts, sequence diagrams, and state diagrams into validated PaintForge specifications.
- Generate presentation-ready technical diagrams with searchable content, theme switching, and PNG, JPEG, WebP, SVG, or WebM export capabilities.
How PaintForge Works
- Interpret the request and select the appropriate diagram type. When the scenario is ambiguous, use the PaintForge guide command to identify the best type.
- Read only the matching schema, common schema, and one relevant example. Use examples for field shape rather than copying their facts, and create fresh stable IDs and domain-specific wording.
- Author a typed JSON candidate before inspecting renderer internals. Start with one clear main path, concise labels, sparse side branches, and no more than 12 primary nodes unless the use case requires additional density.
- Set
schema_version: 2for new workflow diagrams, preserving version 1 only when maintaining legacy fixed geometry. Use automatic routes and labels first, adding geometry controls only when diagnostics require them. - Run showcase validation after every candidate edit and immediately before handoff. A valid showcase receipt must include all nine artifact checks, zero composition errors, zero warnings, and the exact
meta.quality_profilevalue ofshowcase. - Diagnose failures using the reported subject, evidence, and supported fixes. Apply focused repairs one at a time, preserving semantic relationship labels and avoiding unsupported geometry changes.
- Run the final
delivercommand to freeze the exact specification bytes, render the HTML, perform deterministic checks, atomically commit the artifact, and produce specification and artifact hashes and byte counts. - Optionally run
visual-checkagainst the exact delivered HTML for bounded browser evidence. Keep deterministic delivery, browser behavior, and human perceptual review as separate claims. - Return the checked HTML path, diagram type, validation summary, artifact receipts, browser-evidence status, and truthful visual-review status.
PaintForge Setup
No package installation is required inside the PaintForge skill directory. Verify the runtime and generate demo artifacts with:
node bin/paintforge.mjs doctor
node bin/paintforge.mjs demo <output-directory>
For ordinary authoring, create a typed JSON specification and validate it with the selected diagram type:
node bin/paintforge.mjs validate <type> <candidate.json> --quality showcase --json
For workflow v2 geometry diagnostics, request the layout receipt:
node bin/paintforge.mjs validate workflow <candidate.json> --layout-json
Deliver an accepted specification as standalone HTML:
node bin/paintforge.mjs deliver <type> <candidate.json> <output.html> --quality showcase --json
Collect browser evidence without changing the trusted HTML:
node bin/paintforge.mjs visual-check <output.html> --json
Use an optional local preview only when requested:
node bin/paintforge.mjs preview <type> <input>.json <output>.html --quality showcase
When real product identity matters, query built-in brand metadata:
node bin/paintforge.mjs brands "<name>" --json
For an unknown brand with an official user-provided URL, capture a digest-pinned brand object before authoring:
node bin/paintforge.mjs brands capture "<url>" --json
If shell access is unavailable, place architecture SVG into assets/template.html and use semantic CSS classes instead of inline colors.
PaintForge Data Schema & Taxonomy
PaintForge organizes diagram input as a typed JSON specification plus renderer-generated HTML and evidence receipts.
| Data area | Purpose |
|---|---|
type |
Selects one of 16 diagram families: architecture, workflow, sequence, dataflow, lifecycle, ER, dependency, org, mindmap, flowchart, network, matrix, kanban, Venn, Gantt, or Sankey. |
schema_version |
Identifies the specification contract; new workflows use version 2, while version 1 is retained for legacy fixed geometry. |
meta |
Stores quality profile, optional locale, viewBox, animation, views, legend, visual preset, engineering profile, and other renderer metadata. |
| Nodes and entities | Represent components, participants, states, tasks, records, cards, milestones, or other domain objects using stable IDs and semantic labels. |
| Relationships | Capture transitions, messages, dependencies, links, routes, quantities, protocols, actions, and meaningful directionality. |
| Layout data | Uses automatic routing by default, with optional via, channelX, channelY, and labelAt controls applied only when diagnostics justify them. |
| Brand data | Uses canonical built-in IDs or digest-pinned captures; brands are never inferred from generic roles such as database or cloud. |
| Output artifact | A self-contained HTML file containing inline SVG, viewer controls, theme support, semantic views, and truthful export functionality. |
| Validation receipt | Records artifact checks, composition errors, warnings, verification status, and quality-profile results. Network diagrams report verification: skipped because their force-directed geometry is not pixel-verified. |
| Delivery receipt | Includes specification and artifact byte counts, SHA-256 hashes, deterministic acceptance information, and atomic commit status. |
| Browser evidence | visual-check produces machine-readable measurements and screenshots without modifying or rerendering the delivered HTML. |
The metadata taxonomy separates authored semantics from viewer behavior. For example, meta.animation: "trace" enables optional motion, while theme switching, pan and zoom, search, focus, presentation, relationship tracing, and exports are built-in reader capabilities.
PaintForge Advanced Features
- Supports 16 specialized diagram types, including architecture, sequence, lifecycle, ER, dependency, network, matrix, kanban, Gantt, and Sankey visualizations.
- Converts Mermaid flowcharts, sequence diagrams, and state diagrams into fresh PaintForge JSON while preserving topology and meaning rather than Mermaid styling.
- Provides schema-driven authoring with stable IDs, semantic relationship labels, automatic routes, port spreading, and diagnosed geometry repairs.
- Generates responsive standalone HTML for laptops and large desktop displays while preserving authored SVG proportions and viewBox geometry.
- Includes independent light and dark themes, optional visual presets, searchable semantic views, focus and relationship tracing, presentation support, and curated viewer chapters.
- Offers optional trace animation through
meta.animation: "trace"and up to five curated chapters throughmeta.views. - Supports truthful exports to PNG, JPEG, WebP, SVG, and WebM from the generated viewer.
- Supports canonical product branding and digest-pinned custom brand capture without unpinned renderer-time downloads.
- Provides deterministic delivery with frozen specification bytes, atomic HTML commits, SHA-256 receipts, and byte counts.
- Separates artifact validation, real-browser evidence, and human perceptual review so Openclaw Skills workflows do not overclaim quality.
- Includes focused diagnostics and supported repair guidance, with an objective minimum-error workflow and an explicit stop condition when repairs no longer improve results.
- Handles localization through authored-language selection and supported viewer locales such as
enandzh-CN, while preserving exact product names, commands, protocols, API paths, and environment names.
SKILL.md
Loading
Related Openclaw Skills
Fund Portfolio Holdings Penetration Analysis
Use Cue to look through public fund portfolios, uncover hidden holdings overlap, and identify concentration risks across stocks, sectors, and investment styles.
Xiaohongshu Opportunity Research
A Node.js research skill that turns public Xiaohongshu and RedNote data into actionable insights for content opportunities, competitor monitoring, KOL screening, and market research.
PM Master - Project & Program Management
PM Master turns project and program management into a governed, repeatable workflow that generates verified planning, execution, monitoring, and closeout artifacts.
SEO Data
SEO Data gives AI agents live search intelligence, keyword metrics, competitor analysis, backlink research, page audits, and AI visibility data through a synchronous API.
Mellow Hub
Mellow Hub lets AI agents safely validate, publish, schedule, and monitor social media posts across major networks through MCP or REST.
詹明明·从哪儿下手 (zmm-path)
zmm-path transforms an unclear ambition into one measurable goal, one confirmed bottleneck, a costed path, and a concrete action you can complete today.
Featured*
