🚀 拡張書式・ダイアグラム仕様

FlashNote は技術文書、システム設計、ソフトウェア設計のために強力な拡張レンダリングをサポートしています。Mermaid 工業図表エンジン と KaTeX 数式システム を統合し、直感的な操作性と耐障害性を備えています。

1. FlashNote 独自のレンダリング・インタラクション機能

Mermaid 図表や数式を扱う際、以下のネイティブ機能を利用できます：

🖐️ キャンバスのドラッグ移動：図表上にカーソルを置くと自動的に「手のひらカーソル」に切り替わり、ドラッグしてキャンバスを自由に移動可能；
🎯 ダブルクリックで位置リセット：どれだけ移動・拡大縮小しても、キャンバスの余白をダブルクリックするだけで一瞬で中央初期位置へ復帰；
🔍 全画面ライトボックス (Lightbox)：図表右上の虫眼鏡アイコンをクリックすると全画面表示となり、ホイール操作で 30%〜350% のスムーズズーム が可能；
💾 高精細 Retina / SVG 書き出し：ベクター SVG または白背景パディング付きの 2x Retina PNG としてワンクリック保存；
🛡️ クラッシュ防止サニタイズ (Mermaid Sanitizer)：記述ミスによる構文エラーが発生しても、ページ全体が真っ白にクラッシュするのを防ぐ自動エラー保護機能を搭載；
⌨️ KaTeX 数式パレット：数式入力時に、ギリシャ文字、微積分記号、行列、矢印記号をワンクリックで挿入可能。

2. 図表・ダイアグラム記法 (Diagrams)

外部ソフトや画像キャプチャを使用せず、コードブロックに mermaid と指定するだけでレンダリングされます。

1. Mermaid (各種ダイアグラム)

世界中で広く採用されている Markdown 標準の図表記法です。

👉 フローチャート (Flowchart)

graph TD
    A[開始] --> B{登録済み?}
    B -->|はい| C[ログイン]
    B -->|いいえ| D[新規登録]
    D --> C
    C --> E[ホーム画面]
    E --> F[終了]

    style A fill:#f9f,stroke:#333,stroke-width:2px
    style F fill:#bbf,stroke:#333,stroke-width:2px

👉 シーケンス図 (Sequence Diagram)

sequenceDiagram
    participant ユーザー
    participant フロントエンド
    participant バックエンド
    participant データベース

    ユーザー->>フロントエンド: ログインボタン押下
    フロントエンド->>バックエンド: リクエスト送信 (POST /login)
    バックエンド->>データベース: ユーザー照会
    データベース-->>バックエンド: ユーザー情報返却
    バックエンド-->>フロントエンド: トークン返却
    フロントエンド-->>ユーザー: ログイン完了、画面遷移

👉 ガントチャート (Gantt Chart)

gantt
    title 開発スケジュール
    dateFormat  YYYY-MM-DD
    section 設計
    要件定義           :done,    des1, 2026-01-01,2026-01-05
    基本設計           :active,  des2, 2026-01-06, 5d
    section 開発
    フロントエンド実装 :         dev1, after des2, 10d
    バックエンド API   :         dev2, after des2, 8d
    section テスト・リリース
    結合テスト         :         test1, after dev1, 5d
    本番リリース       :         milestone, 2026-01-28, 0d

👉 クラス図 (Class Diagram)

classDiagram
    class Animal {
        +String name
        +int age
        +breathe()
    }
    class Dog {
        +String breed
        +bark()
    }
    class Cat {
        +meow()
    }
    Animal <|-- Dog : 継承
    Animal <|-- Cat : 継承

👉 状態遷移図 (State Diagram)

stateDiagram-v2
    [*] --> 未決済
    未決済 --> 処理中 : 支払い完了
    未決済 --> キャンセル : タイムアウト
    処理中 --> 発送済み : 出荷処理
    発送済み --> [*] : 配達完了

👉 円グラフ (Pie Chart)

pie title ブログ読者の流入経路
    "検索エンジン (SEO)" : 48
    "SNS" : 26
    "外部リンク" : 16
    "直接アクセス" : 10

👉 Git グラフ (Git Graph)

gitGraph
    commit id: "v1.0.0"
    branch feature-editor
    checkout feature-editor
    commit id: "Add Tiptap"
    commit id: "Add Mermaid"
    checkout main
    merge feature-editor id: "Merge feature"
    commit id: "v1.1.0" tag: "v1.1.0"

2. PlantUML

本格的な設計書向けに、PlantUML 構文も同様に記述可能です：

@startuml
skinparam handwritten false
actor User
boundary Browser
control Server
database Database

User -> Browser: FlashNote を起動
Browser -> Server: 目次を要求
Server -> Database: メタデータ検索
Database --> Server: レコード返却
Server --> Browser: ツリー表示
@enduml

3. ドキュメント属性とコールアウト (FrontMatter & Callouts)

1. YAML FrontMatter

静的ブログのビルドや書籍コンパイル時に、ドキュメント先頭へ記述します：

---
title: モダンフロントエンド開発実践
date: 2026-10-14 10:00:00
categories:
  - アーキテクチャ
tags:
  - TypeScript
  - Vite
  - Astro
author: Fisher
published: true
---

2. コールアウトブロック (GitHub / Obsidian Callouts)

引用記法と [!TYPE] を組み合わせて注目枠を表示します：

Note

技術的な補足事項や背景情報です。

Tip

パフォーマンスのコツ：ローカルキャッシュを有効にするとオフライン画像の表示が大幅に高速化します。

Important

重要：クラウド同期を行う前に、アクセストークンの書き込み権限を確認してください。

Warning

警告：主キーの変更は目次ツリーの再計算を伴うため注意してください。

Danger

危険な操作：ローカルデータの全消去を実行すると IndexedDB 内のデータが完全に削除されます。

4. 学術組版と数式

1. KaTeX 複雑数式・行列

インライン数式 $f(x) = \int_{-\infty}^x e^{-t^2} dt$ やブロック行列演算：

\begin{bmatrix} \cos\theta & -\sin\theta & 0 \\ \sin\theta & \cos\theta & 0 \\ 0 & 0 & 1 \end{bmatrix} \begin{bmatrix} x \\ y \\ z \end{bmatrix} = \begin{bmatrix} x' \\ y' \\ z' \end{bmatrix}

2. タスクリスト

サイドバーからの即時メモ
4つの表示モード切り替え
ド・モルガンの法則 LaTeX 数式対応
外部画像アップロードプラグインの追加