Skip to content

Mermaid 代码块解析报错 #9

@tofrankie

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
    No fields configured for issues without a type.

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions