企业官网建设流程全解析

之前汇总介绍过绘图工具：

• 超强大免费绘图工具draw.io初体验
• Mermaid语法、实战
• 画图工具汇总：Excalidraw、tldraw、Drawnix、Drawio
• 绘图工具汇总：FossFLOW、LogicFlow、oxdraw、LucidChart、iCraft Editor

Next AI Draw.io

官网，基于Draw.io的开源（GitHub，28.4K Star，3K Fork）跨平台AI图表生成工具。

优势：

• 专业级输出质量
• 完全开源，支持本地部署
• 与Draw.io生态完全兼容
• 支持团队协作和版本控制

核心功能：

• 自然语言驱动图表创建
• 支持流程图、UML图、架构图等
• 实时编辑和修改
• 多AI模型支持（OpenAI、Claude、Google等）

实战

官方提供多种使用方式：

• 官网：就是在线SaaS，无需登录即可基于浏览器使用
• 从GitHub Release页面下载二进制安装包文件

官方提供快速示例

Fireworks-Tech-Graph

开源（GitHub，8.4K Star，725 Fork）Claude Code技能，用自然语言描述系统，生成生产级的SVG+PNG技术图表，支持中英文。

功能特性：

• 8种视觉风格
  • Flat Icon：白底扁平风，适合博客和文档，干净利落
  • Dark Terminal：暗黑终端风，霓虹配色加等宽字体
  • Blueprint：深蓝底加网格线，适合工程图纸
  • Notion Clean：极简，
  • Glassmorphism：玻璃拟态，一种UI设计风格，通过‌背景模糊、半透明填充、高光边框‌三大要素模拟磨砂玻璃的通透悬浮质感
  • Claude Official：Anthropic温暖奶油色，
  • OpenAI Official：纯白底配品牌绿，
  • Dark Luxury：
• 支持14种UML图表类型：类图、组件图、包图、部署图、序列图、时序图、状态机图、活动图、用例图、交互图、ER图、架构图、流程图、网络拓扑图
• 自带AI/Agent领域的知识库：Mem0记忆架构、Tool Call流程、Multi-Agent协作拓扑…
• Agentic Search模式，Query Planning（查询规划），Multi-step Retrieval（多步检索），Synthesis（综合合成），Reflection（反思优化）的完整搜索闭环。
• 自带4个辅助脚本
  • generate-diagram.sh：用来验证SVG并导出PNG
  • generate-from-template.py：从模板快速创建起始SVG
  • validate-svg.sh：单独验证语法
  • test-all-styles.sh：批量测试所有风格

对比

实战

# 基于CC安装claude skillsaddhttps://github.com/yizhiyanhua-ai/fireworks-tech-graph# 基于npx安装npx skillsaddyizhiyanhua-ai/fireworks-tech-graph# 从源码安装gitclone https://github.com/yizhiyanhua-ai/fireworks-tech-graph.git ~/.claude/skills/fireworks-tech-graph# 导出PNG，还得装rsvg-convertbrewinstalllibrsvgsudoapt-getinstalllibrsvg2-bin# Windows用户：手动安装MSYS2、librsvg

在CC中，直接用中英文描述想要的图表：画一个Multi-Agent协作的架构图，包含Manager Agent、Worker Agent和Communication Bus。

玻璃拟态

核心特征与实现原理

• 背景模糊：使用backdrop-filter: blur()模糊元素后方内容，而非元素本身，营造景深
• 半透明填充：背景色需带低不透明度（如rgba(255,255,255,0.1~0.3)），确保背景可见但内容清晰
• 高光边框：添加细窄半透明边框（通常白色或浅色，不透明度10%-30%）模拟玻璃边缘反光
• 依赖背景：必须置于色彩丰富或有渐变的背景上，单调背景无法体现效果

CSS基础代码示例

.glass{background:rgba(255,255,255,0.15);/* 半透明底色 */backdrop-filter:blur(12px);/* 核心：背景模糊 */-webkit-backdrop-filter:blur(12px);/* Safari兼容 */border:1px solidrgba(255,255,255,0.2);/* 高光边框 */box-shadow:0 8px 32pxrgba(0,0,0,0.1);/* 悬浮阴影 */border-radius:16px;}

Architecture Diagram Generator

开源（GitHub，5.8K Star，440 Fork）专门用于生成架构图的Claude Skill。

SKILL.md定义一套完整的设计系统，包括颜色规范、组件样式、排版规则、SVG布局约定，让AI按这套系统生成HTML+内联SVG代码。AI输出完整HTML文件，SVG全部内联，样式全部嵌入，打开即用。

设计细节：

• 语义色彩分层：Frontend用Cyan（青色），Backend用Emerald（翠绿），Database用Violet（紫色），Cloud用Amber（琥珀），安全相关用Rose（玫瑰红）。颜色有对应语义
• 箭头渲染顺序：连接线先于组件框绘制，保证箭头在视觉上位于组件之后，避免箭头盖住文字。组件框还会在半透明色块下面额外画一个纯色遮罩层，防止箭头"透过"半透明区域。这种细节在draw.io里需要手动处理，Skill直接内置
• 图例位置约束：Legend必须放在所有边界框的外面，并计算最低边界再加20px距离，防止标注被区域框遮住
• 深色主题：Slate-950深色背景，配上40px的网格图案，JetBrains Mono字体，更具技术感
• 对话式迭代：改图不用重画，

颜色：

• Cyan（青色）：常用在前端、客户端、UI的设计中
• Emerald（翠绿）：在后端、API、服务的设计中经常用
• Violet（紫罗兰）：常用在数据库、存储、AI/ML的设计中
• Amber（琥珀）：云服务、基础设施画图中会比较常用
• Rose（玫瑰）：搭配认证、安全、加密场景
• Slate（石板灰）：用在外部系统、第三方服务的设计中，如支付、短信、邮件等

使用：从GitHub Release页面下载architecture-diagram.zip，以Claude Code为例，打开claude.ai，进入Settings，Capabilities，Skills，点击Add上传zip文件，最后开启Skill即可。

局限：生成图表是静态的，不支持多人实时协作。团队要在线白板协作，还是得用Miro或FigJam等其他工具。

Excalidraw Diagram Skill

基于开源白板工具Excalidraw构建的开源（GitHub，2.9K Star，375 Fork）AI技能插件，允许AI助手（如Claude、ChatGPT等）在对话中直接创建、编辑和解释手绘风格的图表。这个技能将自然语言转换为可视化图表，大大增强AI在技术沟通、系统设计和思维导图方面的能力。

核心功能特性

1. 图表创建能力
   • 手绘风格图表：创建具有手绘感的流程图、架构图、思维导图
   • 多元素支持：支持形状、箭头、文本、连接线、图标等
   • 实时协作：支持多人实时编辑和协作
   • 导出格式：支持PNG、SVG、Excalidraw文件格式导出
2. AI集成特性
   • 自然语言到图表：用户用自然语言描述，AI生成对应图表
   • 图表解释分析：AI可以分析现有图表并解释其内容
   • 智能布局：自动优化图表布局和元素排列
   • 样式建议：根据内容推荐合适的图表样式和颜色
3. 技术架构
   • 前端：基于React的Excalidraw核心
   • AI集成：通过API与AI模型交互
   • 数据格式：使用JSON格式存储图表数据
   • 扩展性：支持自定义组件和插件

安装：

gitclone https://github.com/coleam00/excalidraw-diagram-skill.gitcp-rexcalidraw-diagram-skill .claude/skills/excalidraw-diagram

设置：

cd.claude/skills/excalidraw-diagram/references uvsyncuv run playwrightinstallchromium

代码仓库主要就是Skill.md文档：

Codag

官网，专为软件工程师打造的开源（GitHub，516 Star，42 Fork）VS Code扩展，分析代码，画流程图。

利用Tree-sitter解析器和LLM，深入理解代码语义。能识别出所有LLM API调用、决策分支（Branching Logic）和数据转换步骤，并将它们渲染成交互式的DAG（有向无环图）。修改代码时，DAG也会实时更新。

官方Demo动图有21.5M，请去GitHub查看。

功能

• 实时联动，所见即所得 (Live Graph Updates)：利用Tree-sitter增量解析技术，修改函数名或增加新的LLM调用，右侧流程图会瞬间刷新。修改过的节点还会高亮显示，可清楚地看到变动点。
• 点击跳转，双向导航 (Click-to-Source)：每一个节点都对应代码中的具体函数或调用，双向链接彻底打通逻辑视图和代码视图的隔阂：
  • 图到代码：点击图上的节点，编辑器直接跳转到对应的代码行。
  • 代码到图：在代码中选中函数，图上对应的节点也会高亮。
• 全栈兼容：包括Python、TypeScript等语言，OpenAI等模型，LangChain、LlamaIndex、CrewAI等智能体框架。

实战

基于源码安装：

gitclone https://github.com/michaelzixizhou/codag.gitcdcodagcpbackend/.env.example backend/.envvimbackend/.env，# 填入GEMINI_API_KEY=xxxxxdockercompose up-d

安装VS Code插件，或下载.vsix文件本地安装，连接本地。

Smart Draw

项目首页，开源（GitHub，416 Star，86 Fork）专注于Excalidraw的AI增强工具。

功能特性：

• 自然语言生成Excalidraw图表
• 实时流式响应和渲染
• 多会话管理
• 支持多种AI API，包括国内服务商
• 本地存储，数据安全
• 移动端适配良好

Diagram GPT

项目首页，基于Mermaid.js，用自然语言生成图表的开源（GitHub，318 Star，76 Fork）项目，支持多种图表类型：流程图、序列图、类图、用户旅程图、甘特图、C4架构图、思维导图。

核心特性：

• 无需学习专业绘图语法
• 一键生成多种图表类型
• 支持导出为SVG、PNG、Markdown
• 响应式设计，移动端友好

安装：

gitclone https://github.com/fraserxu/diagram-gpt.gitcddiagram-gptnpmrun dev# oryarndev# orpnpmdev

浏览器打开http://localhost:3000开始体验。

AI Excalidraw

项目首页，
专为Excalidraw优化的AI集成的开源（GitHub，191 Star，44 Fork）工具。

功能特性：

• 自然语言绘图
• 多模型支持（OpenAI、智谱AI、阿里百炼等）
• 本地优先存储
• 响应式设计

基于源码部署：

gitclone https://github.com/co-pine/ai-excalidraw.gitcdai-excalidraw buninstallbun run dev

浏览器打开http://localhost:3000开始体验。