📌 Project Overview

ブラウザ完結型の軽量 Mermaid記法エディタ＆ビューワー。 ユーザーが入力したテキストコードをリアルタイムで SVG 図形にレンダリングし、PNG/SVG としてエクスポートする機能を提供します。

🛠 Tech Stack & Design Policy

1. Core Framework

  • No Framework: React/Vue 等は使用せず、Vanilla JS (ES6+) と HTML5/CSS3 のみで構成。
    • 理由: 単機能ツールであり、ロード時間の短縮とメンテナンスの容易さ（”枯れた技術”による安定性）を優先するため。
  • Rendering: Mermaid.js (CDN利用)
  • Styling: Custom CSS (CSS Variables, Flexbox/Grid)

2. Architecture Decisions

  • Pan/Zoom Logic:
    • 外部ライブラリ (svg-pan-zoom 等) は使用せず、自前実装 (Custom Implementation) を採用。
    • Cos-pa (Cost Performance) Analysis:
      • ライブラリを使用すると、Mermaid の再レンダリング時の DOM リセットとの競合解決に工数がかかる。また、ファイルサイズが増加する。
      • 必要なのは「ドラッグ移動」「ホイール拡大」のみであるため、CSS transform を操作する50行程度の JS コードで実装するほうが軽量かつ制御しやすい。
  • Export Strategy:
    • SVG を <canvas> に描画し、そこから toDataURL で PNG を生成する方式を採用。
    • 高解像度出力を実現するため、Canvas 描画時にスケールファクター（x2）を適用している。

🎨 UI/UX Theme

  • Concept: “Medical Tech Studio”
  • Colors:
    • Base: Deep Navy (#0f172a)
    • Accent: Cyan (#06b6d4)
    • Glassmorphism 効果を使用し、先進的かつ清潔感のある医療イメージを表現。
  • Responsive: モバイル端末でもプレビュー確認と簡易編集が可能。

📂 File Structure

mermaid-viewer/
├── index.html        # UI and Layout
├── style.css         # Styling (Dark theme & Glassmorphism)
├── mermaid-viewer.js # Core Logic (Render, Zoom, Export)
├── HOW_TO_USE.md     # User Guide
└── README.md         # Technical Documentation (This file)

⚠️ Notes

  • Security: mermaid.initialize の securityLevel は 'loose' に設定されています（HTMLタグ等の埋め込みを許容するため）。
  • Update: Mermaid.js のバージョンは CDN リンク (index.html 内) で管理しています。