Skip to content

Mermaid 代码块解析报错 #9

Description

@tofrankie

当输出 Mermaid 时,它可能会解析错误。

示例:

```mermaid
flowchart TD
  A[main() 启动 Fastify] --> B[setupAppBase]
  B --> B1[createDatabase]
  B1 --> B2[ensureParentDir + 打开 SQLite]
  B2 --> B3[PRAGMA journal_mode=WAL]
  B3 --> B4[runMigrations]
  B4 --> B5[seedFromHistoryIfNeeded]
  B --> B6[创建 imagesRoot 目录]
  A --> C[registerPlugins]
  C --> C1[CORS]
  C --> C2[multipart 上传]
  C --> C3[static /images/]
  A --> D[registerRoutes]
  D --> D1[/healthz]
  D --> D2[/upload/:filename]
  D --> D3[/images/:filename]
  D --> D4[/userve/... 兼容接口]
  A --> E[统一 error handler]
```

报错:

Error: Parse error on line 2:
...lowchart TD  A[main() 启动 Fastify] --> B
----------------------^
Expecting 'SQE', 'DOUBLECIRCLEEND', 'PE', '-)', 'STADIUMEND', 'SUBROUTINEEND', 'PIPE', 'CYLINDEREND', 'DIAMOND_STOP', 'TAGEND', 'TRAPEND', 'INVTRAPEND', 'UNICODE_TEXT', 'TEXT', 'TAGSTART', got 'PS'

因为 []() 都是 flowchart 语法的一部分。

  • A[文字] → 矩形
  • A(文字) → 圆角矩形

因此要添加引号包裹,避免误认为是语法的一部分。解决方法是加引号。

```mermaid
flowchart TD
+ A["main() 启动 Fastify"] --> B[setupAppBase]
  B --> B1[createDatabase]
  B1 --> B2[ensureParentDir + 打开 SQLite]
  B2 --> B3[PRAGMA journal_mode=WAL]
  B3 --> B4[runMigrations]
  B4 --> B5[seedFromHistoryIfNeeded]
  B --> B6[创建 imagesRoot 目录]
  A --> C[registerPlugins]
  C --> C1[CORS]
  C --> C2[multipart 上传]
  C --> C3[static /images/]
  A --> D[registerRoutes]
  D --> D1[/healthz]
  D --> D2[/upload/:filename]
  D --> D3[/images/:filename]
  D --> D4[/userve/... 兼容接口]
  A --> E[统一 error handler]
```

接着,还有错误

Error: Lexical error on line 14. Unrecognized text.
...  D --> D1[/healthz]  D --> D2[/upload
----------------------^

这里原因我不太懂,AI 给的原因是:

  1. [/healthz] 这类写法,在 [] 里紧跟在 [ 后面的 / 容易被当成别的语法片段(和「链接 / 注释」一类 token 混在一起),于是出现 Lexical error: Unrecognized text。

  2. /upload/:filename 里的 : 在 Mermaid 里也很敏感(常出现在 A -->|label| B、样式等语法里),未加引号时容易把后面的内容解析乱掉,所以报错会截在 [/upload 附近。

统一添加引号号,就正常了:

```mermaid
flowchart TD
  A["main() 启动 Fastify"] --> B[setupAppBase]
  B --> B1[createDatabase]
  B1 --> B2[ensureParentDir + 打开 SQLite]
  B2 --> B3[PRAGMA journal_mode=WAL]
  B3 --> B4[runMigrations]
  B4 --> B5[seedFromHistoryIfNeeded]
  B --> B6[创建 imagesRoot 目录]
  A --> C[registerPlugins]
  C --> C1[CORS]
  C --> C2[multipart 上传]
+ C --> C3["static /images/"]
  A --> D[registerRoutes]
+ D --> D1["/healthz"]
+ D --> D2["/upload/:filename"]
+ D --> D3["/images/:filename"]
+ D --> D4["/userve/... 兼容接口"]
  A --> E[统一 error handler]
```

效果:

flowchart TD
  A["main() 启动 Fastify"] --> B[setupAppBase]
  B --> B1[createDatabase]
  B1 --> B2[ensureParentDir + 打开 SQLite]
  B2 --> B3[PRAGMA journal_mode=WAL]
  B3 --> B4[runMigrations]
  B4 --> B5[seedFromHistoryIfNeeded]
  B --> B6[创建 imagesRoot 目录]
  A --> C[registerPlugins]
  C --> C1[CORS]
  C --> C2[multipart 上传]
  C --> C3["static /images/"]
  A --> D[registerRoutes]
  D --> D1["/healthz"]
  D --> D2["/upload/:filename"]
  D --> D3["/images/:filename"]
  D --> D4["/userve/... 兼容接口"]
  A --> E[统一 error handler]
Loading

以上这些代码块问题,粘贴到 GitHub Issue 内也能重现。

针对节点内容包含 ()[]/ 这类特殊字符,是不是包一层 "" 号来规避这种问题?

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions