企业官网建设流程全解析

之前写过的绘图工具系列：

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

本文继续搜集一些开源或闭源绘图工具，暂时没有过多实战经验。

FossFLOW

开源（GitHub，19.2K Star，1.3K Fork）功能强大的渐进式Web应用（PWA），专为创建精美的等距图而设计。基于React和Isoflow库构建，完全在浏览器中运行，并支持离线使用。在线体验。

实战

基于docker-compose.yaml部署：

version:"3.8"services:fossflow:image:stnsmith/fossflow:latestports:-8083:80environment:-NODE_ENV=production-ENABLE_SERVER_STORAGE=true-STORAGE_PATH=/data/diagrams-ENABLE_GIT_BACKUP=falsevolumes:-./diagrams:/data/diagrams

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

操作：添加组件、节点，连接；

LogicFlow

官网，无https-官网，滴滴开源（GitHub，11.5K Star，1.4K Fork）基于H5和JS、专注于业务自定义、流程图编辑框架，提供丰富的功能和灵活的扩展机制，适用于各种逻辑编排场景，如工作审批流配置、机器人逻辑编排、无代码平台流程配置。支持多种数据格式的渲染，对外提供许多API，可自定义节点和菜单，如流程图、ER图、BPMN流程、脑图、UML、工作流等场景。

提供一系列流程图交互、编辑所必需的功能和灵活的节点自定义、插件等拓展机制，可用于在工作审批配置、机器人逻辑编排、无代码平台流程配置等场景。

核心优势

• 轻量化：核心包体积仅100KB+，无冗余依赖，加载速度快；
• 高灵活：节点、连线、面板均可自定义，从样式到交互全链路可控；
• 跨框架：支持Vue 2/3、React、原生JS。

需求场景：

• 业务流程设计：如OA系统的审批流程、电商的订单流转，支持拖拽添加节点、设置条件分支；
• 数据可视化：架构图、思维导图、ER图，通过自定义节点实现复杂数据关系展示；
• 低代码平台：作为可视化编辑器核心，搭配表单组件快速搭建流程配置中心；
• 即时协作工具：支持节点拖拽、连线自动吸附，配合WebSocket实现多人实时编辑。

实战

安装及使用

npm install @logicflow/core--save npm install @logicflow/theme--save<template><div id="flow-container"style="width: 800px; height: 500px; border: 1px solid #eee;"></div></template><script setup>import{onMounted}from'vue';import{LogicFlow}from'@logicflow/core';import'@logicflow/theme';onMounted(()=>{// 初始化实例constlf=newLogicFlow({container:document.getElementById('flow-container'),grid:true// 显示网格});// 添加节点lf.addNode({id:'node1',type:'rect',// 矩形节点x:100,y:100,text:'开始'});lf.addNode({id:'node2',type:'rect',x:400,y:100,text:'结束'});// 添加连线lf.addEdge({sourceNodeId:'node1',targetNodeId:'node2',text:'流程流转'});// 渲染lf.render();});</script>

说明：

• 容器：必须指定宽高，否则无法正常渲染；
• 节点类型：内置rect（矩形）、circle（圆形）、diamond（菱形）等基础类型，支持自定义；
• 交互：默认支持节点拖拽、连线编辑，可通过stopDefaultBehavior禁用默认交互。

自定义节点样式

lf.registerNode('approval-node',{extends:'rect',// 继承矩形节点style:{fill:'#e8f4f8',stroke:'#4299e1',strokeWidth:2},// 自定义图标icon:{type:'svg',svg:'<svg width="20" height="20" viewBox="0 0 24 24"><path d="M12 2L2 7l10 5 10-5-10-5z"/></svg>'}});

监听事件，提供丰富事件钩子，如节点点击、连线变化：

// 监听节点点击lf.on('node:click',(data)=>{console.log('点击了节点：',data.node.id);// 这里可触发弹窗、表单编辑等业务逻辑});// 监听连线完成lf.on('edge:add',(data)=>{console.log('新增连线：',data.edge);// 校验连线合法性、保存到后端等});

支持将流程图导出为JSON，或从JSON恢复：

// 导出constflowData=lf.getGraphData();// 导入lf.render(flowData);

oxdraw

开源（GitHub，2K Star，65 Fork）基于Rust、Diagram-as-Code 工具，支持使用 Mermaid 语法编写图表，提供 Web 界面进行拖拽式交互编辑；在界面上做的任何视觉调整（比如移动节点、添加拐点、改颜色），都会以注释形式自动保存回原始.mmd文件中，确保代码与视图完全同步。

旨在解决Mermaid无法精细控制：对齐、布局、线条交叉、美观等问题。

技术原理

1. Rust编写的CLI工具：负责把.mmd文件渲染成SVG或PNG图片，也可启动本地服务器运行前端编辑器。

2. React 实现的 Web 前端编辑器：提供可视化的拖拽界面，支持节点移动、连线重路由、样式覆盖等功能。

3. 解析层：Mermaid AST 提取 + 自定义元数据注入

oxdraw 并没有自己实现 Mermaid 的语法解析器，而是复用了社区成熟的mermaid-js引擎。

但它聪明的地方在于：在解析完标准语法后，额外提取出“非功能性”的布局信息，并将其隔离存储。

具体做法：

• 主体逻辑仍由Mermaid原生解析，保证兼容性
• 所有自定义样式、位置、路径等信息，统一用%% oxdraw:xxx开头的注释块包裹
• 渲染时，先加载Mermaid原始结构，再应用oxdraw注入的布局偏移量

好处：

• 完全兼容其他Mermaid工具：即使你把.mmd文件拿去别的地方渲染，那些注释会被忽略，图依然能正常显示（只是回到默认布局）
• 避免污染语义结构：不会为了控制样式而去改写graph或subgraph结构，保持代码干净
• 实现“增量更新”机制：只同步变化的部分，而不是全量重写文件

2. 渲染引擎：Rust + WebAssembly 的高性能组合拳

很多人看到“前端编辑器”就以为这是个纯 JS 项目，但实际上，oxdraw 的核心渲染逻辑是用 Rust 写的！

它通过 WASM（WebAssembly）技术将 Rust 编译成可在浏览器中运行的二进制模块，负责以下任务：

• Mermaid 字符串 → SVG 路径计算
• 控制点插值算法（贝塞尔曲线优化）
• 碰撞检测与自动避让（未来规划功能）
• 图形变换矩阵运算

为啥要用 Rust？

因为这类图形计算非常吃性能，尤其是在处理复杂拓扑结构时，JS的 GC 和动态类型劣势明显。

而 Rust 提供了零成本抽象、内存安全、极致性能三大优势，特别适合做底层图形引擎。

举个例子：当你拖动一个节点时，所有连接它的边都需要实时重绘。如果用 JS 实现，频繁的数组操作和 DOM 更新很容易卡顿。

但在 oxdraw 中，这部分逻辑跑在 WASM 里，毫秒级响应，丝般顺滑。

3. 双向绑定机制：虚拟 DOM + 文件监听 + 自动保存

为了让“代码 ↔ 视图”真正实现双向同步，oxdraw 设计一套类似于 React + Redux 的状态管理系统。

其工作流程如下：

[用户拖动节点] ↓ 触发前端事件 → 发送给 WASM 模块计算新坐标 ↓ WASM 返回新的布局数据 → 更新 React 状态树 ↓ React 重新渲染画布 + 同步更新左侧代码面板 ↓ Debounce 定时器触发 → 将变更写回磁盘文件

关键细节包括：

• 使用throttle/debounce防止频繁写盘
• 差异对比（diff）仅写入变动部分，减少 I/O
• 支持stdin/stdout流式处理，便于集成 CI/CD
• 错误边界兜底，防止编辑器崩溃导致数据丢失

这套机制看似简单，实则涉及多个技术栈的协同：Rust、WASM、React、WebSocket、FS Watcher……

但最终呈现给用户的，只是一个.mmd文件 + 一条命令。

实战

安装：cargo install oxdraw
命令行使用：

oxdraw--inputflow.mmd# 默认生成同名svg文件oxdraw--inputflow.mmd--pngoxdraw--inputflow.mmd--editoxdraw--inputdemo.mmd--edit--serve-port8080oxdraw--inputdemo.mmd-b"#fff"# 设置背景色oxdraw--inputdemo.mmd-q# 静默输出catdiagram.mmd\|oxdraw-i--oout.png# 从stdin读取

浏览器打开http://127.0.0.1:5151，左侧是 Mermaid 源码编辑区，右侧是可交互的画布。

基础操作

• 拖动任何一个节点，它们会自动吸附到网格上
• 双击连线，添加控制点，手动拉出折线路径
• 点击节点或连线，弹出色板，修改填充色、边框、文字颜色
• 切换箭头方向、虚实线样式
• 选中元素后按Delete删除

子图容器（Subgraph Container）的智能分组移动。

支持Mermaid的subgraph功能：

在编辑器中，可直接拖动整个“用户系统”方框，里面的三个节点会一起移动，且相对位置不变；连带着从这个子图出发的所有连线，也会自动跟随调整路径。子图级操作，大大提升大型图表的组织效率。

模板支持，用于团队协作场景下的风格统一：

• template.mmd，预设常用节点样式和布局规则；
• 每次新建图表都基于模板复制；
• 提交PR时可通过lint工具检查是否有非法样式覆盖。

GitHub Actions集成：

name:GenerateDiagramson:[push]jobs:build:runs-on:ubuntu-lateststeps:-uses:actions/checkout@v4-name:Installoxdrawrun:cargoinstalloxdraw-name:Renderall.mmdfilesrun:|find . -name "*.mmd" | while read f; do oxdraw --input "$f" --png --scale 5 done-name:Commitandpushimagesrun:|git config user.name "github-actions" git add *.png git commit -m "Auto-generate diagrams" || exit 0 git push

自动化文档生成pipeline。

LucidChart

官网，一款基于云端的在线图表制作和可视化工具，由Lucid Software公司开发，支持流程图、组织结构图、UML图、思维导图等多种专业图表类型的创建和实时协作。​

基于H5技术开发，完全在浏览器中运行，无需安装任何软件或插件，支持在PC、Mac、Linux以及移动设备上使用。最初作为Microsoft Visio的替代品而设计，特别强调云端协作和易用性。用户可通过简单的拖拽操作创建专业水准的图表，支持与Google Workspace、Microsoft 365、Atlassian、Slack等主流办公应用无缝集成。

原理

1. 云端架构：采用基于云的SaaS（软件即服务）架构，所有图表数据存储在云端服务器上。用户可从任何设备、任何地点访问和编辑图表，无需担心数据丢失或版本不一致的问题。
2. 实时协作机制：系统支持多人实时协作，当多个用户同时编辑同一图表时，实时同步所有更改。每个用户的编辑操作会立即显示在其他协作者的界面上，同时提供聊天、评论、@提及等功能，促进团队沟通。
3. 数据集成与自动化：支持与外部数据源连接，如Excel、Google Sheets、Salesforce等。用户可将图表与这些数据源关联，实现图表的自动更新。当源数据发生变化时，相应的图表元素会自动调整。
4. AI智能绘图：引入AI技术，如ChatGPT和AI Prompt Flow。可通过自然语言输入快速生成和修改图表，大大提高绘图效率。

优势

1. 跨平台与易用性
   • 无需安装：基于浏览器运行，随时随地可用
   • 拖拽式操作：界面直观，非技术人员也能快速上手
   • 多设备支持：在PC、Mac、平板、手机上都能流畅使用
2. 强大的协作功能
   • 实时协作：多人同时编辑，实时查看对方修改
   • 评论与反馈：直接在图表上添加评论和标注
   • 版本控制：自动保存历史版本，可随时回溯
3. 丰富的模板与图形库
   • 数百种模板：涵盖各个行业和应用场景
   • 专业图形库：包括流程图符号、UML元素、网络设备图标等
   • 自定义形状：用户可创建自己的形状库
4. 集成与扩展性
   • 广泛集成：与Google Workspace、Microsoft 365、Atlassian、Slack等100+应用集成
   • API支持：提供开发者API，支持自定义集成
   • 数据连接：支持与外部数据源自动同步
5. 企业级功能
   • 团队空间：为不同团队提供独立的工作空间
   • 权限管理：精细的访问控制和分享权限设置
   • 企业级安全：包括SAML认证、IP白名单、域名控制等

局限性

1. 免费版限制较多：只支持3个可编辑文档、100个模板，每个文档最多60个形状，对于重度用户来说空间明显不足。
2. 网络依赖性强：作为云端工具，必须有稳定的网络连接才能正常使用，离线功能有限。
3. 高级功能需要付费：许多高级功能如AI智能绘图、高级数据集成、企业级安全功能等需要订阅付费版本。
4. 与Visio的兼容性问题：虽然支持Visio文件导入，但在复杂图表的转换过程中可能会出现格式错乱或功能不兼容的情况。
5. 学习曲线存在：虽然比Visio简单，但对于完全没有图表制作经验的用户，仍需要一定的学习时间才能熟练使用所有功能。
6. 价格因素：对于团队使用，即使是5人小团队也需要每月支付21美元，100人的团队每月支出高达334美元，对于创业公司或小型团队来说是一笔不小的开支。

LucidSpark

Lucid公司推出的可视化白板绘图工具，对其他开源自部署白板绘图工具感兴趣，可参考白板项目：Rnote、Lorien、Infinite-Canvas、open-ai-canvas。

iCraft Editor

官网，中文站点，GitHub收录一下官方文档、教程、示例等资料。

一款由Gant Software开发、专注于3D架构设计的开源在线编辑器，通过立体视觉效果提升沟通效率，支持从2D到3D的一键切换、自由视角控制和数字孪生功能，让复杂系统架构以三维形式直观呈现。​

与传统的2D图表工具不同，专注于3D化设计，让每一个元素、每一个层次都立体呈现。用户可通过自由旋转、缩放，从各个角度审视架构，轻松洞察其中的细节和关联。

原理

1. 基于WebGL的3D渲染：iCraft Editor采用现代Web技术栈，基于WebGL实现高性能的3D图形渲染。这使得用户无需安装任何插件或软件，直接在浏览器中就能获得流畅的3D体验。
2. 场景图管理系统：编辑器采用场景图（Scene Graph）架构管理3D元素，每个元素（几何体、模型、文字、线条等）都是场景图中的节点。这种架构支持复杂的层级关系和变换操作，便于实现子场景嵌套、动画播放等高级功能。
3. 实时交互与物理模拟。系统支持实时交互操作，包括：
   • 自动网格吸附：方便元素对齐和连接操作
   • 自动堆叠和磁吸：绘图元素自动堆叠磁吸，提高布局效率
   • 碰撞检测：确保元素不会重叠或冲突
4. 数据集成与同步机制：支持与外部系统集成，通过JS SDK控制3D元素状态，实现Web系统信息与3D架构图的实时同步。这为数字孪生应用提供了技术基础。
5. 模块化设计：采用React等技术构建，提供组件化架构。@icraft/player-react组件库让开发者可轻松将iCraft Editor制作的3D场景嵌入到React项目中。

功能特点

• 丰富的元素类型
  • 基础几何体：立方体、圆柱体、棱柱体、平面等
  • 3D模型：服务器、存储设备等专业模型
  • 带图片的3D模型：应用程序、软件服务图标
  • 图片：云服务图标、自定义图片
  • 图标：AntDesign Icon、Box Icon等
  • 文字：用于添加说明和标注
  • 线条：用于连接和标注元素
• 智能编辑
  • 一键2D/3D切换：支持在2D和3D视图间无缝切换
  • 自动吸附与对齐：网格自动吸附，方便的连线操作
  • 元素属性编辑：支持位置、大小、旋转、颜色等属性调整
  • 子场景嵌套：支持在主场景中嵌套多个子场景
• 高级呈现
  • 自由视角控制：360°自由旋转和缩放
  • 动画播放：支持场景动画，动态展示架构演变
  • 全景展示：3D全景介绍思路，多视角自由变换
  • 高清导出：支持8K-16K高清分辨率导出
• 数字孪生集成
  • 实时数据接入：支持自定义数据接入，对接各类监控系统
  • 状态同步：通过JS SDK控制3D元素状态
  • Web组件嵌入：提供易于嵌入的Web渲染组件

适用场景

1. 软件架构设计：在软件架构设计阶段，iCraft Editor创建的3D架构图能帮助团队成员更好地理解整体系统结构和组件间的关系。如，可创建微服务架构图、云原生部署图等，通过3D视角展示服务间的依赖关系和通信路径。
2. 系统部署与维护：在系统部署和维护过程中，iCraft Editor生成的3D架构图可直观显示系统的各个部分及其空间关系。通过数字孪生功能，甚至可动态展示实时组件状态，帮助运维人员快速定位和解决问题。
3. 云架构可视化：特别适合展示AWS、Azure、GCP等云服务架构。用户可从多个角度观察云资源布局，理解VPC、子网、安全组等网络组件的空间关系。
4. 工业互联网与智能制造：在智能工厂场景中，iCraft Editor可绘制IoT设备网络拓扑、生产线布局、设备状态监控等3D场景图，实现生产过程的数字孪生。
5. 培训与教学：在培训和教学场合，3D架构图能够吸引听众注意力，提高沟通效率。通过生动的3D图像和动画，可更清楚地解释复杂概念和技术原理。
6. 产品结构与工艺展示：支持创建3D产品结构图，多角度动态展示产品内外结构、零部件和工作原理。也适用于工艺流程图的3D化展示。

优势

1. 视觉表现力强：3D立体效果让架构图更加生动直观，相比传统2D图表，能更好地展示空间关系和层次结构。自由视角控制让用户可从任意角度观察系统，发现2D图中难以察觉的细节。
2. 易用性高：简洁直观的界面设计让新手也能快速上手。拖拽式操作、自动吸附等功能降低了使用门槛，即使没有3D设计经验的用户也能在短时间内创建专业图表。
3. 开源与可定制：作为开源项目，iCraft Editor提供了完全的代码透明度和可定制性。开发者可根据需要修改源码，或基于现有功能进行二次开发。
4. 强大的集成能力：支持外部模型导入（GLB、GLTF格式），可无缝嵌入现有的3D资源。提供React组件库，便于将3D场景集成到Web应用中。
5. 成本效益：免费版本提供基础功能，满足个人和小团队的基本需求。相比商业3D设计软件，iCraft Editor的性价比更高。
6. 专注于专业场景：不像通用3D建模软件那样功能繁杂，iCraft Editor专注于架构图设计，提供了针对性的功能和模板，提高了专业场景下的工作效率。

局限性

1. 功能相对专一：作为专注于架构图设计的工具，iCraft Editor在通用3D建模能力上相对有限。不适合需要复杂曲面建模、材质编辑、灯光渲染等高级3D设计任务。
2. 性能要求较高：3D渲染对硬件有一定要求，在低配置设备或老旧浏览器上可能出现卡顿。复杂的3D场景可能需要较强的GPU支持才能流畅运行。
3. 学习曲线存在：虽然比专业3D软件简单，但对于完全没有3D概念的用户，仍需要一定时间适应三维空间的操作逻辑，如视角控制、旋转调整等。
4. 协作功能有限：相比LucidChart等成熟的在线协作工具，iCraft Editor在实时多人协作方面的功能可能不够完善，更适合个人或小团队使用。
5. 生态系统尚在发展中：作为相对较新的工具，iCraft Editor的模板库、插件生态相比成熟工具如draw.io、LucidChart还有差距，社区资源和第三方集成相对较少。
6. 导出格式限制：虽然支持多种分辨率导出，但在专业出版或打印场景下，可能不如专业设计软件提供的输出选项丰富。

实战

打开中文站点，无需注册即可在线体验：

有一定的上手门槛。