Skip to content

Fix unknown diagram error in Mermaid rendering#36

Merged
hustcc merged 2 commits into
mainfrom
copilot/fix-unknown-diagram-error
Mar 27, 2026
Merged

Fix unknown diagram error in Mermaid rendering#36
hustcc merged 2 commits into
mainfrom
copilot/fix-unknown-diagram-error

Conversation

Copilot AI commented Feb 25, 2026

Copy link
Copy Markdown
Contributor

Fixes the "Unknown diagram error" that occurs when using png_url or svg_url output types with mermaid.ink.

Root Cause

createMermaidInkUrl was compressing the raw mermaid syntax string directly, but mermaid.ink's pako: endpoint expects the payload to be a JSON object in the format {"code": "<mermaid>", "mermaid": {"theme": "..."}} — the same format used by the Mermaid Live Editor.

Changes Made

  • src/utils/mermaidUrl.ts: Updated createMermaidInkUrl to wrap the mermaid code in the required JSON payload {code, mermaid: {theme}} before deflating and base64url-encoding it. Added a theme parameter to the function signature.
  • src/server.ts: Pass the user-selected theme (with "default" fallback) through to createMermaidInkUrl.
Original prompt

This section details on the original issue you should resolve

<issue_title>Unknown diagram error</issue_title>
<issue_description>Hi,

I tried running your MCP server in VSCode using the sample Mermaid snippet from Mermaid Live Editor, but when I click the generated link, I get an “Unknown diagram error”.

Could you advise what I might be doing wrong?

Thanks!

Here’s what I used:

flowchart TD
    A[Christmas] -->|Get money| B(Go shopping)
    B --> C{Let me think}
    C -->|One| D[Laptop]
    C -->|Two| E[iPhone]
    C -->|Three| F[fa:fa-car Car]

Input

{
  "mermaid": "flowchart TD\n    A[Christmas] -->|Get money| B(Go shopping)\n    B --> C{Let me think}\n    C -->|One| D[Laptop]\n    C -->|Two| E[iPhone]\n    C -->|Three| F[fa:fa-car Car]",
  "outputType": "png_url"
}

Output Link:
https://mermaid.ink/img/pako:eNpVy7EKwjAURuHdp_hHHfoCDoJNtUuhDt1Chku5NUGbG5JAEeO7SzvpfL4zPWUZLcWModkBwFkrG13KMyWDqjqVljNm8fwqqPetIFkJwfn7YeP1aqDe3aoY2Tr_-GxFbXfvuaDRHYUswfyEYZGCi3Y3K57_go3MBVc90XGiaqQIRdF8ATbHM0c

Screenshot:
Image

</issue_description>

<agent_instructions>尝试帮我解决一下。</agent_instructions>

Comments on the Issue (you are @copilot in this section)


🔒 GitHub Advanced Security automatically protects Copilot coding agent pull requests. You can protect all pull requests by enabling Advanced Security for your repositories. Learn more about Advanced Security.

@hustcc

hustcc commented Mar 27, 2026

Copy link
Copy Markdown
Owner

@copilot 继续

Copilot AI commented Mar 27, 2026

Copy link
Copy Markdown
Contributor Author

@copilot 继续

Fixed in a1e9325.

Root cause: createMermaidInkUrl was deflating the raw mermaid string, but mermaid.ink's pako: endpoint expects a JSON payload {"code": "...", "mermaid": {"theme": "..."}}.

Changes:

  • src/utils/mermaidUrl.ts: wrap mermaid code in the JSON object before deflating/base64url-encoding
  • src/server.ts: pass the selected theme (with "default" fallback) into createMermaidInkUrl

Copilot AI changed the title [WIP] Fix unknown diagram error in Mermaid rendering Fix unknown diagram error in Mermaid rendering Mar 27, 2026
@hustcc

hustcc commented Mar 27, 2026

Copy link
Copy Markdown
Owner

@copilot 给我一个测试链接,我验收看看。

Copilot AI commented Mar 27, 2026

Copy link
Copy Markdown
Contributor Author

Copilot AI requested a review from hustcc March 27, 2026 15:22
@hustcc hustcc marked this pull request as ready for review March 27, 2026 16:02
@hustcc hustcc merged commit 7558df9 into main Mar 27, 2026
2 checks passed
@hustcc hustcc deleted the copilot/fix-unknown-diagram-error branch March 27, 2026 16:09
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Unknown diagram error

2 participants