如何用 graphify callflow-html 自动生成 Mermaid 架构图?完整指南 如何用 graphify callflow-html 自动生成 Mermaid 架构图完整指南【免费下载链接】graphifyTurn any codebase, with its docs, SQL schemas, configs, and PDFs, into a queryable knowledge graph. A /graphify skill for Claude Code, Cursor, Codex, and Gemini CLI: local deterministic AST parsing, every edge explained, no vector store.项目地址: https://gitcode.com/GitHub_Trending/graph/graphifygraphify是一款能把任意代码库连同文档、SQL 结构、配置文件和 PDF转换为可查询知识图谱的开源工具而它的callflow-html导出命令可以一键自动生成基于 Mermaid 的架构流程图 HTML——不需要手写一行 Mermaid 语法也不需要向量库。本地确定性 AST 解析每条边都有出处说明对新手极其友好。本文带你从安装到出图走通graphify callflow-html 生成 Mermaid 架构图的完整流程并附上常用参数调优技巧。graphify 是什么为什么它能画出架构图graphify 的核心思路是先把代码变成图再把图变成报告。代码部分在本地用 tree-sitter 做 AST 解析36 种语言语法无 API 调用提取函数、类、导入、调用关系等节点与边文档、配置、数据库结构等交给你配置的 LLM 后端做语义抽取产出graphify-out/graph.json知识图谱 GRAPH_REPORT.md架构报告。当你有了graph.jsoncallflow-html就会读取它可选再读GRAPH_REPORT.md、.graphify_labels.json和 sections JSON自动聚合成架构分区然后为每个分区生成Mermaid flowchart LR流程图打包成一个自包含的 HTML 文件。实现逻辑集中在 graphify/callflow_html.pyCLI 入口在 graphify/cli.py回归测试见 tests/test_callflow_html.py。三步出图最快生成 Mermaid 架构图第一步安装 graphify克隆仓库本地运行或用uv一行安装推荐git clone https://gitcode.com/GitHub_Trending/graph/graphifyuv tool install graphifyy第二步构建代码知识图谱在你要分析的项目根目录执行把整个代码库抽成知识图谱graphify extract .产物默认写在graphify-out/目录graph.json图谱本体和GRAPH_REPORT.md架构报告。如果你用的是 Claude Code / Cursor / Codex / Gemini CLI也可以直接对 AI 说/graphify .效果相同。第三步运行 callflow-html 生成架构图一条命令Mermaid 架构图即刻生成graphify export callflow-html完成后终端会提示类似callflow HTML written - open in any browser: graphify-out/项目名-callflow.html用浏览器打开即可看到完整架构页。生成的 callflow 页面里有什么打开 HTML 后你会看到一个暗色主题的架构文档页包含以下自动生成的区块架构总览图所有分区的flowchart LR汇总图展示模块级调用流向分区名 节点数每个分区一张 Mermaid 图自动挑选分区内代表性的调用边按源文件分组绘制节点带文件归属小字调用明细表函数/类/异步调用逐行列出带async、class、endpoint等彩色标签导航栏 关键文件卡片顶部 sticky 导航直达各分区交互增强每张 Mermaid 图自带缩放/平移工具栏可拖拽查看大图无需额外 JS 环境Mermaid 由 CDN 加载。所有 Mermaid 源码由 graphify 自动生成节点 ID 和文本做了转义清洗见callflow_html.py中的safe_mermaid_text/node_mermaid_id不会出现特殊字符导致的渲染报错。常用参数与调优技巧场景命令作用指定输出路径graphify export callflow-html --output docs/arch.html架构图放进文档目录控制分区数量graphify export callflow-html --max-sections 8大仓库建议调小页面更聚焦指定其他项目的图谱graphify export callflow-html ./some-repo/graphify-out直接传 graphify-out 目录指定图谱文件--graph /path/to/graph.json --labels /path/to/labels.json自定义输入位置两个新手最常踩的坑图太大渲染慢节点超过 5000 时 Mermaid 渲染会明显变慢加--max-sections 5即可大幅提速图太密看不清默认每个分区最多画 18 个节点、24 条边max_diagram_nodes18/max_diagram_edges24它会自动只保留代表性边而不是把整张图塞进去所以看到边比实际少是正常的。让架构图随 git 提交自动刷新如果安装了 git hookcallflow-html会在每次提交时自动重新生成架构图永远与代码同步graphify hook install # 提交时自动重建图谱之后正常git commitgraphify-out/项目名-callflow.html就会保持最新适合把架构图作为仓库文档的一部分维护。新手常见问题Q不需要配 API Key 就能用吗代码抽取走本地 AST完全离线。callflow-html只读已有的graph.json纯本地运算全程零 API 调用。Q生成的 HTML 能直接分享给别人吗可以。它是自包含单文件仅 Mermaid 运行时走 CDN发到内网、附在文档里、或提交到仓库都行。Q支持哪些语言Python、TypeScript、Go、Rust、Java、C/C、C#、PHP、Swift、Kotlin、Ruby、SQL 等 36 种 tree-sitter 语法外加 Apex、Terraform、Markdown 文档和配置文件。总结graphify 把读代码理架构这件苦差事变成了两条命令graphify extract .建图graphify export callflow-html出图。得到的 Mermaid 架构图是确定性解析的产物——每条边都能追溯到源码而不是 AI 猜的。对于刚接手新项目或需要维护架构文档的团队这是目前最简单省事的自动生成方案。【免费下载链接】graphifyTurn any codebase, with its docs, SQL schemas, configs, and PDFs, into a queryable knowledge graph. A /graphify skill for Claude Code, Cursor, Codex, and Gemini CLI: local deterministic AST parsing, every edge explained, no vector store.项目地址: https://gitcode.com/GitHub_Trending/graph/graphify创作声明:本文部分内容由AI辅助生成(AIGC),仅供参考