opencode-mermaid-live

An OpenCode plugin that appends Edit on mermaid.live links below every Mermaid code block in the model’s completed text. Each link opens mermaid.live with that diagram pre-loaded (via compressed state in the URL). URLs are shortened with is.gd when possible.

What it does

• Hook: experimental.text.complete (runs after the model finishes a response).
• Behavior: Finds all ```mermaid ... ``` blocks, builds a mermaid.live edit URL (pako-compressed, base64url), optionally shortens it, and appends a markdown link under each block, e.g.
  🔗 [Edit on mermaid.live](https://is.gd/...)
• URL Shortening: Uses is.gd to create short links (e.g., https://is.gd/xxxxx).
  • Why we shorten: Mermaid.live URLs are ~150+ characters of base64 data. When these long URLs wrap across multiple lines in the terminal (depending on window width), the terminal's URL auto-detector often only captures the first line when you Ctrl+Click (or Cmd+Click). This results in a broken partial URL that fails to load. Short URLs (~15 chars) fit on a single line and avoid this issue entirely.
  • Why is.gd: We chose is.gd because it provides direct redirects without intermediate preview pages—unlike TinyURL which shows a preview page that requires an extra click. This makes the workflow smoother when Ctrl+Clicking links in the terminal.
• Fallbacks: If shortening fails, the long mermaid.live URL is used. On plugin errors, an HTML comment is appended with the error message.

Installation

Add the plugin to your .opencode/opencode.jsonc:

{
  "plugin": ["opencode-mermaid-live@latest"]
}

From source:

1. Clone this repo
2. Install dependencies: cd .opencode && pnpm install && cd ..
3. Add the local path to your .opencode/opencode.jsonc:

   {
     "plugin": ["./.opencode/plugins/mermaid-link.ts"]
   }

Requirements

• Node: >=18.0.0
• Peer: @opencode-ai/plugin >=1.2.10
• Runtime: Node or Bun (uses Buffer and fetch).

Dev mode (local plugin via .opencode)

This repo is set up so OpenCode can load the plugin from the repo while you develop.

1. Layout

   • Plugin implementation: root index.ts.
   • OpenCode dev entry: .opencode/plugins/mermaid-link.ts — it only re-exports the root plugin:

     export * from "../../index";
     export { default } from "../../index";

   • Dependencies for the plugin when run by OpenCode: .opencode/package.json (e.g. pako, @opencode-ai/plugin).

2. How to use it

   • Open (or run) OpenCode with this repository root as the project directory. OpenCode will discover .opencode/plugins/ and load mermaid-link.ts, which uses your local index.ts.
   • Install dependencies in .opencode so the plugin runs correctly when OpenCode loads it:

     cd .opencode && pnpm install && cd ..

   • Edit index.ts at the repo root; changes are used on the next run without publishing. No need to change .opencode/plugins/mermaid-link.ts unless you rename the plugin file or entry.

3. Summary

   • Run OpenCode with this repo as the project → it loads the plugin from .opencode/plugins/mermaid-link.ts → that file runs your local index.ts.
   • Develop in index.ts and keep .opencode/package.json (and optionally .opencode/plugins/mermaid-link.ts) in sync with the plugin’s dependencies and export path.

How it works

1. Detect: The plugin scans the model's output for ```mermaid ... ``` code blocks using a regex.
2. Compress: For each block, it creates a state object with the diagram code and config, then compresses it using pako (zlib/deflate).
3. Encode: The compressed bytes are base64url-encoded to create a mermaid.live-compatible URL.
4. Shorten: The long URL (~150+ chars) is sent to is.gd's API to get a short link (~15 chars).
5. Append: A markdown link is added below each mermaid block: 🔗 [Edit on mermaid.live](https://is.gd/...)

License

See LICENSE in the repo.