开发工具【免费下载链接】js-code-to-svg-flowchartjs2flowchart - a visualization library to convert any JavaScript code into beautiful SVG flowchart. Learn other’s code. Design your code. Refactor code. Document code. Explain code.项目地址https://gitcode.com/gh_mirrors/js/js-code-to-svg-flowchart点击查看免费下载js2flowchart 是一个以 JavaScript 代码为输入、以 SVG 流程图Flowchart为输出的可视化库支持在浏览器与 Node.js 环境中运行并覆盖 ES6 语法。本文以官方 README 为主线结合仓库源码FlowTreeBuilder.js、SVGRender.js、cli/index.cli.js 等讲解安装、CLI、核心 API、抽象层级、主题系统、Shape 编辑器、修饰器等完整能力读完后你将能独立把任何一段 JS 代码生成、定制并导出为可展示的 SVG 流程图。为什么需要 js2flowchart作者在编写 Under-the-hood-ReactJS 系列时花费了大量时间手工绘制代码结构图代码或流程图一旦发生变更整张图的所有碎片都要重新移动、对齐纯粹是重复性体力劳动。js2flowchart 正是为消除这类重复工作而生——它接收任意 JS 代码在客户端和服务端都能生成 SVG 流程图并允许你按上下文调整样式方案、从不同抽象层级展示代码逻辑还支持高亮、整块销毁destruction、自定义修饰器等能力。主要特性一览预定义抽象层级只渲染 import/export、类/函数名、函数依赖等用于逐步学习和解释代码自定义抽象层级创建属于自己的层级演示生成器presentation generator按不同抽象层级生成一组 SVG预定义流程树修饰器将[].map、[].forEach、[].filter等常见 API 映射为流程图中的 Loop 结构销毁修饰器将一段代码块替换为流程图上的单个形状自定义流程树修饰器创建自己的修饰器流程树忽略过滤器完全省略某些代码节点如 log 行聚焦节点或整个逻辑分支在流程图上高亮重要部分模糊节点或整个逻辑分支隐藏次要内容预定义样式主题提供多种配色方案自定义主题支持创建贴合自己上下文配色的主题自定义颜色与样式支持提供简洁 API 免样板修改特定样式。典型使用场景用流程图解释/文档化你的代码通过视觉理解学习他人代码为任何能用合法 JS 语法描述的流程创建流程图。安装与最小示例从 NPM 安装包yarn add js2flowchart仓库的 package.json 记录了当前版本1.3.5包主入口为dist/js2flowchart.js同时提供 UMD/CommonJS 形态因此既能在浏览器中通过script标签注入也能通过 ES6 模块在配置了 Babel 与 Webpack 的项目中使用/** * 当 js2flowchart 被注入到 HTML 页面时通过 window 全局变量访问 API */ const {convertCodeToFlowTree, convertFlowTreeToSvg} window.js2flowchart; /** * 或从 node_modules 导入 */ import {convertCodeToFlowTree, convertFlowTreeToSvg} from js2flowchart; // 方式 1 import * as js2flowchart from js2flowchart; // 方式 2拿到一段代码后最直接的用法是调用convertCodeToSvg。以经典的二分查找为例const code function indexSearch(list, element) { let currentIndex, currentElement, minIndex 0, maxIndex list.length - 1; while (minIndex maxIndex) { currentIndex Math.floor(minIndex maxIndex) / 2; currentElement list[currentIndex]; if (currentElement element) { return currentIndex; } if (currentElement element) { minIndex currentIndex 1; } if (currentElement element) { maxIndex currentIndex - 1; } } return -1; };转换它最简单的方式const svg js2flowchart.convertCodeToSvg(code);转换结果如下图所示循环、条件分支、返回语句被映射为不同的形状并以箭头串联执行顺序。该示例的完整源码见 docs/examples/default/index.html代码样例见 samples/default.js。CLI把本地 JS 文件直接变成 SVG除了在代码中调用 API你还可以使用 CLI 工具直接从本地 JS 文件生成 SVG 文件。全局安装yarn global add js2flowchart或者在项目中安装yarn add js2flowchart --dev打开终端进入包含待可视化 JS 文件的目录例如./my-project/main.js运行全局安装时js2flowchart main.js或者把脚本写入package.json{ scripts: { js2flowchart: js2flowchart } }然后通过 npm 或 yarn 运行yarn run js2flowchart main.js脚本执行完成后终端会输出日志SVG file was created: ./js2flowchart/main.js.svg生成的 SVG 文件位于 JS 文件旁边新建的/js2flowchart目录中。从 CLI 源码 cli/index.cli.js 可以看到bin字段将命令绑定到该文件见 package.json它基于commander解析参数并支持两个额外的选项-a, --abstraction [list]指定抽象层级例如function,import对应 README 中定义的function、function_dependencies、class、import、export几个取值大小写不敏感最终通过createFlowTreeBuilder().setAbstractionLevel(...)构建流程树-p, --presentation按不同抽象层级拆分输出源码注释中标记为尚未实现。CLI 底层其实就是调用js2flowchart.convertCodeToSvg(code)createSvgFile函数因此命令行与 API 两套方式产出一致。核心 API两段式转换管线convertCodeToSvg是最简入口但如果你需要修改默认行为可以把它拆成两个构建块流程树构建flow tree building形状打印shapes printingconst {convertCodeToFlowTree, convertFlowTreeToSvg} js2flowchart; const flowTree convertCodeToFlowTree(code); const svg convertFlowTreeToSvg(flowTree); // XML 字符串当需要完全控制时可以手动创建两个核心实例const {createFlowTreeBuilder, createSVGRender} js2flowchart; const flowTreeBuilder createFlowTreeBuilder(), svgRender createSVGRender(); const flowTree flowTreeBuilder.build(code), shapesTree svgRender.buildShapesTree(flowTree); const svg shapesTree.print(); // XML 字符串从入口文件 index.js 的实现可以看到这三个 API 的关系convertCodeToSvg只是convertFlowTreeToSvg(convertCodeToFlowTree(code), printConfig)的组合convertCodeToFlowTree内部创建FlowTreeBuilder并调用build(code)convertFlowTreeToSvg内部创建SVGRender、调用buildShapesTree(flowTree)再print(printConfig)。因此两段式写法与一步式写法的行为完全等价只是给了你在中间插手的机会。抽象层级Abstraction Level什么是抽象层级假设你想省略一些细节例如对于某个模块你只关心它exports了什么或者它包含哪些类。js2flowchart 提供了一组预定义层级通过ABSTRACTION_LEVELS接口访问FUNCTIONFUNCTION_DEPENDENCIESCLASSIMPORTEXPORT以模块的 imports 与 exports 为例下面是某个print-util.js的代码const code import {format, trim} from formattier; import {log} from logger; const data []; export default print (list) { list.forEach(i { console.log(i); }); } export const formatString (str) formatter(str); export const MAX_STR_LENGTH 15; ;我们需要实例化flowTreeBuilder并为其指定抽象层级const { ABSTRACTION_LEVELS, createFlowTreeBuilder, convertFlowTreeToSvg } js2flowchart; const flowTreeBuilder createFlowTreeBuilder(); // 可以传一个层级也可以传多个层级 flowTreeBuilder.setAbstractionLevel([ ABSTRACTION_LEVELS.IMPORT, ABSTRACTION_LEVELS.EXPORT ]); const flowTree flowTreeBuilder.build(code); const svg convertFlowTreeToSvg(flowTree);转换结果只保留 import 与 export 节点省略了函数体等细节该示例完整源码见 docs/examples/defined-abstraction-level/index.html。从源码看ABSTRACTION_LEVELS的每个取值都对应一个定义列表abstractionLevelsConfigurator.js 中FUNCTION与FUNCTION_DEPENDENCIES由专门的工厂函数生成CLASS、IMPORT、EXPORT则直接是 TOKEN 类型数组。调用setAbstractionLevel后rebuildConfigForAbstractionLevel会把传入的字符串、数组或对象统一合并进definedLevels与customLevels最终从 entryDefinitionsMap.js 的DefinitionsList中筛选出对应类型并拼接自定义条目替换掉 builder 内部的definitionsMap见 FlowTreeBuilder.js。自定义抽象层级进阶如果预定义层级不够你可以向同一个 API 端点flowTreeBuilder.setAbstractionLevel传入配置对象。先看 functionDependencies.js 这个函数依赖层级的导出export const getFunctionDependenciesLevel () ({ defined: [TOKEN_TYPES.CALL_EXPRESSION], custom: [ getCustomFunctionDeclaration(), getCustomAssignmentExpression(), getCustomVariableDeclarator() ] });这就是你需要传入的数据格式flowTreeBuilder.setAbstractionLevel({ defined: [TOKEN_TYPES.CALL_EXPRESSION], custom: [ getCustomFunctionDeclaration(), getCustomAssignmentExpression(), getCustomVariableDeclarator() ] })那么getCustomAssignmentExpression背后是什么是一份 token 解析配置{ type: TokenType, /* 类型见 TOKEN_TYPES 映射表 */ getName: (path) {/* 从 token 中提取名称 */}, ignore: (path) {/* 若想省略该条目则返回 true */} body: true /* 是否应包含嵌套块 */ }TOKEN_TYPES全集定义在 constants.js覆盖函数、循环、条件、switch、try/catch、throw、ES Harmony 的 import/export/class/箭头函数等所有 AST 节点类型。更多 token 解析配置见源码 entryDefinitionsMap.js——例如VARIABLE_DECLARATOR的ignore会跳过无初始化值或初始值为函数的声明CALL_EXPRESSION的body: false表示调用表达式不展开嵌套块。自定义函数依赖层级正是通过改写getName取右侧调用表达式名并加强ignore仅保留右侧为函数调用的赋值/声明实现的见 functionDependencies.js。Presentation Generator演示生成器学习他人代码时最好的方式是按不同抽象层级逐步深入先看模块导出了什么再看包含哪些函数和类……createPresentationGenerator子模块就是为此设计的它能按不同抽象层级生成一组 SVG。以下面这段代码为例const code import {format} from ./util/string; function formatName(name) { if (!name) return no-name; return format(name); } class Animal { constructor(breed) { this.breed breed; } getBreed() { return this.breed; } setName(name) { if (this.nameExist()) { return; } this.name name; } } class Man extends Animal { sayName() { console.log(name, this.name); } } export default Man; ;把它传给演示生成器const { createPresentationGenerator } js2flowchart; const presentationGenerator createPresentationGenerator(code); const slides presentationGenerator.buildSlides(); // SVG 数组其中一页幻灯片的效果如下在示例页面中你可以通过 prev-next 按钮切换幻灯片交互效果与完整源码见 docs/examples/one-module-presentation/index.html。从源码 PresentationGenerator.js 可以看到buildSlides的内部逻辑它先解析 AST然后依次生成 5 个层级的流程树——仅EXPORT→EXPORT IMPORT→ 再加CLASS FUNCTION→ 再加FUNCTION_DEPENDENCIES→ 最后是完整常规流程树generateRegularSlideTree过滤掉空树后逐个渲染为 SVG 字符串。这就是逐层讲解自动化的实现原理。颜色主题与自定义样式你可以给svgRender实例应用不同的主题例如调用svgRender.applyLightTheme()应用浅色方案。预定义配色方案有 4 种DEFAULTapplyDefaultThemeBLACK_AND_WHITEapplyBlackAndWhiteThemeBLURREDapplyBlurredThemeLIGHTapplyLightTheme以 MDN 文档中的switch语句示例为输入const code function switchSampleFromMDN() { const foo 0; switch (foo) { case -1: console.log(negative 1); break; case 0: console.log(0); case 1: console.log(1); return 1; default: console.log(default); } } ;为渲染应用主题const {createSVGRender, convertCodeToFlowTree} js2flowchart; const flowTree convertCodeToFlowTree(code), svgRender createSVGRender(); // 为渲染应用另一种主题 svgRender.applyLightTheme(); const svg svgRender.buildShapesTree(flowTree).print();应用 Light 主题后的 switch 流程图该示例完整源码见 docs/examples/defined-color-theme/index.html。自定义颜色主题如果预定义配色不满足需求可以手动构造颜色主题。下面是 Light 主题配色的手工版本svgRender.applyColorBasedTheme({ strokeColor: #555, defaultFillColor: #fff, textColor: #333, arrowFillColor: #444, rectangleFillColor: #bbdefb, rectangleDotFillColor: #ede7f6, functionFillColor: #c8e6c9, rootCircleFillColor: #fff9c4, loopFillColor: #d1c4e9, conditionFillColor: #e1bee7, destructedNodeFillColor: #ffecb3, classFillColor: #b2dfdb, debuggerFillColor: #ffcdd2, exportFillColor: #b3e5fc, throwFillColor: #ffccbc, tryFillColor: #FFE082, objectFillColor: #d1c4e9, callFillColor: #dcedc8, debugModeFillColor: #666 });applyColorBasedTheme的实现是buildColorsBasedTheme(colors)→buildTheme(colors)见 StyleThemeFactory.js它会用这套颜色生成完整主题对象——所有形状的填充色、边框色、文本色、箭头色都在 DefaultBaseTheme.js 的buildTheme中按形状类型展开。自定义样式如果需要的不仅是颜色而是更细粒度的样式可以使用svgRender.applyTheme({})。它会在当前主题之上叠加样式只覆盖你需要改变的行为。以 Return 语句为例svgRender.applyTheme({ common: { maxNameLength: 100 }, ReturnStatement: { fillColor: red, roundBorder: 10 } });common块会被合并进所有形状applyStyleToTheme将common与每个 shape 条目展开合并见 StyleThemeFactory.js而ReturnStatement块只作用于对应形状。所有可能的形状名称与属性定义见 DefaultBaseTheme.js——包括BaseShape字体、字号、行高、内边距、圆角、maxNameLength等基础属性、ConnectionArrow箭头大小、线宽、拐弯半径、以及Rectangle、LoopRhombus、ConditionRhombus、RootCircle、ReturnStatement、DestructedNode、ClassDeclaration、DebuggerStatement、ExportDeclaration、ImportDeclaration、ThrowStatement、TryStatement、CatchClause、SwitchStatement、BreakStatement、SwitchCase、ContinueStatement、ObjectProperty、CallExpression等各形状的专属配置。ShapesTreeEditor聚焦与模糊ShapesTreeEditor是用于修改形状树的子模块提供以下接口findShapeapplyShapeStylesblurfocusblurShapeBranchfocusShapeBranchprint以一个带devMode hooks的代码为例const code const doStuff (stuff) { if (stuff) { if (devFlag) { log(perf start); doRecursion(); log(perf end); return; } doRecursion(); end(); } else { throw new Error(No stuff!); } return null; }; ;我们想要模糊blur那个 dev 分支条件因为它干扰了代码的可读性const { convertCodeToFlowTree, createSVGRender, createShapesTreeEditor } js2flowchart; const flowTree convertCodeToFlowTree(code), svgRender createSVGRender(); shapesTree svgRender.buildShapesTree(flowTree); const shapesTreeEditor createShapesTreeEditor(shapesTree); shapesTreeEditor.blurShapeBranch( (shape) shape.getName() (devFlag) ); const svg shapesTreeEditor.print();模糊处理后的结果devFlag 分支整体被弱化主干逻辑一目了然。该示例的完整源码见 docs/examples/blur-shape-branch/index.html图片效果见 docs/examples/blur-shape-branch/flowchart-image.png。从源码 SVGRender.js 看blur会为匹配形状应用getBlurredTheme()中对应形状类型的模糊主题focus是它的反操作——this.blur(shape !fn(shape))即模糊掉所有不匹配的形状blurShapeBranch则通过traversal递归遍历匹配形状的整棵子树把分支内每个形状及其连接箭头全部应用模糊主题applyShapeStyles支持为匹配形状同时覆盖形状样式与连接箭头样式。这些接口组合起来可以在不修改原始代码的前提下灵活控制流程图的信息密度。FlowTreeModifier修改流程树FlowTreeModifier是修改流程树的子模块允许你把单独定义的修饰器应用到现有流程树上。最简单的用例是修改树节点的名称标题。不过有些行为我们已经明确需要修改流程树。先看 ES5 数组迭代器比如forEach、map等——它们的行为本质上就是循环那么就把它们当作循环处理const code function print(list) { const newList list.map(i { return i 1; }); newList.forEach(i { console.debug(iteration start); console.log(i); console.debug(iteration end); }); } ;const { createFlowTreeBuilder, createFlowTreeModifier, convertFlowTreeToSvg, MODIFIER_PRESETS } js2flowchart; const flowTreeBuilder createFlowTreeBuilder(), flowTree flowTreeBuilder.build(code); const flowTreeModifier createFlowTreeModifier(); flowTreeModifier.setModifier(MODIFIER_PRESETS.es5ArrayIterators); flowTreeModifier.applyToFlowTree(flowTree); const svg convertFlowTreeToSvg(flowTree);结果两个迭代器都被当作循环处理其中forEach还省略了函数回调迭代体直接并入循环。效果图见 docs/examples/defined-modifier/flowchart-image.png完整示例见 docs/examples/defined-modifier/index.html。MODIFIER_PRESETS.es5ArrayIterators在 modifiersFactory.js 中定义为[forEach, filter, map]三个DEFINED_MODIFIERS的组合。以forEach为例其updates会把节点重命名为each in 数组名、类型改为TOKEN_TYPES.LOOP、并把回调体直接提为循环体modifiersFactory.js。还有一个预定义修饰器用于节点销毁destruction它把你指定的代码块销毁为单个块flowTreeModifier.destructNodeTree((node) node.name.indexOf(.forEach) ! -1, and print list...);其内部实现是destructionModifier(test, newNameFn)匹配节点后把body置空、类型改为MODIFIED_TYPES.DESTRUCTED见 modifiersFactory.js图上会呈现为一个折叠节点。需要自定义修饰器时flowTreeModifier.registerNewModifier((node) node.name.includes(hello), { name: world });从 FlowTreeModifier.js 的UpdatesMap可以看到修饰器支持的更新字段name、prefixName、type、body、parent以及用于子树级重构的subTreeUpdate。createFlowTreeModifier在 FlowTreeBuilder.js 中封装为setModifier/registerNewModifier/destructNodeTree/applyToFlowTree四个方法。注意 builder 在build时默认就会应用expressionCallbacksModifier回调表达式重组与arrowFunctionReturnModifier箭头函数返回值标记为return ...两个内置修饰器见 FlowTreeBuilder.js。另外setIgnoreFilter(fn)可以设置全局忽略过滤器从流程树中彻底省略某些节点例如 log 行见 FlowTreeBuilder.js。Debug 渲染给形状加上唯一 ID当你想选中某个形状做特殊样式处理却缺少唯一的选择器时只需给print传入debug标志const { convertCodeToFlowTree, createSVGRender, createShapesTreeEditor } js2flowchart; const svgRender createSVGRender(); const shapesTree svgRender.buildShapesTree(convertCodeToFlowTree(code)); const shapesTreeEditor createShapesTreeEditor(shapesTree); shapesTreeEditor.applyShapeStyles( shape shape.getNodePathId() NODE-ID:|THIS.NAMEN|TCCP-, { fillColor: #90caf9 }); const svg shapesTreeEditor.print({debug: true});打开 debug 渲染后SVG 中每个形状都会被标注出getNodePathId()对应的唯一节点路径 ID方便你定位并定制任意形状。渲染效果见 docs/examples/debug-rendering/flowchart-image.png完整示例见 docs/examples/debug-rendering/index.html。Under the hood底层原理js2flowchart 的完整处理管线分为几个主要阶段从代码生成 AST使用 Babel 团队开发的解析器README 中称为 Babylon当前仓库依赖为 babel/parser将 AST 转换为 FlowTree移除与合并节点FlowTreeBuilder.js并在此阶段应用修饰器FlowTreeModifier.js基于 FlowTree 创建 SVG 对象SVGRender.js期间可应用 ShapesTreeEditor 与主题themes把 SVG 对象打印为 XML 字符串。具体到实现FlowTreeBuilder.build(code)先调用buildAst内部parseCodeToAST配置见 astParserConfig.js再用babel/traverse按definitionsMap构建的 visitor 遍历 AST 生成树节点FlowTreeBuilder.jsSVGRender.buildShapesTree(flowTree)通过 svgObjectsBuilder.js 与 shapesFactory.js 把每个树节点映射为对应形状shapesDefinitionsMap.js 中定义节点类型与形状的对应关系最后由 SVGBase.js 输出 XML 字符串。周边工具与规划社区成员 LucasBadico 为 js2flowchart 开发了一款 Visual Studio Code 扩展code-flowchart可以直接在编辑器中为选中代码生成流程图。README 中列出的待办规划包括完整 CLI 支持、JSX 支持、Flow 支持、TypeScript 支持、多文件支持、Webstorm 插件、Chrome dev-tools 扩展——其中 CLI 的抽象层级选项-a已实现演示模式-p仍在规划中。贡献与许可如果你遇到代码样例无法正常工作的情况欢迎提交 issue如果能附上触发问题的代码行更好也欢迎参与上文的 TODO 事项。本项目基于 MIT 许可证开源见 LICENSE安装、运行与配置方式均可参考本文及 docs 目录下的可运行示例。赞分享开发工具【免费下载链接】js-code-to-svg-flowchartjs2flowchart - a visualization library to convert any JavaScript code into beautiful SVG flowchart. Learn other’s code. Design your code. Refactor code. Document code. Explain code.项目地址https://gitcode.com/gh_mirrors/js/js-code-to-svg-flowchart点击查看免费下载相关推荐终极CMake-examples使用指南从基础配置到高级应用的完整教程终极CMake examples使用指南从基础配置到高级应用的完整教程 CMake examples是一个包含丰富CMake配置示例的开源项目为开发者提供了示例工程教程构建工具js2flowchart革命性JavaScript代码转SVG流程图工具让代码可视化从未如此简单js2flowchart革命性JavaScript代码转SVG流程图工具让代码可视化从未如此简单 js2flowchart是一款功能强大的JavaScrip开发工具JavaScript代码可视化革命如何用js2flowchart将复杂代码变成精美流程图JavaScript代码可视化革命如何用js2flowchart将复杂代码变成精美流程图 js2flowchart是一款强大的JavaScript代码可视化库开发工具上一篇Apache bRPC 贡献指南从 Issue 到 PR 的完整参与路径与代码规范下一篇《算法通关手册》AC 自动机Aho-Corasick多模式串匹配算法详解与 Python 实现创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
