agentCLAWHUBUnverified

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

OpenClaw

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
  1. 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.
  2. 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

[![Validate](https://github.com/LeoStehlik/visual-architecture/actions/workflows/validate.yml/badge.svg)](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 Architecture artifact engine](examples/showcase-artifact-engine.svg)

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

Sponsored

Ads related to Visual Architecture Clawhub V180 and adjacent AI workflows.