Skip to main content

​
Roadmap demo

This page shows a minimal usable version of a roadmap-style knowledge map. It uses a styled Mermaid flowchart, so you can keep the roadmap in plain MDX without adding a custom frontend app.

​
Why this works as an MVP

  • Keeps the roadmap in one MDX file
  • Gives you explicit node hierarchy and status color
  • Stays easy to edit without adding a custom frontend stack
  • Works inside Mintlify with no extra build setup

​
Usage

```mermaid actions={false}
%%{init: {
  "theme": "base",
  "themeVariables": {
    "background": "#0b0b0c",
    "lineColor": "#8b8f97"
  },
  "flowchart": {
    "defaultRenderer": "elk",
    "nodeSpacing": 28,
    "rankSpacing": 54,
    "padding": 10
  }
}}%%
flowchart TB
    ROOT["数据结构与算法"]
    ROOT --> ARRAY["数组"]
    ROOT --> LINKED["链表"]

    classDef done fill:#16181d,color:#f3f4f6,stroke:#22c55e,stroke-width:1.8px,rx:10,ry:10;
    classDef progress fill:#16181d,color:#f3f4f6,stroke:#eab308,stroke-width:1.8px,rx:10,ry:10;
    classDef todo fill:#16181d,color:#f3f4f6,stroke:#ef4444,stroke-width:1.8px,rx:10,ry:10;

    class ARRAY done;
    class LINKED progress;
    class ROOT todo;
```

​
Next step

If you need clickable cards, a right-side detail panel, or per-node exercise progress, Mermaid will stop being enough. At that point, move to a custom React page with React Flow.