htmlファイルでマーメイド記法を使う方法

フローチャート

	graph LR
	    %% レイアウト方向を左から右に指定

	    subgraph クライアントサイド
	        A[ユーザー]
	    end

	    subgraph サーバーサイド
	        B[ウェブサーバー]
	        C[アプリケーションサーバー]
	        D[データベース]
	    end

	    subgraph 外部サービス
	        E[外部API]
	    end

	    A -->|リクエスト| B
	    B -->|処理要求| C
	    C -->|データ問い合わせ| D
	    C -->|APIコール| E
	    D -->|データ応答| C
	    E -->|APIレスポンス| C
	    C -->|処理結果| B
	    B -->|レスポンス| A

	    %% スタイルの適用
	    style A fill:#f9f,stroke:#333,stroke-width:2px
	    style D fill:#bbf,stroke:#f66,stroke-width:2px

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>PowerShell WPF アプリケーションフローチャート</title>
    <script src="<https://cdnjs.cloudflare.com/ajax/libs/mermaid/8.11.0/mermaid.min.js>"></script>
    <style>
        body {
            font-family: Arial, sans-serif;
            line-height: 1.6;
            color: #333;
            max-width: 1200px;
            margin: 0 auto;
            padding: 20px;
        }
        .mermaid {
            margin-bottom: 20px;
        }
        .description {
            background-color: #f9f9f9;
            border: 1px solid #ddd;
            padding: 10px;
            margin-top: 10px;
        }
    </style>
</head>
<body>
    <h1>フローチャート</h1>
    <div class="mermaid">
	graph LR
	    %% レイアウト方向を左から右に指定

	    subgraph クライアントサイド
	        A[ユーザー]
	    end

	    subgraph サーバーサイド
	        B[ウェブサーバー]
	        C[アプリケーションサーバー]
	        D[データベース]
	    end

	    subgraph 外部サービス
	        E[外部API]
	    end

	    A -->|リクエスト| B
	    B -->|処理要求| C
	    C -->|データ問い合わせ| D
	    C -->|APIコール| E
	    D -->|データ応答| C
	    E -->|APIレスポンス| C
	    C -->|処理結果| B
	    B -->|レスポンス| A

	    %% スタイルの適用
	    style A fill:#f9f,stroke:#333,stroke-width:2px
	    style D fill:#bbf,stroke:#f66,stroke-width:2px

    </div>
    
    <div id="description" class="description">
        コンポーネントをクリックすると、ここに説明が表示されます。
    </div>

    <script>
        mermaid.initialize({ startOnLoad: true });
        
        document.addEventListener('DOMContentLoaded', function() {
            const description = document.getElementById('description');
            const components = {
                'A': 'アプリケーションの実行が開始されます。',
                'B': 'SampleGUI.ps1: メイン処理を行うスクリプトファイルです。',
                'C': 'WPFClassHelpers.psm1: WPFオブジェクトを作成するヘルパー関数を提供します。',
                'D': 'CreateClassInstanceHelper.psm1: ランスペースに束縛されないクラスインスタンスを作成する関数を提供します。',
                'E': 'ViewModel.ps1: アプリケーションのロジックとデータ管理を担当するクラスを定義します。',
                'F': 'MainWindow.xaml: メインウィンドウのレイアウトを定義します。',
                'G': 'PartialWindow.xaml: 部分的なウィンドウのレイアウトを定義します。',
                'H': 'Common.xaml: 共通のリソース（スタイルなど）を定義します。',
                'I': 'モジュールとアセンブリの読み込み: 必要なライブラリを読み込みます。',
                'J': 'New-UnboundClassInstance: ランスペースに束縛されないクラスインスタンスを作成します。',
                'K': 'MyViewModel作成: アプリケーションのメインビューモデルを作成します。',
                'L': 'ViewModelBase: ビューモデルの基本クラスです。',
                'M': 'ActionCommand: コマンドを実装するクラスです。',
                'N': 'ThreadManager: 非同期処理を管理するクラスです。',
                'O': 'RightMarginConverter: UIの右マージンを計算するコンバーターです。',
                'P': 'CreateButtons: UIのボタンを作成します。',
                'Q': 'New-WPFObject: XAMLからWPFオブジェクトを作成します。',
                'R': 'ウィンドウの表示: 作成したウィンドウを表示します。',
                'S': 'ユーザーアクション: ユーザーがUIを操作する部分です。',
                'T': 'ボタンクリック: ユーザーがボタンをクリックします。',
                'U': 'コマンド実行: クリックに応じてコマンドが実行されます。',
                'V': 'AddTenSlowly: SharedResourceに10を加算する非同期処理です。',
                'W': 'ExternalMethod: 外部メソッドを呼び出す処理です。',
                'X': 'ThreadManager.InvokeAsync: 非同期処理を開始します。',
                'Y': '非同期処理: バックグラウンドで実行される処理です。',
                'Z': 'SharedResource更新: 共有リソースの値を更新します。',
                'AA': 'UI更新: 更新された値をUIに反映します。',
                'AB': 'アプリケーション終了: アプリケーションの実行が終了します。'
            };
            
            document.querySelector('.mermaid').addEventListener('click', function(event) {
                const target = event.target;
                if (target.tagName === 'tspan') {
                    const id = target.textContent.match(/^(\\w+)\\[/)?.[1];
                    if (id && components[id]) {
                        description.textContent = components[id];
                    }
                }
            });
        });
    </script>
</body>
</html>

// HTML要素に描画する自作Mermaidライブラリ

class MermaidLite {
    constructor(targetId) {
        this.target = document.getElementById(targetId);
    }

    // Mermaid記法のテキストを解析する
    parse(input) {
        const lines = input.trim().split('\\n');
        const nodes = {};
        const edges = [];

        lines.forEach(line => {
            const matchNode = line.match(/^(\\w+)(.+)$/);
            const matchEdge = line.match(/^(\\w+)\\s*-->\\s*(\\w+)$/);

            if (matchNode) {
                const [, id, label] = matchNode;
                nodes[id] = label;
            } else if (matchEdge) {
                const [, from, to] = matchEdge;
                edges.push({ from, to });
            }
        });

        return { nodes, edges };
    }

    // ノードとエッジをHTMLとしてレンダリングする
    render(input) {
        const { nodes, edges } = this.parse(input);

        // グラフのコンテナを作成
        const container = document.createElement('div');
        container.style.position = 'relative';

        // ノードをHTMLとして作成
        Object.entries(nodes).forEach(([id, label], index) => {
            const node = document.createElement('div');
            node.innerText = label;
            node.id = id;
            node.style.position = 'absolute';
            node.style.padding = '10px';
            node.style.border = '1px solid #333';
            node.style.borderRadius = '5px';
            node.style.top = `${index * 60}px`;
            node.style.left = '50px';
            container.appendChild(node);
        });

        // エッジをHTMLとして作成
        edges.forEach(({ from, to }) => {
            const edge = document.createElement('div');
            edge.innerText = '→';
            edge.style.position = 'absolute';
            edge.style.top = `${parseInt(document.getElementById(from).style.top) + 20}px`;
            edge.style.left = '100px';
            container.appendChild(edge);
        });

        // 描画結果を対象に追加
        this.target.innerHTML = '';
        this.target.appendChild(container);
    }
}

// 使用例
const graphText = `
A[スタート]
B[処理1]
C[終了]
A --> B
B --> C
`;

const mermaidLite = new MermaidLite('graphContainer');
mermaidLite.render(graphText);

フローチャート

クラス図

ER図