企业官网建设流程全解析

免费 Mermaid 在线画图工具：敲三行文本出流程图，导出 SVG、复制分享链接不装软件

【免费下载链接】mermaid-live-editorEdit, preview and share mermaid charts/diagrams. New implementation of the live editor.项目地址: https://gitcode.com/GitHub_Trending/me/mermaid-live-editor

Mermaid Live Editor 是一个免费的 Mermaid 在线图表编辑器，用文本画图，流程图、时序图、甘特图实时渲染在屏幕右侧。它把"打开拖拽工具 → 逐块摆位 → 导出图片 → 贴回文档"这一串动作压缩成"敲几行文本"。适合写技术文档、给团队同步方案、在线画时序图不装软件的人。

扔掉拖拽画图软件，敲三行文本出一张图

想画张流程图，老流程是这样的：打开拖拽工具，拖框、连线、一个个对齐，导出图片，截图，再贴回文档。内容改一处，整张图重来一遍。发给同事还得附上图片，分辨率低了点还被挑。

Mermaid Live Editor 把这串流程压缩到"写几行文本"的粒度。文本就是图，改一个字符，右侧立刻重画，不用点任何"刷新"。

粘贴九行文本，在线画时序图不装软件

浏览器打开 mermaid.live，不注册不安装，把这段贴进左侧代码区：

flowchart TD subgraph 前端 A1[页面] --> A2[状态] end subgraph 后端 B1[接口] --> B2[数据库] end A2 --> B1

右边立刻出图：subgraph把前后端框成两块，节点再多也乱不了。

想换时序图？把第一行flowchart TD改成sequenceDiagram就行。想画甘特图就换成gantt，其余照旧——"在线画时序图不装软件"这件事，核心就是改开头这一行。

头部加一行配置切深色主题，历史快照自动留 30 份

配色：文件头部加一行

%%{init: {'theme': 'dark'}}%%

深色立即生效。把dark换成forest或neutral都是现成的，图要贴进深浅不一的文档时省事。

历史：编辑器每 60 秒自动存一版快照，最多留 30 份，也能手动打标记。关键改动做完给版本起个名，回头按名字找那一版，逻辑见 src/lib/components/History/historyState.svelte.ts。这些记录只存在你自己浏览器本地，不上传别处，可参考 src/lib/util/persist.svelte.ts。

导出 PNG、SVG、复制免登录查看链接都一键搞定

出图动作全收在 Actions 面板，实现就在 src/lib/components/Actions.svelte：

• 下载 PNG：直接当 PPT 插图，尺寸可按宽度或高度指定像素值
• 下载 SVG：矢量格式，放大不糊，跨设备跨分辨率都稳
• 复制图片：图直接进剪贴板，回任意编辑器 Ctrl+V
• 复制 Markdown：按当前文本实时渲染出一段图片写法，代码一改图跟着变，不用手动重新导出
• 复制查看链接：发给同事，对方打开就是只读页，免登录、免安装，这就是"免登录查看 Mermaid 图"的完整链路
• 复制编辑链接：对方接着改，再回传一条新链接
• 嵌入代码：生成 iframe 或 web component 片段，主题、尺寸都能调，粘进博客就是一张能缩放、能交互的活图

内网访问不了外网，一条 docker compose 拉起自己的

公司内网出不了外网，用仓库自带的 Docker 配置本地起一份：

docker compose up --build

起完浏览器打开 http://localhost:3000，和线上是同一套界面，文本、导出、分享全都能用。

画图这件事，从拖拽、导出、截图、粘贴的长流程，降到了写几行文本的粒度——图能进 Git、能 diff、能随文档一起版本化。现在粘贴三行文本，你文档里的第一张 Mermaid 图几秒就出来了。

【免费下载链接】mermaid-live-editorEdit, preview and share mermaid charts/diagrams. New implementation of the live editor.项目地址: https://gitcode.com/GitHub_Trending/me/mermaid-live-editor