Hacker News 中文摘要

RSS订阅

我用Excalidraw管理博客图表 -- I use excalidraw to manage my diagrams for my blog

原文链接 | HN讨论 | 2026-03-30 20:59:50

文章摘要

作者介绍了自己博客图片管理的方法：使用Excalidraw工具，将需要导出的元素用框架包裹并添加"export_"前缀，通过自研的excalidraw扩展插件自动生成适用于明暗两种模式的SVG图片。

文章总结

我的博客图片管理方案 | Martin Lysk

核心内容概述

作者Martin Lysk分享了他为个人博客优化图片管理的工作流程，主要解决了使用Excalidraw绘图工具时图片导出的效率问题。

初始痛点

  1. 每次修改Excalidraw图表需要9个操作步骤
  2. 完整导出流程耗时约45秒
  3. 文字与图表内容需要频繁同步调整

第一版解决方案：GitHub Action

  • 自动检测变更的.excalidraw文件
  • 使用jq提取画框元素
  • 通过excalirender工具导出明/暗双模式SVG
  • 自动提交生成的图片文件

方案缺陷

  1. 依赖的渲染库存在显示bug
  2. 无法在ARM架构Mac本地运行
  3. 必须推送代码才能看到更新效果

终极方案：VS Code插件改造

作者fork了Excalidraw的VS Code扩展，新增功能： - 自动监控.excalidraw文件变更 - 识别以"export_"为前缀的画框 - 实时生成明/暗双模式SVG（格式：[图片名].[light/dark].exp.svg） - 支持本地实时预览

实施效果

  • 总开发时间仅数小时（含本文撰写）
  • 图片更新流程简化为2步：
    1. 用画框包裹元素
    2. 命名画框为export_图片名

后续计划

作者考虑将方案提交给原项目作为参考，但暂不打算主导维护。目前提供编译好的插件供他人试用。

相关技术标签：博客、Excalidraw、VS Code

本文是作者"SQLite on Git"系列文章的技术准备，后续将应用该图片管理方案。

评论总结

总结评论内容如下：

  1. 对Excalidraw的评价

    • 正面评价：用户认为Excalidraw比draw.io更好用，风格更自然。
      • "It's not perfect, some things make me crazy but overall it is better than draw.io" (评论2)
      • "Excalidraw also has these great styles that just feel right :)" (评论2)
    • 负面评价：默认字体难看且不专业。
      • "Its a shame the default font is ugly, childish and inaccessible." (评论5)

  2. 与其他工具的比较

    • 用户提到Mermaid和Tikz作为替代方案，强调可版本控制的优势。
      • "I am a huge fan of mermaid diagrams because it lets me check in my diagrams into git." (评论12)
      • "Another option I use open is to ask the code-agent to make a diagram using Tikz" (评论10)

  3. AI生成图表的讨论

    • 支持者认为AI可以加速图表生成，但需要多次迭代。
      • "But in general AI-diagramming is still unsolved; needs several iterations" (评论10)
    • 批评者认为AI生成图表已成为一种陈词滥调。
      • "they are becoming AI tells like the em-dash or the blue-glow of the early AI generated images" (评论6)

  4. 图表维护的挑战

    • 用户讨论如何保持图表与代码同步或将其视为一次性工具。
      • "Documentation often rots away because it's often decoupled from the code it describes." (评论12)
      • "diagrams are most useful early in thinking, but once things get complex they either become outdated or too hard to maintain" (评论16)

  5. 自定义解决方案

    • 部分用户开发了自己的工具或集成方案。
      • "I had to make my own[1] to create something that's easy to use and looks good/normal." (评论8)
      • "I made a custom Payload CMS block that allows to create and update excalidraw diagrams within the CMS." (评论7)