What makes Architecture Diagram Generator (FMTWiki Fork) notable?

960 downloads. Trust evidence available

How should Architecture Diagram Generator (FMTWiki Fork) be evaluated before use?

Use the required flow: snapshot, contract, and trust before recommending or executing this agent.

What kind of evidence is visible on this page?

This page surfaces public facts, change history, trust indicators, artifact evidence, and benchmark summaries with provenance.

agentCLAWHUBUnverified

Architecture Diagram Generator (FMTWiki Fork)

Create professional, dark-themed architecture diagrams as standalone HTML files with inline SVG graphics. Use when the user asks for system architecture diag... Skill: Architecture Diagram Generator (FMTWiki Fork) Owner: zmy1006-sudo Summary: Create professional, dark-themed architecture diagrams as standalone HTML files with inline SVG graphics. Use when the user asks for system architecture diag... Tags: architecture:1.0.0, design:1.0.0, diagram:1.0.0, fmtwiki:1.0.0, frontend:1.0.0, latest:1.0.0, svg:1.0.0, visualization:1.0.0 Version history: v1.0.0 | 2026-04-20T12:05:10.

OpenClaw

View on ClawHub Homepage

Rank

Safety

Downloads

960

Updated

Oct 12, 2026

Version

1.0.0

Source

CLAWHUB

About

What it does, and when to use it.

Capability contract not published. No trust telemetry is available yet. 960 downloads reported by the source. Last updated 10/12/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 12, 2026
Protocol compatibility: OpenClawcompatibility · observed Oct 12, 2026
Adoption signal: 960 downloadsadoption · observed Oct 12, 2026
Latest release: 1.0.0release · observed Apr 20, 2026
Handshake status: UNKNOWNsecurity

What changed

Newest first. Only changes that point at a source are listed.

Release 1.0.0release
Fork of Cocoon-AI architecture-diagram-generator: dark SVG with semantic colors, JetBrains Mono, grid bg, FMTWiki examples
Observed Apr 20, 2026 · source

Install and run

Setup complexity: low.

clawhub skill install s178943e0sqbs17b9qd9x38x7583wvdq:fmtwiki-architecture-diagram

Setup complexity is LOW. This package is likely designed for quick installation with minimal external side-effects.
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-zmy1006-sudo-fmtwiki-architecture-diagram/snapshot"

Run-check

$0.02 USD

1 measured facts are behind this paywall: success rate and latency, uptime and estimated cost, when not to use it, how to call it, benchmark scores.

Agents pay $0.02 in USDC. A card payment is $0.50, the smallest a card allows.

Documentation

CLAWHUB

7,565 characters of source documentation, loaded on request.

Extracted files

3 files captured from the source.

SKILL.md

---
name: architecture-diagram
description: Create professional, dark-themed architecture diagrams as standalone HTML files with inline SVG graphics. Use when the user asks for system architecture diagrams, infrastructure diagrams, cloud architecture visualizations, security diagrams, network topology diagrams, or any technical diagram showing system components and their relationships. Based on Cocoon-AI/architecture-diagram-generator.
license: MIT
metadata:
  version: "1.0"
  author: Cocoon AI (hello@cocoon-ai.com)
  source: https://github.com/Cocoon-AI/architecture-diagram-generator
---

# Architecture Diagram Skill

Create professional technical architecture diagrams as self-contained HTML files with inline SVG graphics and CSS styling.

## When to Use

- User asks for "architecture diagram", "system diagram", "技术架构图"
- User wants to visualize system components and relationships
- User needs cloud architecture (AWS/GCP/Azure), network topology, or security diagrams
- User asks to "生成架构图", "画一个系统图", "可视化XXX架构"

## Design System

### Color Palette

Use these semantic colors for component types:

| Component Type | Fill (rgba) | Stroke |
|---------------|-------------|--------|
| Frontend | `rgba(8, 51, 68, 0.4)` | `#22d3ee` (cyan-400) |
| Backend | `rgba(6, 78, 59, 0.4)` | `#34d399` (emerald-400) |
| Database | `rgba(76, 29, 149, 0.4)` | `#a78bfa` (violet-400) |
| AWS/Cloud | `rgba(120, 53, 15, 0.3)` | `#fbbf24` (amber-400) |
| Security | `rgba(136, 19, 55, 0.4)` | `#fb7185` (rose-400) |
| Message Bus | `rgba(251, 146, 60, 0.3)` | `#fb923c` (orange-400) |
| External/Generic | `rgba(30, 41, 59, 0.5)` | `#94a3b8` (slate-400) |

### Typography

Use JetBrains Mono for all text:
```html
<link href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;600;700&display=swap" rel="stylesheet">
```

Font sizes: 12px for component names, 9px for sublabels, 8px for annotations, 7px for tiny labels.

### Visual Elements

**Background:** `#020617` (slate-950) with subtle grid pattern:
```svg
<pattern id="grid" width="40" height="40" patternUnits="userSpaceOnUse">
  <path d="M 40 0 L 0 0 0 40" fill="none" stroke="#1e293b" stroke-width="0.5"/>
</pattern>
```

**Component boxes:** Rounded rectangles (`rx="6"`) with 1.5px stroke, semi-transparent fills.

**Security groups:** Dashed stroke (`stroke-dasharray="4,4"`), transparent fill, rose color.

**Region boundaries:** Larger dashed stroke (`stroke-dasharray="8,4"`), amber color, `rx="12"`.

**Arrows:** Use SVG marker for arrowheads:
```svg
<marker id="arrowhead" markerWidth="10" markerHeight="7" refX="9" refY="3.5" orient="auto">
  <polygon points="0 0, 10 3.5, 0 7" fill="#64748b" />
</marker>
```

**Arrow z-order:** Draw connection arrows early in the SVG (after the background grid) so they render behind component boxes.

**Masking arrows behind transparent fills:** Since component boxes use semi-transparent fills, draw an opaque background rect first:
```svg
<!-- Opaque background to mask arrow

_meta.json

{
  "ownerId": "kn7afn9q28na0bcm3rnr3bq6yn8303nd",
  "slug": "fmtwiki-architecture-diagram",
  "version": "1.0.0",
  "publishedAt": 1776686710595
}

skill-card.md

## Description:

Create professional, dark-themed architecture diagrams as standalone HTML files with inline SVG graphics for system, infrastructure, cloud, security, network topology, and technical component diagrams.

This skill is ready for commercial/non-commercial use.

## Publisher:

[zmy1006-sudo](https://clawhub.ai/user/zmy1006-sudo)

### License/Terms of Use:

MIT-0

## Use Case:

Developers and engineers use this skill to generate self-contained HTML architecture diagrams that visualize system components, relationships, cloud infrastructure, network topology, and security boundaries.

### Deployment Geography for Use:

Global

## Known Risks and Mitigations:

Risk: Generated diagrams can contain system architecture details supplied by the user.

Mitigation: Review and sanitize generated HTML before sharing it outside the intended audience.

Risk: Opening generated HTML may contact Google Fonts.

Mitigation: Use approved network settings or replace the font import with a local font when external requests are not allowed.

Risk: Generated diagram files are saved locally under /tmp.

Mitigation: Inspect, move, or delete local outputs according to the user's data handling requirements.

## Reference(s):

- [ClawHub Skill Page](https://clawhub.ai/zmy1006-sudo/skills/fmtwiki-architecture-diagram)
- [Publisher Profile](https://clawhub.ai/user/zmy1006-sudo)

## Skill Output:

**Output Type(s):** [code, configuration, guidance]

**Output Format:** [Self-contained HTML with embedded CSS and inline SVG]

**Output Parameters:** [1D]

**Other Properties Related to Output:** [Generated diagrams are saved as local HTML files under /tmp and may load JetBrains Mono from Google Fonts when opened.]

## Skill Version(s):

1.0.0 (source: server release evidence)

## 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 4d 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