Flora：面向 AI 时代的容错图表库十天从零发布

一位数据工程师在十天之内，借助 AI 编码代理从零搭建并发布了一款名为 Flora 的图表渲染库，并在 Hacker News 上分享了整个过程。Flora 的核心定位十分明确：在保留 Mermaid 语法习惯的前提下，提供更精致的输出，以及一套「能弯不折」的容错解析器——这恰好契合当下大模型频繁输出 Mermaid 代码却经常出现小幅语法偏差的现实。

为什么需要又一个图表库

作者在文中回顾了自己作为数据工程师的日常：在动手写任何数据管道之前，都需要先画一张架构图，说明数据怎么流、落到哪里、谁与谁对话。Mermaid 早已成为「图表即代码」的通用语言，也是 LLM 输出图表时的默认选择。然而两个问题长期困扰着他：

• 美观度难以定制。想统一文档站点的配色、调整一个圆柱形节点的标签不被挤压，几乎都要走「硬编码 SVG」的老路，失去 Mermaid 的声明式便利。
• 容错性差。LLM 写出的 Mermaid 代码常常接近正确但差一行，Mermaid 解析器一旦报错，整个图表就只剩空白框。

Flora 的解题思路是：沿用 Mermaid 的语法，提供更好的视觉效果，并让解析器跳过无法理解的行、报告行号诊断，而不是整体崩溃。在 CI 场景下，开发者也可以开启 strict 模式让构建失败。

功能与接入方式

Flora 自带交互能力，支持缩放、平移，点击任意节点可向上下游追溯数据血缘。其默认主题与 sketch 主题分别对应「正式架构」与「白板草稿」两种语境。它提供多种使用方式：

• JavaScript / TypeScript：npm install @topspinj/flora。
• 纯 HTML：通过 CDN 注册 <flora-diagram> Web 组件，无需构建步骤。
• React：提供封装组件，对应 LLM 在搭前端时的默认技术栈。
• Markdown 文档：rehype 插件可在构建期渲染图表代码块，默认会让构建在图表出错时失败。
• Python / Jupyter：pip install florajs，可用于无头导出 SVG。
• 不支持脚本的平台：托管的 /embed 路由可通过 iframe 嵌入 Ghost、Substack、Notion 等。
• 浏览器：在线 Playground 直接渲染，URL 可分享。

用 AI 代理「十日造轮子」的工程实录

文章后半段的重心从产品转向流程。作者坦言自己并不常写 TypeScript，十年来的工作以 Python 和 SQL 为主，过去从未发布过 npm 包、配置过 TypeScript 构建，也未认真设计过解析器。但十天后，这三件事全部完成，Python 包甚至在 30 分钟内就推上了 PyPI。

他将这套工作流总结为 「把 GitHub Issue 当作 Prompt」：不是写给未来的自己或假设的协作者，而是明确假定由 AI 代理来领取。作者引用自己此前的文章《专业伪代码的价值》，主张把模糊的意图转译为精确规范正在成为软件工程师的核心工作。例如，issue 不会写成「parser 烂了」，而是写成具体的语义与测试要求，issue 列表由此变成了与「速度极快的同事」之间的通信协议。

文章末尾的更新还提到，新发布的 Claude Fable 5 在收到邮件两小时内就完成了 Flora 的 React 封装组件；过去 48 小时内，CDN 资源、Web 组件、解析器诊断、严格模式、Python 包以及托管 Playground 等模块密集提交，占到项目提交历史的一半左右。文章原文在此处被截断，未继续展开后续反思。

一点小结

Flora 本身并非来自大厂，但它把「为 LLM 输出做工程化兜底」这一思路具体化了：当大模型成为图表、文档乃至业务逻辑的默认生成者，下游渲染器与工具链必须为「差一点就对」做好准备。同时，它也是近期「AI 代理 + 严格规范的 Issue 列表 = 个人开发者两周做出完整产品」趋势的一个微观样本。