Visual Architecture Clawhub V180
Create deterministic, local-first architecture artifacts from typed JSON or TypeScript-aware repo extraction: validate specs, render SVG/HTML diagrams, and emit source-backed receipts agents can cite. Skill: Visual Architecture Clawhub V180 Owner: leostehlik Summary: Create deterministic, local-first architecture artifacts from typed JSON or TypeScript-aware repo extraction: validate specs, render SVG/HTML diagrams, and emit source-backed receipts agents can cite. Tags: agent:1.6.0, architecture:1.6.0, artifact-engine:1.6.0, diagram:1.6.0, diagrams:1.3.0, latest:1.8.0, openclaw:1.6.0, pr-delta:1.6.0, source-eviden
Rank
62
Safety
84
Downloads
1.4k
Updated
Oct 10, 2026
Version
1.8.0
Source
CLAWHUB
About
What it does, and when to use it.
Capability contract not published. No trust telemetry is available yet. 1.4K 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.4K downloadsadoption · observed Oct 10, 2026
- Latest release
- 1.8.0release · observed Sep 1, 2026
- Handshake status
- UNKNOWNsecurity
Install and run
Setup complexity: low.
clawhub skill install s1754kcncc002avbhpwjnqgcr98728et:visual-architecture- Setup complexity is classified as HIGH. You must provision dedicated cloud infrastructure or an isolated VM. Do not run this directly on your local workstation.
- Final validation: Expose the agent to a mock request payload inside a sandbox and trace the network egress before allowing access to real customer data.
Contract: missing
curl -s "https://www.xpersona.co/api/v1/agents/clawhub-leostehlik-visual-architecture/snapshot"
Documentation
CLAWHUB
160,000 characters of source documentation, loaded on request.
Extracted files
5 files captured from the source.
SKILL.md
---
name: visual-architecture
description: "Create deterministic, local-first architecture artifacts from typed JSON or TypeScript-aware repo extraction: validate specs, render SVG/HTML diagrams, and emit source-backed receipts agents can cite."
metadata:
version: "1.8.0"
---
# Visual Architecture
Create architecture artifacts with the bundled Python renderer instead of hand-writing SVG. v1.8 adds a public TypeScript-monorepo case study path on top of the v1.7 extraction engine: source-backed case-study docs, generated artifacts, README quick-starts, and gallery conversion proof.
Use this when the user needs a trustworthy system map, agent workflow, sequence, data-flow, lifecycle/state diagram, repo-evidence diagram, or PR delta review sketch that should stay local, deterministic, and reviewable.
## Workflow
1. Either extract a TypeScript-aware starter spec from a repo or create a JSON file with `mode`, `title`, `nodes`, and `edges`.
- Supported modes: `architecture`, `workflow`, `sequence`, `dataflow`, `lifecycle`, `pr-delta`.
- Supported themes: `classic` for documentation, `showcase` for README/release proof images.
2. Snap intended node positions to the renderer grid mentally before writing them:
- horizontal grid: 120px
- vertical grid: 80px
3. For repo-aware drafts, extract and layout first:
```bash
python3 skills/visual-architecture/scripts/render_architecture.py extract-repo . --output repo-map.json --title "Generated Repo Map"
python3 skills/visual-architecture/scripts/render_architecture.py layout repo-map.json repo-map.layout.json --mode architecture
```
4. Validate first:
```bash
python3 skills/visual-architecture/scripts/render_architecture.py validate input.json --json
```
5. Deliver the final artifact with a receipt:
```bash
python3 skills/visual-architecture/scripts/render_architecture.py deliver input.json output.html --json
```
Use `.svg` for a static docs artifact or `.html` for a self-contained presentation artifact.
For PR delta review, either extract a PR concern map from git refs or compare two specs:
```bash
python3 skills/visual-architecture/scripts/render_architecture.py extract-pr --base origin/master --head HEAD --output pr-delta.json
python3 skills/visual-architecture/scripts/render_architecture.py compare base.json head.json pr-delta.html --spec pr-delta.json --json
```
6. If `rsvg-convert` is available and you need a bitmap preview, run:
```bash
rsvg-convert -o output.png output.svg
```
## JSON Input Structure
```json
{
"title": "Service Map",
"mode": "architecture",
"theme": "classic",
"summary": "One local request path with async work and model access.",
"nodes": [
{
"id": "web",
"label": "Web App",
"subtitle": "User interface",
"kind": "service",
"x": 120,
"y": 160
},
{
"id": "api",
"label": "API",
"subtitle": "Business logic",
"kind": "service",
"x": 360,
"y": 160
}
],
"edges": [
README.md
# visual-architecture [](https://github.com/LeoStehlik/visual-architecture/actions/workflows/validate.yml) **Deterministic, local-first architecture artifacts for agents.** visual-architecture turns local repo evidence or typed JSON specs into SVG, self-contained HTML, share cards, receipts, and a generated Pages showcase. The v1.8 contract is stronger: agents can extract TypeScript monorepo structure, infer app/package/backend/frontend surfaces, attach confidence-scored evidence, lay it out deterministically, validate evidence quality, and publish a reviewable artifact bundle. The wedge against Archify is local-first proof: architecture artifacts that look intentional, cite their sources, explain PR deltas, and remain reproducible from a repo scan or checked JSON.  ## Visual Gallery Open the generated artifact site: **https://leostehlik.github.io/visual-architecture/** The gallery is the browsing surface: artifact rail, large diagram stage, story path, receipt quality, share cards, source evidence drilldown, and a public TypeScript-monorepo case study. The README stays as the product brief; the repo keeps the JSON specs, SVG/HTML artifacts, and receipts for audit. ## Public Case Study The current conversion artifact is a sanitized TypeScript monorepo map: client app, server app, editor extension, shared packages, backend modules, realtime gateway, database layer, and proof bundle. Open it in the gallery or inspect the checked files directly: ```bash python3 scripts/render_architecture.py deliver examples/showcase-typescript-monorepo-case-study.json /tmp/typescript-monorepo-case-study.html --json python3 scripts/render_architecture.py bundle examples/showcase-typescript-monorepo-case-study.json /tmp/typescript-monorepo-case-study --min-quality good ``` - Case-study notes: [`docs/public-typescript-monorepo-case-study.md`](docs/public-typescript-monorepo-case-study.md) - Spec: [`examples/showcase-typescript-monorepo-case-study.json`](examples/showcase-typescript-monorepo-case-study.json) - SVG: [`examples/showcase-typescript-monorepo-case-study.svg`](examples/showcase-typescript-monorepo-case-study.svg) - Receipt: [`examples/showcase-typescript-monorepo-case-study.html.receipt.json`](examples/showcase-typescript-monorepo-case-study.html.receipt.json) ## Why It Exists Agents are good at inventing diagrams and bad at proving what they just drew. visual-architecture gives them a narrow, deterministic path: 1. Author a compact JSON spec. 2. Validate supported modes, node kinds, edge kinds, endpoints, evidence fields, grid placement, and obvious route hazards. 3. Deliver SVG or HTML atomically. 4. Emit a JSON receipt with input/output SHA-256, byte counts, metrics, warnings, and validation result. The output stays local and deterministic, but no longer uses o
_meta.json
{
"ownerId": "kn7d3r58cdxk8k0xg6jq6k65gs873c0c",
"slug": "visual-architecture",
"version": "1.8.0",
"publishedAt": 1788223625918
}CHANGELOG.md
# Changelog ## v1.8.0 - Add a public TypeScript-monorepo case study that converts clone/API curiosity into a human-readable artifact path. - Add sanitized case-study notes covering client, server, editor extension, shared packages, backend modules, realtime gateway, database layer, and proof bundle surfaces. - Add checked generated case-study SVG, HTML, share card, receipts, and gallery/index entries. - Add README case-study quick-start commands for `deliver` and `bundle`. - Bump renderer and skill metadata to `1.8.0`. ## v1.7.0 - Ignore junk/build directories during repo extraction by default. - Prevent generated extractor edges from targeting missing nodes. - Detect workspace package/app surfaces from monorepo package metadata. - Add TS/TSX import scanning and per-package import summaries. - Detect client app, server app, editor extension, backend modules, realtime gateways, database layer, API client, and frontend feature surfaces. - Refresh generated public examples with the v1.7 extractor. - Validate the extractor against a private TypeScript monorepo without publishing private artifacts. ## v1.6.0 - Add language-aware repo extraction for Python, package metadata, workflows, schemas, examples, docs, and generated site files. - Add confidence-scored extraction metadata and source confidence metrics to validation receipts. - Improve PR delta extraction by grouping changed files into architecture concerns rather than raw filename buckets. - Tighten source-backed validation so generated evidence artifacts require evidence on every node and edge. - Upgrade the gallery evidence panel into an evidence drilldown that shows source type, confidence, and extraction rule. - Refresh generated repo and PR examples from the v1.6 extractor. ## v1.5.1 - Polish the generated Pages gallery artifact rail so the public showcase no longer exposes a native horizontal scrollbar. ## v1.5.0 - Add `extract-repo` to create a first source-backed architecture spec from local repository structure. - Add `layout` for deterministic mode-aware node placement without hand-authored coordinates. - Add `extract-pr` to group changed files into a generated PR delta review spec. - Add `bundle` to export HTML, SVG, share card, receipt, and bundle manifest together. - Add `--min-quality` gates for `deliver` and `bundle`. - Add generated repo evidence and PR delta examples to the public gallery. ## v1.4.0 - Add renderer v2 foundations: mode-specific backdrops for architecture, workflow, sequence, data-flow, lifecycle, and PR delta artifacts. - Add visual quality scoring to validation receipts for overlap, density, route crossings, spacing, and route complexity. - Add story-aware gallery data and an interactive evidence panel that loads checked spec/receipt JSON on GitHub Pages. - Add a real visual-architecture case-study artifact with source evidence pointing at the renderer, Makefile, README, and examples. - Tighten README/SKILL positioning around Archify-standard present
docs/clawhub-sync.md
# ClawHub Sync Checklist Publish to ClawHub only after the public repo state is green and the installable package is clean. ## Required Checks ```bash make validate grep -RInE "private-path|private-host|token-placeholder|client-name-placeholder" README.md SKILL.md CHANGELOG.md docs examples scripts schemas ``` Install smoke after publish must confirm: - `SKILL.md` reports the expected version - examples are present - `python3 scripts/render_architecture.py validate examples/service-map.json --json` exits 0 - no generated docs expose private local paths, private hosts, credentials, or internal runtime state ## Current State GitHub `v1.0.0` is the target public release for the full product ladder. ClawHub sync is allowed only if the publish bundle passes the checks above and the registry accepts the package cleanly.
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/leostehlik/skills/visual-architecture",
"sourceUrl": "https://clawhub.ai/leostehlik/skills/visual-architecture",
"sourceType": "profile",
"confidence": "medium",
"observedAt": "2026-10-10T14:27:02.393Z",
"isPublic": true
},
{
"factKey": "protocols",
"category": "compatibility",
"label": "Protocol compatibility",
"value": "OpenClaw",
"href": "https://www.xpersona.co/api/v1/agents/clawhub-leostehlik-visual-architecture/contract",
"sourceUrl": "https://www.xpersona.co/api/v1/agents/clawhub-leostehlik-visual-architecture/contract",
"sourceType": "contract",
"confidence": "medium",
"observedAt": "2026-10-10T14:27:02.393Z",
"isPublic": true
},
{
"factKey": "traction",
"category": "adoption",
"label": "Adoption signal",
"value": "1.4K downloads",
"href": "https://clawhub.ai/leostehlik/visual-architecture",
"sourceUrl": "https://clawhub.ai/leostehlik/visual-architecture",
"sourceType": "profile",
"confidence": "medium",
"observedAt": "2026-10-10T14:27:02.393Z",
"isPublic": true
},
{
"factKey": "latest_release",
"category": "release",
"label": "Latest release",
"value": "1.8.0",
"href": "https://clawhub.ai/leostehlik/visual-architecture",
"sourceUrl": "https://clawhub.ai/leostehlik/visual-architecture",
"sourceType": "release",
"confidence": "medium",
"observedAt": "2026-09-01T00:47:05.918Z",
"isPublic": true
},
{
"factKey": "handshake_status",
"category": "security",
"label": "Handshake status",
"value": "UNKNOWN",
"href": "https://www.xpersona.co/api/v1/agents/clawhub-leostehlik-visual-architecture/trust",
"sourceUrl": "https://www.xpersona.co/api/v1/agents/clawhub-leostehlik-visual-architecture/trust",
"sourceType": "trust",
"confidence": "medium",
"observedAt": null,
"isPublic": true
}
],
"events": [
{
"eventType": "release",
"title": "Release 1.8.0",
"description": "v1.8.0 public case-study conversion: sanitized TypeScript monorepo case study, generated artifacts, README quick-start, gallery entry, and proof-loop evidence.",
"href": "https://clawhub.ai/leostehlik/visual-architecture",
"sourceUrl": "https://clawhub.ai/leostehlik/visual-architecture",
"sourceType": "release",
"confidence": "medium",
"observedAt": "2026-09-01T00:47:05.918Z",
"isPublic": true
}
]
}Record generated Oct 10, 2026.
