企业官网建设流程全解析

Drawnix 开源白板：3 种场景快速上手思维导图与流程图

【免费下载链接】drawnix开源白板工具（SaaS），一体化白板，包含思维导图、流程图、自由画等。All in one open-source whiteboard tool with mind, flowchart, freehand and etc.项目地址: https://gitcode.com/GitHub_Trending/dr/drawnix

还在把思维导图画到 PPT 里再截图？Drawnix 把思维导图、流程图、自由手绘塞进同一块无限画布，一个开源白板全搞定。

项目定位速览

Drawnix 是一款免费开源的一体化白板工具，底层基于 Plait 画图框架与 Slate 富文本框架搭建。它把导图、流程、手绘、图片管理这些常见需求装进同一张画布，适合头脑风暴、文档整理、技术方案演示的个人和团队。你不用在多个软件之间来回切换，一张画布就能出活。

💡 把 Markdown 变成一张思维导图

最省事的场景，往往是你手里已经有一份 Markdown 笔记。把正文贴进转换弹窗，点一下确认，标题层级和子分支会自动排成脑图，你只需拖动节点微调。选中节点再按 Tab，能立刻长出子节点；双击可直接改文字，不用重新建框。这一步省去了逐个加框、连线的工夫。转换入口在 markdown-to-drawnix.tsx，它负责解析 Markdown 语法并生成思维导图节点。

用 Mermaid 语法画审批流程图

脑图管发散，流程图管落地。如果你已经把步骤写清楚了，可以直接写 Mermaid：把flowchart TD这类代码粘进弹窗，它会被解析成一串可编辑的流程元素，箭头、判断框、节点各就各位，再拖拽对齐即可。转换后还能在工具栏切换箭头样式、填充色，给关键路径单独上色。对习惯用代码描述流程的人，这比手画快得多。解析逻辑在 mermaid-to-drawnix.tsx，负责把 Mermaid 语法转成流程图元素。

拖进图片，随手涂鸦草图

框线画得再规整，有些细节还得靠手感。你可以直接把图片拖进画布，缩放、挪位置都行；也可以切到画笔，随手勾箭头、圈重点，画错了随时撤销，不用担心破坏布局。画布是无限大的，缩放、平移随便操作，刚才画的地方找得回来。笔触生成和平滑算法集中在 plugins/freehand/，它决定了你画出来是抖动的还是顺滑的。

📌 一键导出成 PNG 分享给同事

画到这一步，通常就该发出去了。右上角菜单里可以导出成 PNG 图片，也可以存成.drawnix文件留档，后者是 JSON 格式，随时能导回来继续编辑，方便备份和对比。更省心的是，浏览器会边画边自动保存，关掉页面再打开，进度还在。导出与序列化逻辑在 data/filesystem.ts。

快速上手

1. 克隆仓库：git clone https://gitcode.com/GitHub_Trending/dr/drawnix
2. 安装依赖：npm install
3. 启动开发服务器：npm run start

更多细节与架构说明见 README.md。

Drawnix 最大的长处是插件化架构：导图、流程、手绘、图片都能按需扩展，不用推倒重来。想快速拥有一支能导、能画、能分享的开源白板，它值得一试。

【免费下载链接】drawnix开源白板工具（SaaS），一体化白板，包含思维导图、流程图、自由画等。All in one open-source whiteboard tool with mind, flowchart, freehand and etc.项目地址: https://gitcode.com/GitHub_Trending/dr/drawnix