Mermaidダイアグラムデモ

このページではSveltePressでMermaidダイアグラムを使用する方法を紹介します。ダークモードにも完全対応しています。

フローチャート

Svelte 5のリアクティビティフローを表現：

シーケンス図

ユーザーインタラクションの流れ：

クラス図

Svelteコンポーネントの構造：

ガントチャート

学習ロードマップ：

円グラフ

学習時間の配分：

ダークモード対応

このMermaidコンポーネントは以下の機能を持っています：

  • 🌙 自動ダークモード検出 - システムの設定やページのテーマに応じて自動切り替え
  • 🎨 カスタムテーマ - ライト/ダークモードそれぞれに最適化された配色
  • 🔄 リアルタイム切り替え - テーマ変更時に即座に反映
  • 📱 レスポンシブ対応 - モバイルでも見やすい表示

使用方法

Mermaidダイアグラムを使用するには：

  1. Mermaidパッケージをインストール: npm install mermaid
  2. Mermaidコンポーネントを作成（$lib/components/Mermaid.svelte）
  3. Markdownファイルでコンポーネントをインポートして使用

コード例

<script>
  import Mermaid from '$lib/components/Mermaid.svelte';
  
  const diagramCode = \`graph TD
    A[開始] --> B[処理]
    B --> C[終了]\`;
</script>

<Mermaid code={diagramCode} />
svelte

注意事項

  • Mermaidはクライアントサイドでレンダリングされます
  • 初回レンダリング時に若干の遅延が発生する可能性があります
  • ダークモードの切り替えは自動的に検出されます
  • テーマカラーはSvelteのブランドカラーに合わせて調整されています
Suggest changes to this page
Last update at: 2025/08/13 06:31:59