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

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

その他の条件は以下の通りとします

マインドマップを編集・表示・ダウンロードできるWebアプリケーションを作成します。

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Mermaid Mindmap Editor</title>
    <script src="<https://cdnjs.cloudflare.com/ajax/libs/mermaid/11.4.0/mermaid.min.js>"></script>
    <style>
        body {
            margin: 20px;
            font-family: Arial, sans-serif;
        }
        .controls {
            margin-bottom: 20px;
        }
        .controls button, .controls select {
            margin-right: 10px;
            padding: 5px 10px;
        }
        #output {
            border: 1px solid #ccc;
            padding: 20px;
            margin-top: 20px;
        }
        textarea {
            width: 100%;
            height: 200px;
            margin-bottom: 20px;
        }
        .title {
            text-align: center;
            margin-bottom: 20px;
            font-size: 24px;
        }
    </style>
</head>
<body>
    <div class="controls">
        <select id="fontFamily">
            <option value="Arial">Arial</option>
            <option value="Times New Roman">Times New Roman</option>
            <option value="Courier New">Courier New</option>
            <option value="Georgia">Georgia</option>
            <option value="Verdana">Verdana</option>
        </select>
        <select id="fontSize">
            <option value="12px">12px</option>
            <option value="14px">14px</option>
            <option value="16px">16px</option>
            <option value="18px">18px</option>
            <option value="20px">20px</option>
        </select>
        <button id="download">Download SVG</button>
    </div>

    <details>
        <summary>Edit Mindmap</summary>
        <textarea id="input">mindmap
    Root Topic
        Topic 1
            Subtopic 1.1
            Subtopic 1.2
        Topic 2
            Subtopic 2.1
            Subtopic 2.2</textarea>
    </details>

    <div id="title" class="title"></div>
    <div id="output"></div>

    <script>
        mermaid.initialize({
            startOnLoad: false,
            theme: 'default'
        });

        const input = document.getElementById('input');
        const output = document.getElementById('output');
        const title = document.getElementById('title');
        const fontFamily = document.getElementById('fontFamily');
        const fontSize = document.getElementById('fontSize');
        const downloadBtn = document.getElementById('download');

        function updateDiagram() {
            const code = input.value;

            // Extract root node text (title)
            const lines = code.split('\\\\n');
            const rootLine = lines.find(line => line.trim() && !line.includes('mindmap'));
            if (rootLine) {
                title.textContent = rootLine.trim();
            }

            // Clear previous diagram
            output.innerHTML = '';

            // Create new diagram
            const element = document.createElement('div');
            element.className = 'mermaid';
            element.textContent = code;
            output.appendChild(element);

            mermaid.run({
                nodes: [element]
            });
        }

        // Update font settings
        function updateFontSettings() {
            output.style.fontFamily = fontFamily.value;
            output.style.fontSize = fontSize.value;
            title.style.fontFamily = fontFamily.value;
            title.style.fontSize = `calc(${fontSize.value} * 1.5)`;
            updateDiagram();
        }

        // Download SVG
        function downloadSVG() {
            const svg = output.querySelector('svg');
            if (svg) {
                const svgData = new XMLSerializer().serializeToString(svg);
                const blob = new Blob([svgData], { type: 'image/svg+xml' });
                const url = URL.createObjectURL(blob);
                const a = document.createElement('a');
                a.href = url;
                a.download = 'mindmap.svg';
                document.body.appendChild(a);
                a.click();
                document.body.removeChild(a);
                URL.revokeObjectURL(url);
            }
        }

        // Event listeners
        input.addEventListener('blur', updateDiagram);
        fontFamily.addEventListener('change', updateFontSettings);
        fontSize.addEventListener('change', updateFontSettings);
        downloadBtn.addEventListener('click', downloadSVG);

        // Initial render
        updateDiagram();
    </script>
</body>
</html>

作成したプログラムには以下の機能が実装されています：

  1. マインドマップの編集と表示
  1. フォント設定
  1. タイトル表示
  1. SVGダウンロード
  1. レスポンシブ対応