① 四步上手
- 粘贴代码:左边编辑器支持 JS / TS / Python / Java / C / C++ / Go / PHP / C# 等常见写法,语言一般能自动识别;识别不准时在右上角手动切换。
- 生成流程图:输入后自动生成(也可以按 Ctrl+Enter)。画布上滚轮缩放、按住拖拽平移、双击回到适应窗口。
- 点图找代码:点击任意节点,左边编辑器会自动滚到对应代码行、选中那一行并闪一下高亮;被点的节点也会保持发光。讲解代码时特别顺手。
- 导出:PNG 适合贴到 Word / PPT;SVG 是矢量图,放大不糊;Mermaid 是文本源码,可直接贴进 Markdown、Typora、语雀、GitHub。
② 能识别的结构
| 代码 | 图形 |
| 函数定义 / 主流程 | 拆成多张图,每张都有独立的「开始 / 结束」 |
if / else if / else | 菱形判断,是 向下、否 向右,最后汇合 |
for / while / do-while | 菱形判断 + 左侧回边箭头 |
switch / case / default | 六边形多路分支,各分支并排后汇合 |
try / catch / finally | 分段标题 + 顺序执行 |
return / break / continue | 圆角终止节点 / 虚线控制节点 |
printf / console.log / scanf / input … | 平行四边形(输入输出) |
foo(bar) 函数调用 | 双线矩形(子程序) |
③ 分享与保存
点 分享 会复制一条带 # 参数的链接,别人打开就是同一份代码和同一张图。代码也会自动存在浏览器本地,刷新不丢。想放到自己的域名上长期使用,见下面的「部署」一节。
④ 把网站部署到自己的域名
本站是纯静态页面,不需要服务器和数据库,免费托管就够用。本站当前用 Netlify 托管,基本流程四步:
- 本地预览:在项目目录执行
python -m http.server 8080,浏览器打开 http://localhost:8080。
- 上传托管:先登录 Netlify,再打开
app.netlify.com/drop,把整个文件夹拖进去。未登录就拖会生成"未认领"站点,别人打开会被跳转到登录页。
- 绑定域名:Netlify 里
Site configuration → Domain management → Add a domain,填 chenwenao.bot.cd,它会给出 CNAME 目标 amazing-tiramisu-bc18b0.netlify.app。
- 加解析:登录 DNSHE 面板(
my.dnshe.com)→ 域名中心 → 找到 chenwenao.bot.cd → 添加记录:类型 CNAME、主机记录 @、记录值 amazing-tiramisu-bc18b0.netlify.app。等几分钟生效,HTTPS 证书自动签发。
详细的图文步骤、验证命令和常见报错处理(含 401 必须登录的问题),都写在项目的 README.md 里。
⑤ 常见问题
- 图太宽放不下?点「适应窗口」,或者导出 SVG 后在其它软件里继续排版。
- 某个结构没画出来?把写法简化成最常见的
if (…) / for (…) 形式,本工具是启发式解析,不做完整语法编译。
- 中文显示成方块?浏览器缺少中文字体,安装「思源黑体 / Noto Sans SC」即可;导出 PNG 用的是你本机字体。