Installation / インストール

1. Install required packages (npm):

Terminal window
npm install mermaid rehype-mermaid
Terminal window
npm install --save-dev playwright
Terminal window
npx playwright install --with-deps

Or with pnpm:

Terminal window
pnpm install mermaid rehype-mermaid
Terminal window
pnpm install -D playwright
Terminal window
pnpm exec playwright install --with-deps

2. Copy the component to your project:

components/
└── MermaidChart.astro

3. Configure Tailwind:

tailwind.config.mjs
export default {
  darkMode: 'class',
  // ...
}

4. Import and use:

import MermaidChart from '@/components/MermaidChart.astro';
code View source on GitHub

code Usage / 使い方 

---
import MermaidChart from "../components/MermaidChart.astro";
---


<MermaidChart
  chart="
graph TD
    A[Start] --> B[End]
  "
/>

preview Examples / 使用例

Flowchart / フローチャート

graph TD A[Start] --> B{Is it working?} B -->|Yes| C[Great!] B -->|No| D[Debug] D --> B

Sequence Diagram / シーケンス図

sequenceDiagram participant Browser participant Server participant Database Browser->>Server: GET /api/data Server->>Database: Query data Database-->>Server: Return results Server-->>Browser: Send JSON response

settings Props / プロパティ

Name Type Default Description
chart string Required Mermaid diagram definition
Mermaid図の定義テキスト

info Features / 特徴

  • Dark mode support with automatic theme switching
    ダークモードに対応し、テーマが自動的に切り替わります
  • Client-side rendering with smooth transitions
    クライアントサイドでのレンダリングでスムーズな遷移を実現
  • Multiple diagram types support (flowcharts, sequence diagrams, etc.)
    複数の図表タイプをサポート（フローチャート、シーケンス図など）
  • Simple API with TypeScript support
    TypeScriptサポート付きのシンプルなAPI

palette Available Themes / 利用可能なテーマ

  • Light mode: forest theme
  • Dark mode: dark theme
  • Other available themes (can be configured in MermaidChart.astro):
    • base - Simple and basic theme
    • default - Default Mermaid theme
    • neutral - Theme based on achromatic colors