MetonaTeam/MarkLite
2
1
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 11 Wiki Activity

11 Releases 11 Tags

RSS Feed
  • v0.4.5 d6ae9e3c8e
    Compare

    v0.4.5 Stable

    thzxx released this 2026-07-25 16:41:22 +08:00 | 20 commits to master since this release

    v0.4.5 — Mermaid 图表渲染支持

    新增 Mermaid 图表渲染

    ```mermaid 代码块现在可以实时渲染为 SVG 图表，支持流程图、时序图、甘特图等全部 Mermaid 图表类型。

    依赖 版本 用途
    mermaid 10.x 图表渲染引擎（npm 安装）

    技术实现

    保留 MarkLite 自研 unified Markdown 渲染管线，新增 rehypeMermaid 插件：

    1. 转换阶段（rehypeMermaid 插件，在 rehypeHighlight 之后运行）

      • 查找 <pre><code class="language-mermaid"> 节点
      • 替换为 <div class="me-mermaid"><div class="mermaid"> 容器
      • 与 MetonaEditor 内置解析器输出格式完全一致

    2. 渲染阶段（Editor.tsx）

      • 模块顶层初始化 mermaid.initialize({ startOnLoad: false })
      • 编辑器 afterRender 事件 → mermaid.run({ querySelector: '.me-mermaid .mermaid' })
      • 首次渲染 setTimeout 兜底确保初始内容也触发

    3. 管线完整性

      • unified 管线全部保留：remarkParse → remarkGfm → remarkRehype → rehypeRaw → rehypeFixImages → rehypeSanitize → rehypeHighlight → rehypeMermaid → rehypeStringify
      • 图片路径修复、XSS 防护、代码高亮均不受影响

    支持的图表类型

    • 流程图 (graph TD/LR)
    • 时序图 (sequenceDiagram)
    • 甘特图 (gantt)
    • 类图 (classDiagram)
    • 状态图 (stateDiagram)
    • 饼图 (pie)
    • Git 图 (gitGraph)
    • 用户旅程图 (journey)
    • ER 图 (erDiagram)

    代码变更

    文件 变更
    package.json 版本 0.4.4 → 0.4.5，新增 mermaid@10
    src/shared/constants.ts APP_VERSION → v0.4.5
    src/renderer/lib/markdown.ts 新增 rehypeMermaid 插件 + 加入 unified 管线
    src/renderer/components/Editor/Editor.tsx mermaid 初始化 + afterRender 绑定

    质量保证

    • TypeScript 严格模式：0 errors
    • 单元测试：98/98 passed
    • markdown 渲染测试：16/16 passed
    • pre-commit hooks：eslint + tsc 全部通过
    Downloads