返回免费在线工具集合

流程图绘制

在线画流程图:拖拽摆放开始、步骤、判断、输入输出等方块,双击改文字,点两下就能连出带箭头的分支线,支持自动排版,导出 PNG / SVG / JSON。

设计 独立定制 输出:PNG / SVG 文件 免费使用 发布时间: 阅读量:7 作者:马慧
正在加载工具…

色值从文字里抠

冀网桢要一张能贴进方案的审批流,面板先把"新方块类型"定成"流程步骤",配色取"科技蓝 #2F6BFF"。源码里 theme() 用正则从选项文字抠六位色值,抠不到就回退"2F6BFF"。这一步只设参数,不产生文件。

新方块类型选「流程步骤」、配色选「科技蓝 #2F6BFF」

加方块只多一个

点一下"添加方块",画布里就多出一个写着"新步骤"的节点,实测只加了这一个。按钮清单还有连线、删除选中、自动排版、清空、导入 JSON 这几项,这次都没按,画布上没多出任何连线,也没有谁替它排过版。

点「添加方块」往画布里加节点

画布原有八节点

.zab-canvas-wrap 里承载 SVG,实测读到的文字依次是 是、否、开始、提交申请、"资料齐全?"、进入审批、退回补充材料、结束,末尾才是新加的"新步骤"。前八个是画布自带的示例流程,导出的图里会连它们一起带上,别当成凭空生成的完整流程图。

看画布区的方块与连线

放大两倍才出图

"导出 PNG"之后拿到 流程图.png,113829 字节、1920×1280。画布固定 960×640,svgToPng 按 scale=2 把边长翻倍再 toBlob,尺寸正好对得上,不是 html2canvas 那条路。导出 SVG、保存 JSON、打印各自的产物,这次没点。

点「导出 PNG」保存流程图

企业知识网( www.qiyezhishi.com )提供的结果为参考性内容,不构成法律、税务或投资建议。具体请以主管部门口径与最新法规为准。

本文作者

马慧,企业知识网站长,10年+SEO/GEO经验,精通白帽SEO与网站优化,擅长全网营销与短视频引流,曾打造日均万IP的SEO博客(小小课堂网)、十万IP泛流量资讯网站(错误博客)。自川来熟食连锁店长,5年熟食生产与管理经验,精通抖音本地生活服务运营。