Agent Skillstt-a1i/archify › archify

archify

GitHub

将架构、工作流等需求转化为高质量交互式HTML图表。支持Mermaid转换,具备严格验证与交付流程,适用于可视化系统结构、数据流及状态机。

archify/SKILL.md tt-a1i/archify

Trigger Scenarios

可视化系统架构或拓扑 生成或美化流程图/序列图 转换Mermaid代码为HTML

Install

npx skills add tt-a1i/archify --skill archify -g -y
More Options

Non-standard path

npx skills add https://github.com/tt-a1i/archify/tree/main/archify -g -y

Use without installing

npx skills use tt-a1i/archify@archify

指定 Agent (Claude Code)

npx skills add tt-a1i/archify --skill archify -a claude-code -g -y

安装 repo 全部 skill

npx skills add tt-a1i/archify --all -g -y

预览 repo 内 skill

npx skills add tt-a1i/archify --list

SKILL.md

Frontmatter
{
    "name": "archify",
    "license": "MIT",
    "metadata": {
        "author": "tt-a1i",
        "version": "2.13",
        "based_on": "Cocoon-AI\/architecture-diagram-generator (MIT, v1.0)"
    },
    "description": "Create polished, validated architecture, workflow, sequence, data-flow, and lifecycle\/state diagrams as explorable standalone HTML with inline SVG, dark\/light themes, optional trace motion, and PNG\/JPEG\/WebP\/SVG\/WebM export. Accept plain-language requirements or pasted Mermaid flowchart, sequenceDiagram, and stateDiagram input; inspect repository evidence when the diagram must reflect real code. Use when the user asks to visualize system architecture, infrastructure, cloud\/security\/network topology, technical workflows, API call sequences, request lifecycles, data pipelines, ETL\/ELT, data lineage, state machines, or to convert\/beautify Mermaid."
}

Archify

Create a self-contained, interactive HTML diagram from a small typed JSON specification. Static output is the default; enable motion only when the user asks for a demo or presentation.

Fast authoring path

Use this bounded path for ordinary generation. Do not read the optional Viewer Runtime reference unless the user asks about those features.

  1. Choose architecture, workflow, sequence, dataflow, or lifecycle from the question.

  2. Read one matching schema in schemas/, schemas/common.schema.json, and one matching JSON example in examples/. Read only those files. Fresh authorship means new stable IDs, domain wording, and layout; use the example for field shape, not facts.

  3. Artifact first: the next tool action must write the candidate. Write the candidate before inspecting renderer internals. Do not plan exact coordinates in prose. Start with one clear main path, short side branches, sparse labels, and at most 12 primary nodes. Set meta.quality_profile to "showcase" unless the user explicitly requests a dense standard map. Start with automatic routes and labels. Do not add via, channelX, channelY, or labelAt before a diagnostic calls for one; apply at most one diagnosed geometry control per repair.

  4. Validate after every candidate edit and immediately before handoff:

    node bin/archify.mjs validate <type> <candidate.json> --quality showcase --json
    

    A receipt with only 4 artifact checks is basic validation, never showcase acceptance. A showcase pass must report all 9 artifact checks with 0 composition errors and 0 warnings. If the candidate omits or misspells the exact meta.quality_profile field, fix it before geometry. A passing final validation freezes the candidate: never edit it afterward.

  5. For a delivered HTML, deliver is the final acceptance command:

    node bin/archify.mjs deliver <type> <candidate.json> <output.html> --quality showcase --json
    

    A non-zero exit can never be described as success. If validation fails, change only the diagnosed subject, verify evidence, choose from supportedFixes, and rerun. Continue focused correction while the objective error count reaches a new minimum. If two consecutive rounds do not improve that best count, stop and report the unresolved diagnostics truthfully.

Do not read renderers/shared/geometry.mjs, renderer source, validator source, tests, or benchmarks before the first candidate. Inspect implementation only for an unsupported internal diagnostic or after two focused repairs fail.

Lifecycle note: phase columns 0..4 occupy the main rail; event/outcome columns 0..2 align beneath later phases. A recoverable state uses type: "failure" plus a real transition back to the active state.

Type router

Type Use for
architecture Components, services, cloud/security boundaries, infrastructure
workflow Processes, approval gates, tool calls, runbooks, CI/CD
sequence API call chains, request lifecycles, async traces, returns
dataflow Pipelines, ETL/ELT, lineage, governance, consumers
lifecycle State/status transitions, retries, waiting and terminal states

When ambiguous, run node bin/archify.mjs guide "<scenario>" --json. Scenario proof examples are structural references, not facts to copy.

Mermaid input

Read Mermaid for topology and meaning, then author fresh Archify JSON; do not mechanically render Mermaid styling.

  • flowchart / graphworkflow, or architecture for a component map.
  • sequenceDiagramsequence; participants become semantic participants and arrows become messages.
  • stateDiagramlifecycle; states and transitions retain meaning, not Mermaid style.

Authoring invariants

  • One obvious main path; side branches leave the nearest main-path node. Remove low-value edges before adding routing controls.
  • Omit meta.legend for the truthful auto default. When needed, use only mode: auto|all|hidden and renderer-supported entries.<kind>.label|visible; labels never change semantics.
  • Component types are frontend, backend, database, cloud, security, messagebus, and external; variants are default, emphasis, security, and dashed.
  • Spacing means clear gap, not center distance. For a relationship label, clear gap must exceed its measured mask width; otherwise omit the label or move it deliberately.
  • Automatic routes own their endpoint sides. A side is a direction contract: the first and final segment must leave/enter perpendicular to that side.
  • Automatic Port Spread is a default renderer behavior for architecture, workflow, data-flow, and lifecycle. It skips single relationships and explicit via, channelX, channelY, labelAt, or non-auto routes. Near parallel ports use an outside bridge so automatic routing cannot create a sub-8px segment or sub-16px interior turn.
  • Never accept an edge crossing an unrelated opaque node, an ambiguous shared corridor, or a relationship label masking another route.

Read references/authoring-contract.md only when you need field enums, spacing math, geometry repair rules, repository evidence, or mode-specific placement.

Delivery

Use validate during repair and deliver once for final acceptance. Delivery freezes the exact specification bytes into a private same-directory snapshot, renders and checks that snapshot, atomically commits the HTML, and reports SHA-256 plus byte counts for both specification and artifact.

Add --open only when the user wants an immediate local preview. For an active desktop authoring loop, the optional command is:

node bin/archify.mjs preview <type> <input>.json <output>.html --quality showcase

Never start preview by default. Read references/delivery-contract.md when using preview, repository evidence, export receipts, visual review, or post-commit opening.

Optional viewer capabilities

Generated HTML already contains theme switching, pan/zoom, search, focus, relationship tracing, semantic views, presentation, and truthful exports. These are reader capabilities, not extra authoring work. meta.animation: "trace" is opt-in; meta.views is optional and should contain at most five curated chapters.

Read references/viewer-runtime.md only when the user explicitly asks for Share Cards, Route/Reach cards, motion, guided stories, deep links, presentation, search/focus, or another Viewer Runtime feature.

Setup and fallback

No install is required inside the skill package. Verify with:

node bin/archify.mjs doctor
node bin/archify.mjs demo <output-directory>

When shell access is unavailable, hand-place architecture SVG into assets/template.html, use CSS semantic classes rather than inline colors, and follow the visual review contract in references/delivery-contract.md.

Output

Return the checked HTML path, diagram type, validation summary, specification/artifact receipt, and truthful visual-review status. Do not claim success for a non-zero command or claim visual inspection you did not perform.

Version History

  • cc55764 Current 2026-08-03 08:54

    新增可配置的图例功能;修复输出稳定性并增强发布健壮性,兼容Node 18。

  • 7b49d0b 2026-07-31 07:11

    强化图表创作与交付流程,锁定展示级质量验收标准,优化普通模型生成的收敛性与初始质量,新增视觉风格选择器、编辑预设及Delta导航功能。

  • 0562a20 2026-07-23 00:20

    新增最后良好实时预览功能;支持将解析后的路由导出为分享卡片;强制清除关系标签冲突;优化共享自动端口分布;增加复制分享卡片功能;打开已验证交付物;添加就绪型图表卡片及原子化验证交付机制;允许读者实时尝试视觉风格;修复模糊关系走廊的拒绝逻辑。

  • ed0efcc 2026-07-19 18:26

    v2.11.0: 实现零安装部署,降低试用门槛;优化本地验证器集成,移除npm依赖要求,提升开箱即用体验。

  • fa7fbce 2026-07-05 14:59

Metadata

Files
0
Version
19213e1
Hash
4946d2fb
Indexed
2026-07-05 14:59

Home - Wiki
Copyright © 2011-2026 iteam. Current version is 2.155.2. UTC+08:00, 2026-08-05 15:19
浙ICP备14020137号-1 $Map of visitor$