https://codepen.io/TakamiChie/pen/VwoqPZO

Mermaid記法のマインドマップに、上部にタイトルを表示した上で、ボタンよりダウンロードが可能なJavaScriptプログラムを作成してください。なおタイトルはマインドマップのルートノードの内容とします。なお、フォントおよびフォントサイズは変更可能としてください。

以下は、Mermaid記法を使用してマインドマップを作成し、上部にタイトルを表示し、ボタンをクリックしてダウンロードできるJavaScriptプログラムの例です。フォントとフォントサイズも変更可能にしています。

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>Mermaid Mind Map</title>
    <script type="module">
        import mermaid from '<https://cdn.jsdelivr.net/npm/mermaid@10/dist/mermaid.esm.min.mjs>';

        document.addEventListener('DOMContentLoaded', () => {
            mermaid.initialize({ startOnLoad: true });

            const downloadButton = document.getElementById('downloadButton');
            downloadButton.addEventListener('click', () => {
                const svg = document.querySelector('svg');
                const serializer = new XMLSerializer();
                const source = serializer.serializeToString(svg);
                const blob = new Blob([source], { type: 'image/svg+xml' });
                const url = URL.createObjectURL(blob);
                const a = document.createElement('a');
                a.href = url;
                a.download = 'mindmap.svg';
                a.click();
                URL.revokeObjectURL(url);
            });
        });
    </script>
    <style>
        #mindmapTitle {
            font-family: Arial, sans-serif;
            font-size: 24px;
            text-align: center;
            margin-bottom: 20px;
        }
        #mermaid {
            font-family: Arial, sans-serif;
            font-size: 16px;
        }
    </style>
</head>
<body>
    <div id="mindmapTitle">マインドマップのタイトル</div>
    <div class="mermaid" id="mermaid">
        %%{init: {'theme': 'base', 'themeVariables': { 'fontFamily': 'Arial', 'fontSize': '16px' }}}%%
        mindmap
            root((マインドマップのタイトル))
                子ノード1
                    孫ノード1
                    孫ノード2
                子ノード2
                    孫ノード3
                    孫ノード4
    </div>
    <button id="downloadButton">ダウンロード</button>
</body>
</html>

このプログラムでは、以下のことが実現されています：

  1. Mermaid記法を使用してマインドマップを描画。
  2. マインドマップのルートノードの内容をタイトルとして表示。
  3. ダウンロードボタンをクリックすると、マインドマップをSVG形式でダウンロード可能。
  4. フォントとフォントサイズを変更可能。

このコードをHTMLファイルとして保存し、ブラウザで開くことで動作を確認できます。何か質問があれば教えてください！

divに表示されるマインドマップの内容を、textareaから設定できるようにしてください。textareaはdetails要素とsummary要素により折りたたみ表示ができるようにしてください。

以下は、textareaからマインドマップの内容を設定できるようにしたJavaScriptプログラムの例です。textareaはdetails要素とsummary要素により折りたたみ表示が可能です。

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>Mermaid Mind Map</title>
    <script type="module">
        import mermaid from '<https://cdn.jsdelivr.net/npm/mermaid@10/dist/mermaid.esm.min.mjs>';

        document.addEventListener('DOMContentLoaded', () => {
            mermaid.initialize({ startOnLoad: true });

            const renderButton = document.getElementById('renderButton');
            const downloadButton = document.getElementById('downloadButton');
            const textarea = document.getElementById('mermaidText');

            renderButton.addEventListener('click', () => {
                const mindmapContent = textarea.value;
                const mermaidDiv = document.getElementById('mermaid');
                mermaidDiv.innerHTML = mindmapContent;
                mermaid.init(undefined, mermaidDiv);
            });

            downloadButton.addEventListener('click', () => {
                const svg = document.querySelector('svg');
                const serializer = new XMLSerializer();
                const source = serializer.serializeToString(svg);
                const blob = new Blob([source], { type: 'image/svg+xml' });
                const url = URL.createObjectURL(blob);
                const a = document.createElement('a');
                a.href = url;
                a.download = 'mindmap.svg';
                a.click();
                URL.revokeObjectURL(url);
            });
        });
    </script>
    <style>
        #mindmapTitle {
            font-family: Arial, sans-serif;
            font-size: 24px;
            text-align: center;
            margin-bottom: 20px;
        }
        #mermaid {
            font-family: Arial, sans-serif;
            font-size: 16px;
        }
        textarea {
            width: 100%;
            height: 200px;
        }
    </style>
</head>
<body>
    <div id="mindmapTitle">マインドマップのタイトル</div>
    <details>
        <summary>マインドマップの内容を編集</summary>
        <textarea id="mermaidText">
%%{init: {'theme': 'base', 'themeVariables': { 'fontFamily': 'Arial', 'fontSize': '16px' }}}%%
mindmap
    root((マインドマップのタイトル))
        子ノード1
            孫ノード1
            孫ノード2
        子ノード2
            孫ノード3
            孫ノード4
        </textarea>
        <button id="renderButton">レンダリング</button>
    </details>
    <div class="mermaid" id="mermaid">
        %%{init: {'theme': 'base', 'themeVariables': { 'fontFamily': 'Arial', 'fontSize': '16px' }}}%%
        mindmap
            root((マインドマップのタイトル))
                子ノード1
                    孫ノード1
                    孫ノード2
                子ノード2
                    孫ノード3
                    孫ノード4
    </div>
    <button id="downloadButton">ダウンロード</button>
</body>
</html>

このプログラムでは、以下のことが実現されています：

  1. textareaからマインドマップの内容を設定可能。
  2. textareaはdetails要素とsummary要素により折りたたみ表示が可能。
  3. レンダリングボタンをクリックすると、textareaの内容がマインドマップとして表示されます。
  4. ダウンロードボタンをクリックすると、マインドマップをSVG形式でダウンロード可能。

このコードをHTMLファイルとして保存し、ブラウザで開くことで動作を確認できます。何か質問があれば教えてください！

以下の変更を行ってください