Anthropic风格图表制作教程用SVG绘制专业架构图并自动导出PNG【免费下载链接】erduo-skills项目地址: https://gitcode.com/gh_mirrors/er/erduo-skillsGitHub 加速计划er/erduo-skills中的Anthropic风格图表工具让你轻松创建符合Anthropic/Claude视觉语言的专业架构图和流程图。本教程将带你掌握从SVG绘制到PNG导出的完整流程即使是新手也能快速上手。为什么选择Anthropic风格图表Anthropic风格图表以其简洁的设计、清晰的层次结构和专业的配色方案而受到欢迎。它采用语义化SVG绘制通过脚本自动处理样式、主题和导出让你专注于内容创作而非视觉细节。这种风格特别适合技术文档、架构说明和流程展示能有效提升内容的专业性和可读性。准备工作环境搭建首先确保你的系统中安装了Node.js环境。然后通过以下命令克隆项目git clone https://gitcode.com/gh_mirrors/er/erduo-skills cd erduo-skills/skills/anthropic-style-diagram npm install项目的核心功能位于skills/anthropic-style-diagram/目录下其中scripts/render.mjs是图表渲染和导出的关键脚本。创作流程从构思到导出Anthropic风格图表的创作遵循简单而高效的工作流程规划图表结构确定节点数量、分类和图表类型流程图、结构图或说明图编写SVG代码使用规定的类和结构创建语义化SVG渲染与导出使用render.mjs脚本生成PNG文件检查与优化根据渲染反馈调整图表布局和样式项目星标增长趋势图展示了Anthropic风格图表工具的受欢迎程度核心步骤编写你的第一个Anthropic风格SVG基本SVG结构Anthropic风格图表使用特定的SVG结构以下是一个基础模板svg viewBox0 0 680 400 roleimg title系统架构图/title desc展示用户请求处理的系统架构/desc defs marker idarrow viewBox0 0 10 10 refX8 refY5 markerWidth6 markerHeight6 orientauto-start-reverse path dM2 1L8 5L2 9 fillnone strokecontext-stroke stroke-width1.5 stroke-linecapround stroke-linejoinround/ /marker /defs !-- 图表内容 -- /svg关键类与样式Anthropic风格图表通过类来定义样式无需手动编写CSSth标题文本14px mediumt主要标签文本14px regularts副标题文本12px regularbox中性容器样式node标记节点组arr连接线样式c-*颜色系列如c-purple、c-teal、c-blue等简单示例创建一个流程图以下是一个简单的流程图示例svg viewBox0 0 680 300 roleimg title用户请求处理流程/title desc展示从用户请求到响应的处理流程/desc defs marker idarrow viewBox0 0 10 10 refX8 refY5 markerWidth6 markerHeight6 orientauto-start-reverse path dM2 1L8 5L2 9 fillnone strokecontext-stroke stroke-width1.5 stroke-linecapround stroke-linejoinround/ /marker /defs !-- 用户节点 -- g classnode c-purple transformtranslate(50, 150) rect width120 height44 rx4 classbox/ text x60 y22 classth text-anchormiddle dominant-baselinecentral用户/text /g !-- API节点 -- g classnode c-blue transformtranslate(250, 150) rect width140 height44 rx4 classbox/ text x70 y22 classth text-anchormiddle dominant-baselinecentralAPI服务/text /g !-- 数据库节点 -- g classnode c-teal transformtranslate(450, 150) rect width160 height44 rx4 classbox/ text x80 y22 classth text-anchormiddle dominant-baselinecentral数据库/text /g !-- 连接线 -- line classarr x1170 y1150 x2250 y2150 marker-endurl(#arrow)/ line classarr x1390 y1150 x2450 y2150 marker-endurl(#arrow)/ /svg渲染与导出使用render.mjs脚本创建好SVG文件后使用以下命令将其渲染为PNGnode scripts/render.mjs your-diagram.svg -o output.png常用渲染选项render.mjs提供多种选项来自定义输出选项默认值说明-o, --out path./name.png输出文件路径--theme tlight主题light/dark/both--scale n2像素密度3-4适合打印--bg vauto背景色auto/transparent/#rrggbb--padding n32内容边距--svg—同时输出扁平化SVG例如生成深色主题的高分辨率图表node scripts/render.mjs architecture.svg -o ~/docs/arch-dark.png --theme dark --scale 3设计最佳实践颜色使用原则每个类别使用一种颜色系列优先使用purple、teal、coral和pink作为通用类别保留blue、green、amber和red用于信息性、成功、警告和错误概念使用c-gray表示中性或外部节点布局与构图技巧避免均匀网格布局根据内容调整框宽度识别反馈边缘使用leader路径绘制循环重要元素给予更多视觉权重保持一致的方向从上到下或从左到右文本使用规范副标题不超过5个单词使用句子大小写避免全大写仅使用14pxth/t类和12pxts类两种文本大小文本居中对齐不自动换行故障排除与优化render.mjs脚本会自动检查常见问题文本溢出框重叠连接线穿过无关节点如果发现这些问题根据提示调整SVG代码并重新渲染。一个干净的运行只会输出文件路径表明图表没有机械性问题。总结通过Anthropic风格图表工具你可以轻松创建专业、美观的架构图和流程图。只需遵循语义化SVG的编写规范使用提供的类和结构再通过render.mjs脚本处理样式和导出就能快速生成高质量的图表。无论是技术文档、演示文稿还是架构说明Anthropic风格图表都能帮助你更清晰、更专业地传达信息。要了解更多详细信息可以参考项目中的文档设计系统参考skills/anthropic-style-diagram/references/design-system.md图表类型指南skills/anthropic-style-diagram/references/diagram-types.md示例SVG文件skills/anthropic-style-diagram/references/example-structural.svg现在就开始创建你的第一个Anthropic风格图表吧【免费下载链接】erduo-skills项目地址: https://gitcode.com/gh_mirrors/er/erduo-skills创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考