gitbook-plugin-mermaid-clicked

A GitBook plugin that enables clickable nodes in Mermaid diagrams for internal page navigation.

Features

• Click on Mermaid diagram nodes to navigate to GitBook pages
• Supports gitbook:// URL scheme for internal links
• Works alongside mermaid-local or standard mermaid plugins
• Hover effects on clickable nodes
• Tooltip showing target page

Installation

npm install gitbook-plugin-mermaid-clicked

Configuration

Add to your book.json:

{
  "plugins": [
    "mermaid-local",
    "mermaid-clicked"
  ]
}

Usage

In your Mermaid diagrams, use the click syntax with gitbook:// URLs:

graph TD
  A["首页"] --> B["详情"]
  click A href "gitbook://Chapter1/Introduction.md"
  click B href "gitbook://Chapter2/Setup.md"

URL Format

gitbook://path/to/page.md

The path should be relative to your book's root (without .md extension for navigation).

Example

graph TD
  START(["开始"]) --> A["初始化"]
  click A href "gitbook://Chapter5/IngeekDK/init.md"
  A --> B["登录"]
  click B href "gitbook://Chapter5/IngeekDK/login.md"
  B --> C["主页面"]

How It Works

1. The plugin listens for page changes in GitBook
2. After Mermaid renders, it finds all <a> tags with gitbook:// hrefs
3. Click events are intercepted and routed through GitBook's navigation API
4. Falls back to direct URL navigation if internal API is unavailable

Requirements

• GitBook or HonKit
• Mermaid plugin (mermaid-local or similar)

License

MIT