Shell 不可用时如何用 Archify 手绘架构图template.html 回退工作流完整指南【免费下载链接】archifyAgent skill for beautiful, verifiable architecture, workflow, sequence,>项目地址: https://gitcode.com/GitHub_Trending/arch/archifyArchify 是一个开源的 AI Agent 画图技能能把架构、工作流、时序、数据流和生命周期五类图渲染成自带深浅主题切换、缩放搜索与高清导出的独立 HTML。正常情况下它走JSON → 校验 → CLI 渲染的自动化路线但当你处在没有 Shell 或 Node 运行环境比如纯聊天式 Agent 会话时Archify 提供了一条完整的回退路径直接手写 SVG 填进template.html自定义模板照样得到可交互、可换肤的成品图。本文带你走完这条回退工作流。什么时候会用到这个回退工作流Archify 的标准流程依赖命令行node bin/archify.mjs validate type candidate.json --quality showcase --json node bin/archify.mjs deliver type candidate.json output.html官方技能说明 archify/SKILL.md 的Setup and fallback一节明确写了一条兜底规则When shell access is unavailable, hand-place architecture SVG intoassets/template.html, use CSS semantic classes rather than inline colors, and follow the visual review contract inreferences/delivery-contract.md.也就是说满足下面任一条件时就该切换到回退模式 环境里跑不了node受限沙箱、无 Shell 的 Agent 会话 无法安装或解压完整的技能包只拿到了模板文件 想跳过渲染器快速验证模板 手写 SVG本身的效果回退模式的核心思路只有一句话渲染器负责把 JSON 变成 SVG而模板负责把 SVG 变成好看的页面。没有渲染器时你只需要替它把 SVG 部分手工补上其余全部由模板代劳。认识 template.html一个半成品的完整页面模板文件位于 archify/assets/template.html它不是空壳而是一个已经装好字体、主题变量、工具栏、深浅色切换脚本的完整 HTML——只留了一处空位等你填图。三个必须替换的占位符占位符位置作用[VISUAL PRESET]html标签的data-preset属性选择视觉风格默认留空即classic也可填signal-flow/blueprint/editorial[PROJECT NAME]title与页面h1图标题出现两处都要改SVG 插槽!-- ARCHIFY:SVG_SLOT_START --到!-- ARCHIFY:SVG_SLOT_END --之间template.html 第 5134–5281 行整段替换成你自己的svg模板在 SVG 插槽里内置了一份完整的样例图 注释等于一本随文教材每个组件、每种箭头都标了用法说明照着改坐标和文字就能出图。关键规则用 CSS 语义类别写内联颜色这是回退工作流最重要的一条纪律也是官方明文要求的所有颜色和线条都用模板预置的 CSS 类不要写fill#xxx。模板在 第 4060–4085 行 定义了一整套语义类组件类型矩形类说明文字类前端c-frontendt-frontend后端c-backendt-backend数据库c-databaset-database云服务c-cloudt-cloud安全c-securityt-security消息总线c-messagebust-messagebus外部系统c-externalt-external遮罩层c-mask—标题 / 辅助文字—t-primary/t-muted/t-dim箭线则用a-default、a-security等类配合defs里现成的#arrowhead、#arrowhead-security、#arrowhead-dashed三个箭头标记直接marker-endurl(#arrowhead)引用即可。为什么必须这么做因为这些类的颜色全部来自 CSS 变量--frontend-fill、--backend-stroke……而变量在data-themedark和data-themelight两套下各有一套取值。你写的每个类名都自动获得了深浅双主题支持。手写一个内联十六进制颜色那个元素就会在主题切换时卡在原色上破坏整张图的统一性。手写 SVG 的五步回退流程第 1 步复制模板为新文件把template.html复制一份到你要输出的位置例如my-diagram.html此后只在副本上动手保持模板原样——仓库和模板都是只读资产。第 2 步填占位符替换三处占位符。视觉预设不想要就留空模板注释建议默认不写visual_preset让图以classic打开。第 3 步按三件套画每个组件模板注释第 5158–5164 行规定了每个组件框的固定画法一个都不能少c-mask遮罩矩形——不透明底色盖住从组件背后穿过的箭线c-类型样式矩形——同样的x/y/宽/高/圆角描边 1.5px文字——t-primary主标签 t-muted副标签text-anchormiddle居中。最小示例改坐标即可复用rect x510 y280 width110 height50 rx6 classc-mask/ rect x510 y280 width110 height50 rx6 classc-backend stroke-width1.5/ text x565 y300 classt-primary font-size11 font-weight600 text-anchormiddleAPI Server/text text x565 y316 classt-muted font-size9 text-anchormiddleFastAPI :8000/text区域边界region、安全组虚线框c-security-group也都有现成样例注意安全组要留出顶部空间放标签。第 4 步连箭线直线用line曲线比如认证流转用path加圆角转折。箭线一律画在组件之前、或让 mask 矩形去盖保证线在框后的视觉层级。标签文字放在线上方 6px 左右用t-muted类。样例图里 HTTPS、TLS、JWT PKCE 三种标注都值得直接抄布局。第 5 步按视觉审查契约自查回退模式没有validate/deliver命令兜底质量契约改由人工执行。archify/references/delivery-contract.md 的Perceptual delivery gate就是你要对照的清单✅ 在 1440×900、1600×1000、1920×1080 下打开页面无横向滚动条✅ 深色与浅色两套主题都过一遍没有任何元素颜色串线这最能暴露内联颜色错误✅ 检查线条交叉、标签压线、节点/卡片是否放得下文字✅ 工具栏的主题切换、缩放、搜索仍可正常操作上图同一张图在深浅两套主题下的样子——这正是语义类方案的回报你只写一次 SVG主题系统免费给你两套皮肤。常见翻车点清单 写了内联颜色主题一切换那个框就露馅。搜索你的 SVG 里有没有fill#或stroke#全部改成类名。漏画c-mask从组件背后穿过的箭线会戳进框内看起来像 bug。viewBox忘了定模板默认viewBox0 0 1000 680内容超出这个画布会被裁掉图更大就按比例改高别只加宽。占位符残留[VISUAL PRESET]留空没问题[PROJECT NAME]漏改一处浏览器标签页就会很尴尬。把样例注释整段删了之后找不到箭头标记defs里的#arrowhead系列和#grid网格图案必须保留否则所有marker-end和背景网格都会静默失效。回退模式与正常模式如何取舍两条路径产物相同只是谁来生成 SVG不同正常模式有 Shell回退模式无 Shell输入JSON 规格如 archify/examples/web-app.architecture.json手写 SVG质检validate九项自动检查 deliver原子落盘人工对照视觉审查契约产出带完整校验回执的 HTML同样自包含的 HTML字段规则两者通用组件类型只有frontend、backend、database、cloud、security、messagebus、external七种与模板的c-*类一一对应所以你在回退模式练熟的手感回到 JSON 模式时完全可迁移。环境一旦恢复优先切回官方路径——validate/deliver给出的确定性回执SHA-256、字节数、九项检查是手写模式无法替代的质量证据。同样的方法也适用于工作流、时序、数据流与生命周期图只是画布语言换成泳道、生命线、管道与状态环交付前用浏览器截图留档也是契约鼓励的做法项目中的视觉检查产物即为例证相关文件速查资料路径回退条款原文archify/SKILL.md自定义模板含 SVG 插槽与全套语义类archify/assets/template.html视觉审查契约人工质检清单archify/references/delivery-contract.mdJSON 模式参考示例archify/examples/架构图 JSON Schema回到正常模式时用archify/schemas/architecture.schema.json小结Archify 的回退工作流本质上是一次分工让渡把渲染器画 SVG 的活接过来自己只需要记住三件套mask → 类型矩形 → 双行文字、语义类命名和三处占位符剩下的主题、工具栏、导出能力全部由template.html现成提供。没有 Shell 不再是画图的拦路虎——一张可换肤、可交互的架构图手写同样拿得下。【免费下载链接】archifyAgent skill for beautiful, verifiable architecture, workflow, sequence,>项目地址: https://gitcode.com/GitHub_Trending/arch/archify创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考 Shell 不可用时如何用 Archify 手绘架构图：template.html 回退工作流完整指南
Shell 不可用时如何用 Archify 手绘架构图template.html 回退工作流完整指南【免费下载链接】archifyAgent skill for beautiful, verifiable architecture, workflow, sequence,>项目地址: https://gitcode.com/GitHub_Trending/arch/archifyArchify 是一个开源的 AI Agent 画图技能能把架构、工作流、时序、数据流和生命周期五类图渲染成自带深浅主题切换、缩放搜索与高清导出的独立 HTML。正常情况下它走JSON → 校验 → CLI 渲染的自动化路线但当你处在没有 Shell 或 Node 运行环境比如纯聊天式 Agent 会话时Archify 提供了一条完整的回退路径直接手写 SVG 填进template.html自定义模板照样得到可交互、可换肤的成品图。本文带你走完这条回退工作流。什么时候会用到这个回退工作流Archify 的标准流程依赖命令行node bin/archify.mjs validate type candidate.json --quality showcase --json node bin/archify.mjs deliver type candidate.json output.html官方技能说明 archify/SKILL.md 的Setup and fallback一节明确写了一条兜底规则When shell access is unavailable, hand-place architecture SVG intoassets/template.html, use CSS semantic classes rather than inline colors, and follow the visual review contract inreferences/delivery-contract.md.也就是说满足下面任一条件时就该切换到回退模式 环境里跑不了node受限沙箱、无 Shell 的 Agent 会话 无法安装或解压完整的技能包只拿到了模板文件 想跳过渲染器快速验证模板 手写 SVG本身的效果回退模式的核心思路只有一句话渲染器负责把 JSON 变成 SVG而模板负责把 SVG 变成好看的页面。没有渲染器时你只需要替它把 SVG 部分手工补上其余全部由模板代劳。认识 template.html一个半成品的完整页面模板文件位于 archify/assets/template.html它不是空壳而是一个已经装好字体、主题变量、工具栏、深浅色切换脚本的完整 HTML——只留了一处空位等你填图。三个必须替换的占位符占位符位置作用[VISUAL PRESET]html标签的data-preset属性选择视觉风格默认留空即classic也可填signal-flow/blueprint/editorial[PROJECT NAME]title与页面h1图标题出现两处都要改SVG 插槽!-- ARCHIFY:SVG_SLOT_START --到!-- ARCHIFY:SVG_SLOT_END --之间template.html 第 5134–5281 行整段替换成你自己的svg模板在 SVG 插槽里内置了一份完整的样例图 注释等于一本随文教材每个组件、每种箭头都标了用法说明照着改坐标和文字就能出图。关键规则用 CSS 语义类别写内联颜色这是回退工作流最重要的一条纪律也是官方明文要求的所有颜色和线条都用模板预置的 CSS 类不要写fill#xxx。模板在 第 4060–4085 行 定义了一整套语义类组件类型矩形类说明文字类前端c-frontendt-frontend后端c-backendt-backend数据库c-databaset-database云服务c-cloudt-cloud安全c-securityt-security消息总线c-messagebust-messagebus外部系统c-externalt-external遮罩层c-mask—标题 / 辅助文字—t-primary/t-muted/t-dim箭线则用a-default、a-security等类配合defs里现成的#arrowhead、#arrowhead-security、#arrowhead-dashed三个箭头标记直接marker-endurl(#arrowhead)引用即可。为什么必须这么做因为这些类的颜色全部来自 CSS 变量--frontend-fill、--backend-stroke……而变量在data-themedark和data-themelight两套下各有一套取值。你写的每个类名都自动获得了深浅双主题支持。手写一个内联十六进制颜色那个元素就会在主题切换时卡在原色上破坏整张图的统一性。手写 SVG 的五步回退流程第 1 步复制模板为新文件把template.html复制一份到你要输出的位置例如my-diagram.html此后只在副本上动手保持模板原样——仓库和模板都是只读资产。第 2 步填占位符替换三处占位符。视觉预设不想要就留空模板注释建议默认不写visual_preset让图以classic打开。第 3 步按三件套画每个组件模板注释第 5158–5164 行规定了每个组件框的固定画法一个都不能少c-mask遮罩矩形——不透明底色盖住从组件背后穿过的箭线c-类型样式矩形——同样的x/y/宽/高/圆角描边 1.5px文字——t-primary主标签 t-muted副标签text-anchormiddle居中。最小示例改坐标即可复用rect x510 y280 width110 height50 rx6 classc-mask/ rect x510 y280 width110 height50 rx6 classc-backend stroke-width1.5/ text x565 y300 classt-primary font-size11 font-weight600 text-anchormiddleAPI Server/text text x565 y316 classt-muted font-size9 text-anchormiddleFastAPI :8000/text区域边界region、安全组虚线框c-security-group也都有现成样例注意安全组要留出顶部空间放标签。第 4 步连箭线直线用line曲线比如认证流转用path加圆角转折。箭线一律画在组件之前、或让 mask 矩形去盖保证线在框后的视觉层级。标签文字放在线上方 6px 左右用t-muted类。样例图里 HTTPS、TLS、JWT PKCE 三种标注都值得直接抄布局。第 5 步按视觉审查契约自查回退模式没有validate/deliver命令兜底质量契约改由人工执行。archify/references/delivery-contract.md 的Perceptual delivery gate就是你要对照的清单✅ 在 1440×900、1600×1000、1920×1080 下打开页面无横向滚动条✅ 深色与浅色两套主题都过一遍没有任何元素颜色串线这最能暴露内联颜色错误✅ 检查线条交叉、标签压线、节点/卡片是否放得下文字✅ 工具栏的主题切换、缩放、搜索仍可正常操作上图同一张图在深浅两套主题下的样子——这正是语义类方案的回报你只写一次 SVG主题系统免费给你两套皮肤。常见翻车点清单 写了内联颜色主题一切换那个框就露馅。搜索你的 SVG 里有没有fill#或stroke#全部改成类名。漏画c-mask从组件背后穿过的箭线会戳进框内看起来像 bug。viewBox忘了定模板默认viewBox0 0 1000 680内容超出这个画布会被裁掉图更大就按比例改高别只加宽。占位符残留[VISUAL PRESET]留空没问题[PROJECT NAME]漏改一处浏览器标签页就会很尴尬。把样例注释整段删了之后找不到箭头标记defs里的#arrowhead系列和#grid网格图案必须保留否则所有marker-end和背景网格都会静默失效。回退模式与正常模式如何取舍两条路径产物相同只是谁来生成 SVG不同正常模式有 Shell回退模式无 Shell输入JSON 规格如 archify/examples/web-app.architecture.json手写 SVG质检validate九项自动检查 deliver原子落盘人工对照视觉审查契约产出带完整校验回执的 HTML同样自包含的 HTML字段规则两者通用组件类型只有frontend、backend、database、cloud、security、messagebus、external七种与模板的c-*类一一对应所以你在回退模式练熟的手感回到 JSON 模式时完全可迁移。环境一旦恢复优先切回官方路径——validate/deliver给出的确定性回执SHA-256、字节数、九项检查是手写模式无法替代的质量证据。同样的方法也适用于工作流、时序、数据流与生命周期图只是画布语言换成泳道、生命线、管道与状态环交付前用浏览器截图留档也是契约鼓励的做法项目中的视觉检查产物即为例证相关文件速查资料路径回退条款原文archify/SKILL.md自定义模板含 SVG 插槽与全套语义类archify/assets/template.html视觉审查契约人工质检清单archify/references/delivery-contract.mdJSON 模式参考示例archify/examples/架构图 JSON Schema回到正常模式时用archify/schemas/architecture.schema.json小结Archify 的回退工作流本质上是一次分工让渡把渲染器画 SVG 的活接过来自己只需要记住三件套mask → 类型矩形 → 双行文字、语义类命名和三处占位符剩下的主题、工具栏、导出能力全部由template.html现成提供。没有 Shell 不再是画图的拦路虎——一张可换肤、可交互的架构图手写同样拿得下。【免费下载链接】archifyAgent skill for beautiful, verifiable architecture, workflow, sequence,>项目地址: https://gitcode.com/GitHub_Trending/arch/archify创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考