memd-cli 2.0.0 → 2.0.1

package/svgplan.md

@@ -1,805 +0,0 @@
-memd-cli v2.0.0 HTML (SVG) 出力機能 + テーマ統合 実装計画
-==========================================================
-
-## 概要
-
-Markdown + Mermaid を HTML ファイルとして出力する機能を追加する。
-Mermaid ダイアグラムは beautiful-mermaid の `renderMermaidSVG()` でインライン SVG 化し、
-スタンドアロンな HTML を stdout に出力する。保存は `> file.html` リダイレクトに委ねる。
-併せて `--theme` を beautiful-mermaid テーマに一本化し、v2.0.0 としてリリースする。
-
-## 検証済み事項
-
-- `renderMermaidSVG(text, options?: RenderOptions)` は同期関数。Puppeteer/DOM 不要 (ELK.js ベース)
-  - `RenderOptions` は `DiagramColors` のフィールド (`bg`, `fg`, `line`, `accent`, `muted`, `surface`, `border`) + レイアウト設定 (`font`, `padding`, `nodeSpacing`, `layerSpacing`, `componentSpacing`, `transparent`, `interactive`) を含む
-  - `THEMES` の値は `DiagramColors` 型だが、`RenderOptions` と互換 (`buildColors()` が同じフィールドを destructure するため)
-- 対応図種: flowchart/state, sequence, class, ER, xychart (state は flowchart パイプラインで処理される)
-- `marked.parse()` は生の SVG タグをエスケープせずそのまま通す (後述「marked の HTML パススルー」参照)
-- 複数 Mermaid ブロックの同時変換も問題なし (PoC で検証済み: flowchart x3 + sequence + class + state の6ブロックで marker ID ユニーク化を確認)
-- 外部フォント (`@import url(...)`) は除去可能。`system-ui` フォールバックで問題なし
-- `color-mix()` を CSS 内で使用 (Chrome 111+, Firefox 113+, Safari 16.2+)
-- `marked` ライブラリは `new Marked()` で独立インスタンスを作成可能 (`marked/lib/marked.d.ts:629`)
-  - `markedTerminal` 適用済みのグローバル `marked` とは別に、HTML 用の素の `Marked` インスタンスを使う
-- `renderMermaidASCII()` は `AsciiRenderOptions` を受け取り、`theme?: Partial<AsciiTheme>` と `colorMode?: ColorMode | 'auto'` をサポートする
-  - `ColorMode`: `'none'` | `'ansi16'` | `'ansi256'` | `'truecolor'` | `'html'`
-  - `colorMode` 省略時は `'auto'` (ターミナル capabilities を自動検出)
-- `diagramColorsToAsciiTheme()` は beautiful-mermaid 内部に存在するが **メインエクスポートに含まれない** (`src/ascii/ansi.ts:53` で定義・export されているが `src/index.ts` で re-export されていない)。サブパスインポートも `package.json` の `exports` フィールドでブロックされる。memd 側で同等の変換関数を実装する
-- `chalk.level = 0` を設定すると、`markedTerminal` を含む全ての chalk ベースの出力が ANSI コードなしのプレーンテキストになる。`marked-terminal/index.js:591` で `chalk.level === 0` 時に `cli-highlight` をスキップする処理が確認済み
-- 追加依存: なし (beautiful-mermaid, marked は既存依存)
-
-## アーキテクチャ
-
-### 2つの独立パイプライン
-
-HTML パスとターミナルパスは明確に分離し、共有するのはテーマ解決と入力読み込みのみ。
-
-```mermaid
-flowchart TD
-    A[Markdown input] --> B[Resolve theme<br>from MERMAID_THEMES]
-    B --> C{--html flag?}
-    C -->|Yes| D[convertMermaidToSVG<br>renderMermaidSVG + ID prefix]
-    C -->|No| E[convertMermaidToAscii<br>renderMermaidASCII + AsciiTheme]
-    D --> F[new Marked.parse<br>plain HTML]
-    F --> G[Wrap in HTML template<br>with theme CSS]
-    G --> J[stdout]
-    E --> K[marked + markedTerminal<br>ANSI output]
-    K --> L{Pager needed?}
-    L -->|Yes| M[Pager]
-    L -->|No| J
-```
-
-### 共有レイヤー
-
-| レイヤー | 責務 | HTML パス | ターミナルパス |
-|---------|------|----------|--------------|
-| テーマ解決 | `MERMAID_THEMES[name]` -> `DiagramColors` | 共通 | 共通 |
-| テーマ色補完 | optional フィールドの fallback 算出 | `resolveThemeColors()` | `diagramColorsToAsciiTheme()` |
-| Mermaid 変換 | コードブロック -> 図 | `convertMermaidToSVG()` | `convertMermaidToAscii()` |
-| Markdown 変換 | Markdown -> 出力形式 | `new Marked().parse()` | `marked.parse()` (+ markedTerminal) |
-| 出力 | 結果の書き出し | stdout | pager or stdout |
-
-### 依存関係
-
-- HTML パスが触れるもの: `renderMermaidSVG`, `MERMAID_THEMES`, `Marked`
-- ターミナルパスが触れるもの: `renderMermaidASCII`, `MERMAID_THEMES`, `marked`, `markedTerminal`, `chalk`, pager
-- 両パスが触れるもの: `MERMAID_THEMES` (テーマ解決), 入力読み込み (`readMarkdownFile`, `readStdin`)
-
-## CLI オプション
-
-### 追加するオプション
-
-```
---html              Markdown+Mermaid を HTML として stdout に出力
-```
-
-ファイル保存はシェルリダイレクト (`memd foo.md --html > out.html`) に委ねる。
-`-o` / `--output` オプションは設けない。UNIX 慣例 (stdout + リダイレクト) に従い、
-オプションの増加と関連するバリデーション・エラー処理の複雑さを回避する。
-
-### 動作仕様
-
-| 入力 | 出力先 |
-|------|--------|
-| `memd foo.md --html` | stdout |
-| `memd a.md b.md --html` | stdout (結合) |
-| `cat foo.md \| memd --html` | stdout |
-| `memd foo.md --html > out.html` | `out.html` (リダイレクト) |
-
-複数ファイル入力時は現行のターミナルモードと同様に結合して単一出力とする。
-
-### 複数ファイルの結合タイミング
-
-**HTML パス**: Markdown を先に結合してから `convertMermaidToSVG()` を1回実行する。
-これにより `svgIndex` がファイル間で連続し、marker ID の重複を防止する。
-
-```javascript
-// HTML パス: Markdown を結合 → SVG 変換 (svgIndex が連続)
-const combinedMarkdown = markdownParts.join('\n\n');
-const html = renderToHTML(combinedMarkdown, diagramColors);
-```
-
-**ターミナルパス**: 既存と同様に、各ファイルを個別に `convertMermaidToAscii` + `marked.parse` した結果を結合する。
-ターミナルパスでは ASCII 描画に ID の概念がないため、個別変換で問題ない。
-
-```javascript
-// ターミナルパス: 個別変換 → 結合 (renderToString は廃止、ロジックをインライン化)
-for (const markdown of markdownParts) {
-  const processed = convertMermaidToAscii(markdown, { useAscii: options.ascii, colorMode, theme: asciiTheme });
-  parts.push(marked.parse(processed));
-}
-const fullText = parts.join('\n\n') + '\n';
-```
-
-### --html 使用時の動作
-
-`action` 内でテーマ解決 (共通処理) の直後に `--html` で大きく分岐する。
-HTML パスではターミナル系の処理 (`markedTerminal`, `renderMermaidASCII`, pager) に一切触れない。
-
-```javascript
-action(files, options) {
-  // 1. テーマ解決 (共通)
-  const diagramColors = resolveDiagramTheme(options.theme);
-
-  // 2. 入力読み込み (共通): files or stdin → markdownParts[]
-  const markdownParts = [];
-  if (files.length === 0) {
-    // stdin: TTY の場合はヘルプを表示して終了 (既存動作を維持)
-    if (process.stdin.isTTY) {
-      program.help();
-    }
-    const stdinData = await readStdin();
-    if (stdinData.trim()) {
-      markdownParts.push(stdinData);
-    } else {
-      program.help();
-    }
-  } else {
-    let exitCode = 0;
-    for (const filePath of files) {
-      try {
-        markdownParts.push(readMarkdownFile(filePath));
-      } catch (error) {
-        const errorMessage = error instanceof Error ? error.message : String(error);
-        console.error(`Error reading file ${filePath}: ${errorMessage}`);
-        exitCode = 1;
-      }
-    }
-    if (exitCode !== 0) {
-      process.exit(exitCode);
-    }
-  }
-
-  if (options.html) {
-    // 3a. HTML パス
-    //   - Markdown を結合してから convertMermaidToSVG (svgIndex 連続)
-    //   - new Marked().parse(processed)
-    //   - renderToHTML() で HTML テンプレート生成
-    //   - 常に process.stdout.write (保存はリダイレクトに委ねる)
-    //   - markedTerminal, chalk, pager に一切触れない
-    //   - ターミナル系オプション (--no-pager, --no-mouse, --width, --ascii, --no-color) は黙って無視
-    const combined = markdownParts.join('\n\n');
-    const html = renderToHTML(combined, diagramColors);
-    process.stdout.write(html);
-  } else {
-    // 3b. ターミナルパス (既存ロジック、renderToString は廃止しインライン化)
-    //   - --no-color 時は chalk.level = 0 で ANSI 出力を根元から無効化
-    //   - resolveTerminalTheme(themeName) でターミナル用テーマを取得
-    //   - marked.use(markedTerminal(...))
-    //   - marked.use({ renderer: { link() } })  (OSC 8 回避)
-    //   - !shouldHighlight 時の code renderer override
-    //   - diagramColorsToAsciiTheme(diagramColors) で AsciiTheme に変換
-    //   - 各ファイルを個別に convertMermaidToAscii + marked.parse
-    //   - pager 判定 → 出力
-  }
-}
-```
-
-- **ターミナル系オプションは黙って無視**: `--no-pager`, `--no-mouse`, `--width`, `--no-color` はエラーにせず無視する。HTML は常にテーマの色を含むフルカラー出力とする
-- **`--ascii` は HTML パスでは無効**: `--ascii` は ASCII ダイアグラムの Unicode/ASCII 切り替えオプションであり、HTML パスでは SVG を使用するため効果がない。エラーにせず黙って無視する
-- **pager は到達しない**: HTML パスには pager ロジックが存在しない
-
-## テーマ統合
-
-### 現状の問題
-
-memd-cli 独自テーマ (6種: default, monokai, dracula, github-dark, solarized, nord) と
-beautiful-mermaid テーマ (15種) が分離しており、ダイアグラムに色が反映されていない。
-(`main.js:187` で三項演算子の両辺が `'none'` になっており、実質ハードコード状態)
-
-### 方針: beautiful-mermaid テーマに一本化 (Breaking Change)
-
-`--theme` は beautiful-mermaid の `THEMES` キー名のみを受け付ける。
-memd 独自のエイリアス (`default`, `monokai`, `solarized`) は**廃止**する。
-
-- ダイアグラム (SVG/ASCII): `MERMAID_THEMES[themeName]` の `DiagramColors` をそのまま使用
-- ターミナル Markdown 着色: beautiful-mermaid テーマ名から `TERMINAL_THEMES` を参照。マッピングがないテーマはハイライトなし (`{ highlight: null, markdown: {} }`)
-- HTML 出力: `DiagramColors` の色をページ全体の CSS に適用
-
-### テーマ名の変更 (Breaking Change)
-
-| 旧 --theme 値 | 新 --theme 値 | 備考 |
-|---------------|-------------|------|
-| `default` | `zinc-light` | 新デフォルト |
-| `monokai` | (廃止) | one-dark に独自パレットを新設 |
-| `dracula` | `dracula` | 変更なし |
-| `github-dark` | `github-dark` | 変更なし |
-| `solarized` | `solarized-dark` | 名前変更 |
-| `nord` | `nord` | 変更なし |
-
-新たに使用可能になるテーマ (10種):
-`zinc-dark`, `tokyo-night`, `tokyo-night-storm`, `tokyo-night-light`,
-`catppuccin-mocha`, `catppuccin-latte`, `nord-light`,
-`github-light`, `solarized-light`, `one-dark`
-
-### ターミナルシンタックスハイライトの対応状況
-
-15テーマのうち、カスタムシンタックスハイライト (`buildTheme()`) を持つのは5テーマのみ。
-残り10テーマはデフォルト (cli-highlight のデフォルトカラー) にフォールバックする。
-
-| beautiful-mermaid テーマ | ターミナルハイライト | 備考 |
-|------------------------|-------------------|------|
-| `one-dark` | `buildTheme(oneDarkColors)` | One Dark (Atom) 準拠パレットを新設 |
-| `dracula` | `buildTheme(draculaColors)` | 既存パレット維持 |
-| `github-dark` | `buildTheme(githubDarkColors)` | 既存パレット維持 |
-| `solarized-dark` | `buildTheme(solarizedColors)` | 既存パレット維持 |
-| `nord` | `buildTheme(nordColors)` | 既存パレット維持 |
-| その他 10 テーマ | `{ highlight: null, markdown: {} }` | ハイライトなし |
-
-#### one-dark カラーパレット (新規)
-
-旧 monokai パレットを破棄し、Atom One Dark Syntax Theme 準拠のカラーパレットを新設する。
-SVG ダイアグラム (accent: `#c678dd`) とターミナルハイライトの色の方向性を統一する。
-
-```javascript
-'one-dark': buildTheme({
-  keyword:  '#e06c75', func:    '#61afef', string:  '#98c379',
-  type:     '#e5c07b', number:  '#d19a66', literal: '#c678dd',
-  param:    '#d19a66', comment: '#5c6370', fg:      '#abb2bf',
-  heading1: '#e06c75', heading2:'#61afef',
-  added:    '#98c379', deleted: '#e06c75',
-}),
-```
-
-出典: Atom One Dark Syntax Theme (https://github.com/atom/one-dark-syntax)
-
-将来的にターミナルハイライトの対応テーマを増やすことは可能だが、本リリースのスコープ外。
-
-### 互換性への影響まとめ
-
-1. **テーマ名の変更**: `default` -> `zinc-light`, `monokai` -> (廃止、`one-dark` に置換), `solarized` -> `solarized-dark`。旧名は受け付けない (エラー)
-2. **ASCII ダイアグラムの着色**: 現在は常に無着色 (`colorMode: 'none'`)。本変更後は `--theme` に応じた色が付く。`--no-color` 指定時は従来通り `colorMode: 'none'`
-3. **デフォルトテーマの変更**: `default` (ハイライトなし) -> `zinc-light` (ハイライトなし)。ターミナル表示上の実質的な差異はない (どちらも cli-highlight デフォルト)
-4. **バージョン**: `1.5.1` -> `2.0.0` (semver major bump)
-5. CHANGELOG にて breaking change として記載する
-
-### --no-color の実装方針
-
-現在の `--no-color` は `marked.parse()` 後に ANSI コードを正規表現で除去する後処理方式
-(`main.js:203-207`) だが、これを **chalk.level による根元からの無効化**に改善する。
-
-```javascript
-// Before: 後処理で ANSI を除去 (非効率・漏れのリスク)
-result = result.replace(/\x1b\[[0-9;]*m/g, '');
-
-// After: chalk.level = 0 で全ての ANSI 出力を根元から無効化
-if (!useColor) {
-  chalk.level = 0;  // markedTerminal, cli-highlight, buildTheme 内の chalk.hex() 全てに効く
-}
-```
-
-`chalk.level = 0` を設定すると:
-- `markedTerminal` が使用する chalk スタイリングが全て無効化される
-- `cli-highlight` のシンタックスハイライトが無効化される (`marked-terminal/index.js:591` で `chalk.level === 0` 時にスキップ)
-- `buildTheme()` 内の `chalk.hex()` も ANSI コードを出力しなくなる
-- `renderMermaidASCII()` の `colorMode` は別途 `'none'` に設定する (chalk とは独立)
-
-これにより既存の ANSI ストリッピング正規表現 (`main.js:203-207`) は不要になり、削除する。
-`--no-color` 時はユーザーの意図通り、出力全体が ANSI コードなしのプレーンテキストとなる。
-
-**注**: `chalk.level` はグローバル状態だが、ターミナルパスの分岐内でのみ設定するため、
-HTML パスに影響しない。HTML パスでは chalk を一切使用しない。
-
-### DiagramColors -> AsciiTheme 変換 (memd 側で実装)
-
-beautiful-mermaid の `diagramColorsToAsciiTheme()` はメインエクスポートに含まれない
-(`src/ascii/ansi.ts:53` で定義されているが `src/index.ts` で re-export されていない。
-`package.json` の `exports` フィールドによりサブパスインポートもブロックされる)。
-
-memd 側で同等の変換関数を実装する。beautiful-mermaid 内部と同じ MIX 比率を使用:
-
-```javascript
-// Color mixing: blend hex1 into hex2 at pct%
-// Equivalent to CSS color-mix(in srgb, hex1 pct%, hex2)
-function mixHex(hex1, hex2, pct) {
-  const p = pct / 100;
-  const parse = (h, o) => parseInt(h.slice(o, o + 2), 16);
-  const mix = (c1, c2) => Math.round(c1 * p + c2 * (1 - p));
-  const toHex = x => x.toString(16).padStart(2, '0');
-  const r = mix(parse(hex1, 1), parse(hex2, 1));
-  const g = mix(parse(hex1, 3), parse(hex2, 3));
-  const b = mix(parse(hex1, 5), parse(hex2, 5));
-  return `#${toHex(r)}${toHex(g)}${toHex(b)}`;
-}
-
-// Match beautiful-mermaid's internal MIX ratios (theme.ts:64-87)
-const MIX = { line: 50, arrow: 85, nodeStroke: 20 };
-
-function diagramColorsToAsciiTheme(colors) {
-  const line = colors.line ?? mixHex(colors.fg, colors.bg, MIX.line);
-  const border = colors.border ?? mixHex(colors.fg, colors.bg, MIX.nodeStroke);
-  return {
-    fg: colors.fg,
-    bg: colors.bg,
-    line,
-    border,
-    arrow: colors.accent ?? mixHex(colors.fg, colors.bg, MIX.arrow),
-    accent: colors.accent,
-    corner: line,
-    junction: border,
-  };
-}
-```
-
-**DiagramColors -> AsciiTheme フィールドマッピング:**
-
-| DiagramColors | AsciiTheme | 変換ロジック |
-|--------------|-----------|-------------|
-| `fg` (required) | `fg` | そのまま |
-| `bg` (required) | `bg` | そのまま |
-| `line` (optional) | `line` | `line ?? mixHex(fg, bg, 50)` |
-| `accent` (optional) | `arrow` | `accent ?? mixHex(fg, bg, 85)` |
-| `accent` (optional) | `accent` | そのまま |
-| `border` (optional) | `border` | `border ?? mixHex(fg, bg, 20)` |
-| - | `corner` | = line (上記で算出済みの値) |
-| - | `junction` | = border (上記で算出済みの値) |
-
-**注**: `mixHex()` は CSS `color-mix(in srgb, ...)` と同等の sRGB 線形補間。
-beautiful-mermaid 内部の `mixColors()` も同じ算術 (`theme.ts:77-87`) を使用する。
-zinc-dark (`bg: #18181B`, `fg: #FAFAFA`) でのフォールバック算出結果:
-line=#89898b, accent=#d8d8d9, border=#454548 -- ダークテーマとして妥当な値を確認済み。
-
-### HTML テンプレート用テーマ色補完
-
-HTML テンプレートの CSS では `line`, `accent`, `muted`, `border` を使用する。
-`DiagramColors` の optional フィールドが未定義の場合のフォールバック:
-
-```javascript
-// MIX ratios from beautiful-mermaid theme.ts:64-87
-// line: 50 (MIX.line), accent: 85 (MIX.arrow), muted: 60 (MIX.textSec), border: 20 (MIX.nodeStroke)
-function resolveThemeColors(colors) {
-  return {
-    bg: colors.bg,
-    fg: colors.fg,
-    line: colors.line ?? mixHex(colors.fg, colors.bg, 50),       // MIX.line
-    accent: colors.accent ?? mixHex(colors.fg, colors.bg, 85),   // MIX.arrow
-    muted: colors.muted ?? mixHex(colors.fg, colors.bg, 60),     // MIX.textSec
-    border: colors.border ?? mixHex(colors.fg, colors.bg, 20),   // MIX.nodeStroke
-  };
-}
-```
-
-`diagramColorsToAsciiTheme()` と `resolveThemeColors()` は `mixHex()` を共有するが、
-目的・出力型が異なるため別関数として実装する。
-
-### テーマバリデーション
-
-```javascript
-function resolveDiagramTheme(themeName) {
-  if (themeName in MERMAID_THEMES) return MERMAID_THEMES[themeName];
-  const names = Object.keys(MERMAID_THEMES).join(', ');
-  console.error(`Unknown theme: ${themeName}\nAvailable themes: ${names}`);
-  process.exit(1);
-}
-```
-
-エイリアスが廃止されたため、単純な1段階ルックアップになる。
-
-### --theme ヘルプテキスト
-
-```
---theme <name>    color theme (default: "zinc-light")
-                  zinc-light, zinc-dark, tokyo-night, tokyo-night-storm,
-                  tokyo-night-light, catppuccin-mocha, catppuccin-latte,
-                  nord, nord-light, dracula, github-light, github-dark,
-                  solarized-light, solarized-dark, one-dark
-```
-
-commander の `.option()` で改行入りの description を渡すことで実現する。
-
-### 各テーマの DiagramColors フィールド一覧 (実測値)
-
-| テーマ | bg | fg | line | accent | muted | border | surface |
-|-------|----|----|------|--------|-------|--------|---------|
-| zinc-light | #FFFFFF | #27272A | - | - | - | - | - |
-| zinc-dark | #18181B | #FAFAFA | - | - | - | - | - |
-| tokyo-night | #1a1b26 | #a9b1d6 | #3d59a1 | #7aa2f7 | #565f89 | - | - |
-| tokyo-night-storm | #24283b | #a9b1d6 | #3d59a1 | #7aa2f7 | #565f89 | - | - |
-| tokyo-night-light | #d5d6db | #343b58 | #34548a | #34548a | #9699a3 | - | - |
-| catppuccin-mocha | #1e1e2e | #cdd6f4 | #585b70 | #cba6f7 | #6c7086 | - | - |
-| catppuccin-latte | #eff1f5 | #4c4f69 | #9ca0b0 | #8839ef | #9ca0b0 | - | - |
-| nord | #2e3440 | #d8dee9 | #4c566a | #88c0d0 | #616e88 | - | - |
-| nord-light | #eceff4 | #2e3440 | #aab1c0 | #5e81ac | #7b88a1 | - | - |
-| dracula | #282a36 | #f8f8f2 | #6272a4 | #bd93f9 | #6272a4 | - | - |
-| github-light | #ffffff | #1f2328 | #d1d9e0 | #0969da | #59636e | - | - |
-| github-dark | #0d1117 | #e6edf3 | #3d444d | #4493f8 | #9198a1 | - | - |
-| solarized-light | #fdf6e3 | #657b83 | #93a1a1 | #268bd2 | #93a1a1 | - | - |
-| solarized-dark | #002b36 | #839496 | #586e75 | #268bd2 | #586e75 | - | - |
-| one-dark | #282c34 | #abb2bf | #4b5263 | #c678dd | #5c6370 | - | - |
-
-全15テーマで `border` と `surface` は未定義。13/15テーマが `line`, `accent`, `muted` を提供。
-zinc-light と zinc-dark のみ `bg`, `fg` のみ -> `mixHex()` によるフォールバック算出が必須。
-
-## 変更対象
-
-**main.js** (機能実装) + **test/memd.test.js** (テスト追加・更新) + **README.md** (テーマ名・オプション更新) + **package.json** (バージョン 2.0.0)
-
-### main.js 変更内容
-
-1. **import 追加**: `renderMermaidSVG`, `THEMES as MERMAID_THEMES` を beautiful-mermaid から追加インポート。`Marked` クラスを marked から追加インポート
-2. **既存 `THEMES` を `TERMINAL_THEMES` にリネーム**: `main.js:119` の memd 独自テーマオブジェクトを beautiful-mermaid テーマ名をキーとする `TERMINAL_THEMES` に変更。`default` エントリを削除し、`DEFAULT_TERMINAL_THEME` 定数に分離。旧 `monokai` エントリを破棄し、`'one-dark'` キーで Atom One Dark 準拠パレットを新設
-3. **`escapeHtml()` ユーティリティ関数追加**: `&`, `<`, `>`, `"`, `'` をエスケープ (Mermaid 変換エラー表示用)
-4. **`mixHex()` + `diagramColorsToAsciiTheme()` 追加**: DiagramColors -> AsciiTheme 変換。beautiful-mermaid 内部と同じ MIX 比率 (`theme.ts:64-87`) を使用
-5. **`resolveThemeColors()` 追加**: DiagramColors の optional フィールドをフォールバック算出 (HTML テンプレートの CSS 用)。MIX 比率: line=50 (`MIX.line`), accent=85 (`MIX.arrow`), muted=60 (`MIX.textSec`), border=20 (`MIX.nodeStroke`)
-6. **`resolveDiagramTheme()` 追加**: `MERMAID_THEMES` から DiagramColors を取得。不明テーマ名はエラー
-7. **`resolveTerminalTheme()` 追加**: `TERMINAL_THEMES` からターミナル用テーマを取得。マッピングがない場合は `DEFAULT_TERMINAL_THEME` (ハイライトなし)
-8. **`convertMermaidToSVG()` 関数追加**: Mermaid ブロックを SVG に変換 (`@import` 除去 + marker ID ユニーク化を含む)
-9. **`renderToHTML()` 関数追加**: `new Marked()` インスタンスで Markdown -> HTML 変換 + HTML テンプレート生成
-10. **commander に `--html` オプション追加**
-11. **`--theme` のデフォルト値を `zinc-light` に変更**: commander の `.option()` デフォルト値とヘルプテキストを更新。action 内の `const themeName = options.theme || 'default'` も `options.theme` に簡略化 (commander のデフォルト値に委譲)
-12a. **`THEME_NAMES` を `MERMAID_THEMES` ベースに再定義**: `const THEME_NAMES = Object.keys(MERMAID_THEMES)` に変更。ヘルプテキスト生成とテーマバリデーションの両方で使用
-12b. **CLI `.description()` を更新**: `'Render markdown with mermaid diagrams to terminal output'` -> `'Render markdown with mermaid diagrams'`
-13. **action 内を早期分岐**: テーマ解決後に `--html` で HTML パス / ターミナルパスに分岐。HTML パスでは Markdown を結合後に `convertMermaidToSVG` を1回実行 (svgIndex 連続)。ターミナルパスでは既存の全 `marked.use()` 呼び出しをすべて分岐内に移動
-14. **`--no-color` の改善**: `chalk.level = 0` による根元からの ANSI 無効化。既存の ANSI ストリッピング正規表現 (`main.js:203-207`) を削除
-15. **`renderToString()` を廃止**: `convertMermaidToAscii` + `marked.parse` のロジックをターミナルパス分岐内にインライン化。外部呼び出し元は action 内のみで外部 API ではないため、リスクなし
-16. **`convertMermaidToAscii()` のリファクタ**: CLI options オブジェクトの直接参照をやめ、必要なパラメータを明示的に受け取る新シグネチャに変更
-17. **ASCII 描画にテーマ色を適用**: `renderMermaidASCII()` 呼び出し時に `theme` (AsciiTheme) と `colorMode` を渡す。`--no-color` 時は `colorMode: 'none'`、それ以外は `colorMode` を省略 (`'auto'`)
-
-### `convertMermaidToAscii()` のリファクタ
-
-現在のシグネチャは CLI の `options` オブジェクトを直接受け取っている (`main.js:177`)。
-リファクタ後は必要なパラメータのみを明示的に受け取る:
-
-```javascript
-// Before: CLI options を直接参照 (暗黙の依存)
-function convertMermaidToAscii(markdown, options = {}) {
-  // options.ascii, options.color を参照
-  mermaidOptions.colorMode = options.color === false ? 'none' : 'none';  // バグ: 常に 'none'
-}
-
-// After: 必要なパラメータを明示的に受け取る
-function convertMermaidToAscii(markdown, { useAscii = false, colorMode, theme } = {}) {
-  const mermaidOptions = {};
-  if (useAscii) mermaidOptions.useAscii = true;
-  if (colorMode) mermaidOptions.colorMode = colorMode;
-  if (theme) mermaidOptions.theme = theme;
-  const asciiArt = renderMermaidASCII(code.trim(), mermaidOptions);
-  // ...
-}
-```
-
-呼び出し側:
-
-```javascript
-const asciiTheme = diagramColorsToAsciiTheme(diagramColors);
-const colorMode = useColor ? undefined : 'none';  // undefined = 'auto' (ターミナル自動検出)
-const processed = convertMermaidToAscii(markdown, {
-  useAscii: options.ascii,
-  colorMode,
-  theme: asciiTheme,
-});
-```
-
-### import の変更
-
-```javascript
-// Before
-import { marked } from 'marked';
-import { renderMermaidASCII } from 'beautiful-mermaid';
-
-// After
-import { marked, Marked } from 'marked';
-import { renderMermaidASCII, renderMermaidSVG, THEMES as MERMAID_THEMES } from 'beautiful-mermaid';
-```
-
-### TERMINAL_THEMES の定義 (旧 THEMES のリキー)
-
-```javascript
-// Before: memd 独自テーマ名をキーに使用
-const THEMES = {
-  default: { highlight: null, markdown: {} },
-  monokai: buildTheme({
-    keyword:  '#F92672', func:    '#A6E22E', string:  '#E6DB74', ...
-  }),
-  dracula: buildTheme({ ... }),
-  'github-dark': buildTheme({ ... }),
-  solarized: buildTheme({ ... }),
-  nord: buildTheme({ ... }),
-};
-
-// After: beautiful-mermaid テーマ名をキーに使用
-const TERMINAL_THEMES = {
-  'one-dark': buildTheme({
-    // Atom One Dark Syntax Theme 準拠 (https://github.com/atom/one-dark-syntax)
-    keyword:  '#e06c75', func:    '#61afef', string:  '#98c379',
-    type:     '#e5c07b', number:  '#d19a66', literal: '#c678dd',
-    param:    '#d19a66', comment: '#5c6370', fg:      '#abb2bf',
-    heading1: '#e06c75', heading2:'#61afef',
-    added:    '#98c379', deleted: '#e06c75',
-  }),
-  'dracula': buildTheme({ ... }),       // 既存パレット維持
-  'github-dark': buildTheme({ ... }),   // 既存パレット維持
-  'solarized-dark': buildTheme({ ... }),// 旧 solarized、パレット維持
-  'nord': buildTheme({ ... }),          // 既存パレット維持
-};
-
-const DEFAULT_TERMINAL_THEME = { highlight: null, markdown: {} };
-
-function resolveTerminalTheme(themeName) {
-  return TERMINAL_THEMES[themeName] ?? DEFAULT_TERMINAL_THEME;
-}
-```
-
-### marked インスタンスの分離 (重要)
-
-現状 (`main.js:303-307`) ではグローバルな `marked` に `markedTerminal` を適用しており、
-出力は ANSI エスケープコード付きのターミナル文字列になる。
-HTML モードで同じ `marked` を使うと ANSI コードが HTML に混入するため、分離が必須。
-
-早期分岐により、HTML パスでは `marked.use(markedTerminal(...))` 自体を実行しない。
-これにより、グローバル `marked` を汚す問題が根本的に解消される。
-
-```javascript
-// Terminal path (existing) -- 分岐内でのみ設定
-marked.use(markedTerminal({ ... }));  // Global instance, ANSI output
-marked.parse(processed);
-
-// HTML path (new) -- グローバル marked に触れない
-const htmlMarked = new Marked();      // Separate instance, plain HTML output
-htmlMarked.parse(processed);
-```
-
-### marked の HTML パススルーについて
-
-marked v17.0.3 では HTML タグはデフォルトでエスケープされず、そのまま出力に含まれる。
-これは marked の設計方針 (README: "Marked does not sanitize the output HTML") による。
-`sanitize` オプション等の制御は存在しない。
-
-`new Marked().parse()` で SVG タグ入りの Markdown をパースすると、SVG はそのまま HTML に含まれる:
-```javascript
-new Marked().parse('text <svg>...</svg> more')
-// -> '<p>text <svg>...</svg> more</p>'
-```
-
-**リスク**: marked のメジャーバージョンアップでこの挙動が変わる可能性はゼロではない。
-`package.json` で marked のバージョンをメジャー固定 (`^17`) しているため、
-v18 への更新時にはこの点を確認すること。
-
-**注**: `new Marked().parse()` はデフォルト構成 (async extension なし) では同期的に `string` を返す。
-async extension を `.use()` した場合のみ `Promise<string>` を返す。本実装では素の `new Marked()` を
-使うため同期呼び出しで問題ないが、将来 extension を追加する場合は `await` が必要になる点に留意。
-<!-- TypeScript 型定義上は戻り値が string | Promise<string> のため、@ts-nocheck 解除時はキャストが必要 -->
-
-### SVG 内 `<style>` のスコーピングについて
-
-各 SVG 内の `<style>` ブロックは `svg { ... }` セレクタで CSS カスタムプロパティを定義している。
-HTML5 仕様上、インライン SVG 内の `<style>` は当該 SVG にスコープされるが、
-一部ブラウザ (特に古いもの) でスタイルがリークする既知の問題がある。
-
-**本実装では問題にならない理由:**
-- 全 SVG が同一テーマを使用するため、仮にスタイルがリークしても値は同一
-- CSS カスタムプロパティ (`--_text`, `--_line` 等) は `var(--fg)`, `var(--bg)` を参照しており、
-  これらは各 `<svg>` 要素の `style` 属性 (インラインスタイル) で設定される
-- インラインスタイルは `<style>` ブロックより高い specificity を持つため、
-  各 SVG の `--fg`, `--bg` は常にその SVG 固有の値に解決される
-- `text { font-family: ... }` もリークしうるが、全 SVG で同じフォントのため無害
-
-将来的に SVG ごとに異なるテーマを使う場合はスコーピング対策が必要になるが、
-現在の設計ではその予定はない。
-
-### SVG marker ID のユニーク化 (重要・PoC 検証済み)
-
-beautiful-mermaid は SVG 内の `<marker>` に固定 ID を使用しており、
-namespace/prefix オプションは提供していない。
-
-**全 marker ID の一覧** (ソースコード調査済み):
-
-| レンダラー | marker ID | 用途 |
-|-----------|-----------|------|
-| flowchart | `arrowhead` | 順方向矢印 |
-| flowchart | `arrowhead-start` | 逆方向矢印 |
-| flowchart | `arrowhead-{suffix}` | linkStyle で色指定した矢印 |
-| flowchart | `arrowhead-start-{suffix}` | 同上 (逆方向) |
-| sequence | `seq-arrow` | filled 矢印 |
-| sequence | `seq-arrow-open` | open 矢印 |
-| class | `cls-inherit` | 継承 (hollow triangle) |
-| class | `cls-composition` | コンポジション (filled diamond) |
-| class | `cls-aggregation` | 集約 (hollow diamond) |
-| class | `cls-arrow` | 関連 (open arrow) |
-
-注: `{suffix}` は `markerSuffix()` 関数により非英数字をhex エンコードした文字列
-(例: `var(--_arrow)` -> `var28--5farrow29`)。
-
-**beautiful-mermaid が `id` 属性を使うのは `<marker>` 要素のみ**。
-ノード等には `data-id` 属性を使用し、`<clipPath>`, `<filter>`, `<linearGradient>` 等の
-ID 付き要素は生成しない (ソースコード全件調査済み: `renderer.ts`, `sequence/renderer.ts`,
-`class/renderer.ts`, `er/renderer.ts`, `xychart/renderer.ts`)。
-
-したがって、` id="..."` と `url(#...)` の一括置換は現時点で安全:
-
-```javascript
-function escapeHtml(str) {
-  return str.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;').replace(/"/g, '&quot;').replace(/'/g, '&#39;');
-}
-
-function convertMermaidToSVG(markdown, diagramTheme) {
-  const mermaidRegex = /```mermaid\s+([\s\S]+?)```/g;
-  let svgIndex = 0;
-  return markdown.replace(mermaidRegex, (_, code) => {
-    try {
-      const prefix = `m${svgIndex++}`;
-      let svg = renderMermaidSVG(code.trim(), diagramTheme);
-      svg = svg.replace(/@import url\([^)]+\);\s*/g, '');
-      // Prefix all id="..." and url(#...) to avoid cross-SVG collisions
-      // Note: regex uses ` id=` (with leading space) to avoid matching `data-id`
-      svg = svg.replace(/ id="([^"]+)"/g, ` id="${prefix}-$1"`);
-      svg = svg.replace(/url\(#([^)]+)\)/g, `url(#${prefix}-$1)`);
-      return svg;
-    } catch (e) {
-      return `<pre class="mermaid-error">${escapeHtml(e.message)}\n\n${escapeHtml(code.trim())}</pre>`;
-    }
-  });
-}
-```
-
-**PoC 検証結果** (`poc-html.mjs` で test/test3.md を変換):
-- 6つの Mermaid ブロック (flowchart x3, sequence, class, state) から14個の marker ID を生成
-- 全 marker ID がユニーク (m0-arrowhead, m1-arrowhead, m2-seq-arrow, m3-cls-inherit 等)
-- 重複ゼロを確認
-
-将来 beautiful-mermaid が `<clipPath id="...">` 等を追加した場合にも
-この一括置換で正しく動作する (むしろ限定的な置換よりも安全)。
-
-**注**: 現時点で beautiful-mermaid は `href="#..."` や `xlink:href="#..."` を生成しないが、
-将来 `<use href="#...">` 等が追加された場合は `href` 参照のプレフィックス化も必要になる。
-その際は `href="#` の置換を追加すること。
-
-### HTML テンプレート仕様
-
-- スタンドアロン (外部リソース依存なし)
-- コードブロックのシンタックスハイライトは**スコープ外** (将来的に highlight.js / shiki 等で対応可能だが、初回リリースでは無着色)
-- `.mermaid-error` のスタイルはテーマの色を使って動的に生成する (後述)
-- **POSIX 準拠**: テンプレート末尾に改行 (`\n`) を含める。`</html>` の後に改行1つ
-
-#### レイアウト
-
-| プロパティ | 値 |
-|-----------|-----|
-| `max-width` | `800px` |
-| `margin` | `2rem auto` (中央寄せ) |
-| `padding` | `0 1rem` |
-| `font-family` | `system-ui, -apple-system, sans-serif` |
-| `line-height` | `1.6` |
-
-#### テーマ色の要素別適用
-
-| CSS セレクタ | プロパティ | テーマ色 |
-|-------------|-----------|---------|
-| `body` | `background` | `bg` |
-| `body` | `color` | `fg` |
-| `a` | `color` | `accent` |
-| `hr` | `border-color` | `line` |
-| `blockquote` | `border-left: 3px solid` | `line` |
-| `blockquote` | `color` | `muted` |
-| `blockquote` | `padding-left` | `1rem` |
-| `svg` | `max-width: 100%; height: auto` | (レスポンシブ) |
-| `pre` | `background` | `color-mix(in srgb, fg 8%, bg)` |
-| `pre` | `padding` | `1rem` |
-| `pre` | `border-radius` | `6px` |
-| `pre` | `overflow-x` | `auto` |
-| `code` | `font-size` | `0.9em` |
-| `code` | `color` | `accent` |
-| `pre code` | `color` | `inherit` (pre 内のコードは accent を上書きしない) |
-| `table` | `border-collapse` | `collapse` |
-| `th, td` | `border` | `1px solid line` |
-| `th, td` | `padding` | `0.4rem 0.8rem` |
-| `th` | `background` | `color-mix(in srgb, fg 5%, bg)` |
-
-### .mermaid-error のテーマ対応
-
-ハードコードの明るい背景色 (`#fff3cd` 等) はダークテーマで視認性が低い。
-テーマの色から動的に生成する:
-
-```css
-.mermaid-error {
-  background: color-mix(in srgb, ${t.accent} 10%, ${t.bg});
-  border: 1px solid color-mix(in srgb, ${t.accent} 40%, ${t.bg});
-  color: ${t.fg};
-  padding: 1rem;
-  border-radius: 6px;
-  overflow-x: auto;
-  white-space: pre-wrap;
-}
-```
-
-## 追加依存
-
-なし。
-
-## フォールバック / エラー処理
-
-- Mermaid ブロックの SVG 変換失敗時: `<pre class="mermaid-error">` でソースコードとエラーメッセージを表示 (HTML エスケープ済み)
-- 未対応の図種 (beautiful-mermaid がサポートしないもの): 同上
-- `--html` + 複数ファイル入力: Markdown を先に結合してから変換し、単一 HTML を生成
-
-## テスト計画
-
-### 既存テストへの影響
-
-既存テストはすべて `--no-color` 付きで実行されている。`--no-color` の実装が後処理 ANSI ストリッピングから `chalk.level = 0` に変更されるが、出力結果は同等であるため既存テストへの影響は最小限。
-
-ただし以下の更新が必要:
-
-| テスト | 変更理由 |
-|-------|---------|
-| `--version` テスト | バージョン番号を `1.5.1` -> `2.0.0` に更新 |
-| `--help` テスト | 新オプション (`--html`) がヘルプ出力に含まれる。テーマ名一覧が変更される |
-
-### 追加テスト (test/memd.test.js)
-
-#### --html 出力テスト
-
-| テストケース | 入力ファイル | 検証内容 |
-|-------------|------------|---------|
-| `--html` + ファイル -> stdout | test/test1.md | `<!DOCTYPE html>`, `<svg`, テーマ CSS 色が含まれること。末尾が `\n` で終わること |
-| `--html` + stdin -> stdout | `echo '# hello'` | パイプ入力で HTML が stdout に出力されること |
-| `--html` + Mermaid エラー | (gantt 記法を含む文字列) | `<pre class="mermaid-error">` が出力され、エラーメッセージが HTML エスケープされていること |
-| `--html` + 複数 Mermaid ブロック | test/test3.md | marker ID が衝突しないこと (`m0-`, `m1-` prefix)。SVG が複数含まれること |
-| `--html` + 複数ファイル | test/test1.md test/test2.md | 結合された単一 HTML が stdout に出力されること。marker ID がファイル間で連続すること |
-
-#### テーマ関連テスト (HTML パス)
-
-| テストケース | 検証内容 |
-|-------------|---------|
-| `--html --theme dracula` | HTML 出力に dracula の CSS 色 (`bg: #282a36`, `fg: #f8f8f2` 等) が含まれること |
-| `--html --theme tokyo-night` | HTML 出力に tokyo-night の CSS 色が含まれること |
-| `--html --theme nonexistent` | エラー終了し、利用可能テーマ一覧が表示されること |
-| `--html --no-color` | エラーにならず、HTML がフルカラーで出力されること (黙って無視) |
-
-#### テーマ関連テスト (ターミナルパス)
-
-| テストケース | 検証内容 |
-|-------------|---------|
-| `--theme dracula --no-pager --no-color` + ファイル | dracula テーマでターミナル出力が正常に生成されること |
-| `--theme tokyo-night --no-pager --no-color` + ファイル | ハイライトなしテーマでターミナル出力が正常に生成されること (フォールバック動作) |
-| `--theme one-dark --no-pager --no-color` + ファイル | one-dark テーマでターミナル出力が正常に生成されること |
-| `--theme nonexistent --no-pager --no-color` + ファイル | エラー終了し、利用可能テーマ一覧が表示されること |
-| デフォルト (--theme なし) + `--no-pager --no-color` + ファイル | zinc-light がデフォルトとして使用されること |
-
-#### chalk.level = 0 と buildTheme() の組み合わせテスト
-
-`buildTheme()` で事前構築された chalk チェインが `chalk.level = 0` 設定後に
-ANSI コードを出力しないことを検証する。5つの `TERMINAL_THEMES` エントリ
-(one-dark, dracula, github-dark, solarized-dark, nord) が対象。
-
-| テストケース | 検証内容 |
-|-------------|---------|
-| `--theme dracula --no-pager --no-color` + test/test-highlight.md | ANSI エスケープコード (`\x1b[`) が出力に含まれないこと |
-| `--theme one-dark --no-pager --no-color` + test/test-highlight.md | 同上 |
-| `--theme github-dark --no-pager --no-color` + test/test-highlight.md | 同上 |
-| `--theme solarized-dark --no-pager --no-color` + test/test-highlight.md | 同上 |
-| `--theme nord --no-pager --no-color` + test/test-highlight.md | 同上 |
-
-test/test-highlight.md にはコードブロック (シンタックスハイライト対象) と
-通常の Markdown 要素 (heading, bold, link 等) の両方が含まれるため、
-`buildTheme()` の highlight パレットと markdown パレット両方の無効化を検証できる。
-
-**背景**: `buildTheme()` はモジュールロード時に `chalk.hex()` チェインを構築する。
-`chalk.level = 0` は action 内で設定される。chalk 5.x では子チェインが
-親インスタンスの `level` を動的参照するため理論上は問題ないが、
-chalk のメジャーバージョンアップでこの挙動が変わる可能性があるため、
-テストで挙動を保証する。
-
-#### 既存テスト更新
-
-| テストケース | 変更内容 |
-|-------------|---------|
-| `--version` | バージョン番号の期待値を `1.5.1` -> `2.0.0` に更新 |
-| `--help` | `--html`, 新テーマ名一覧 (`zinc-light` 等) が出力に含まれることを検証 |
-
-### README.md 更新内容
-
-1. **Usage セクションのヘルプテキスト**: 新オプション (`--html`) を追加。テーマ名一覧を beautiful-mermaid テーマに更新。デフォルト値を `zinc-light` に変更
-2. **description**: "Render markdown with mermaid diagrams to terminal output" -> "Render markdown with mermaid diagrams" (HTML 出力にも対応するため)
-3. **Example セクション**: HTML 出力例を追加 (`memd doc.md --html > out.html`)
-
-### package.json 更新内容
-
-1. **version**: `1.5.1` -> `2.0.0`
-2. **description**: `"A CLI tool to render Markdown with Mermaid diagrams directly in the terminal"` -> `"A CLI tool to render Markdown with Mermaid diagrams"` (HTML 出力にも対応するため)
-
-## スコープ外 (将来対応)
-
-- xychart の `interactive` オプション (ホバーツールチップ): beautiful-mermaid の `RenderOptions` でサポートされているが、初回リリースでは対応しない
-- コードブロックのシンタックスハイライト (highlight.js / shiki)
-- `--html` + stdin + ファイル引数の同時指定: 現在のコードは `files.length === 0` で stdin に分岐する (`main.js:338`)。この動作を維持し、明示的な対応は行わない
-- ターミナルハイライトの対応テーマ追加 (現在5テーマのみ: one-dark, dracula, github-dark, solarized-dark, nord)