단일 HTML 파일에서 Mermaid 사용

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Mermaid in one HTML file</title>
<style>
  body { margin: 0; padding: 16px; font-family: system-ui, sans-serif; background: #fff; }
  .mermaid { margin: 0; text-align: center; }
</style>
</head>
<body>

<!-- The diagram is plain text. Mermaid replaces it with an SVG. -->
<pre class="mermaid">
flowchart TD
  A[Write the diagram as text] --> B{Does it render?}
  B -->|Yes| C[Share the page]
  B -->|No| D[Check the syntax]
  D --> A
</pre>

<!-- type="module" is required for import. Pin the exact version. -->
<script type="module">
  import mermaid from 'https://cdn.jsdelivr.net/npm/mermaid@12.0.0/dist/mermaid.esm.min.mjs';
  mermaid.initialize({ startOnLoad: true });
</script>
</body>
</html>

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Mermaid live editor</title>
<style>
  body { margin: 0; padding: 14px; font-family: system-ui, sans-serif; background: #f6f7f9; color: #1d2330; }
  label { font-weight: 600; font-size: 14px; }
  textarea {
    display: block; width: 100%; box-sizing: border-box; height: 150px; margin: 6px 0 8px;
    font: 14px/1.4 ui-monospace, Consolas, monospace; padding: 8px; border: 1px solid #cdd3dc; border-radius: 8px;
  }
  #status { font-size: 13px; min-height: 18px; color: #0f5132; }
  #status.error { color: #9a3412; }
  #out { background: #fff; border: 1px solid #e1e4ea; border-radius: 10px; padding: 10px; margin-top: 8px; text-align: center; overflow-x: auto; }
</style>
</head>
<body>
<label for="src">Diagram text (edit it)</label>
<textarea id="src" spellcheck="false">sequenceDiagram
  Browser->>CDN: import mermaid
  CDN-->>Browser: library code
  Browser->>Browser: text becomes SVG</textarea>
<div id="status"></div>
<div id="out"></div>

<script type="module">
  import mermaid from 'https://cdn.jsdelivr.net/npm/mermaid@12.0.0/dist/mermaid.esm.min.mjs';
  mermaid.initialize({ startOnLoad: false });  // we render ourselves

  const src = document.getElementById('src');
  const out = document.getElementById('out');
  const status = document.getElementById('status');
  let count = 0, timer;

  async function draw() {
    try {
      await mermaid.parse(src.value);               // throws on bad syntax
      const { svg } = await mermaid.render('d' + (++count), src.value);
      out.innerHTML = svg;
      status.className = '';
      status.textContent = 'Rendered.';
    } catch (err) {
      status.className = 'error';                    // keep the last good diagram
      status.textContent = 'Syntax error: ' + String(err.message || err).split('\n')[0];
    }
  }

  src.addEventListener('input', () => { clearTimeout(timer); timer = setTimeout(draw, 400); });
  draw();
</script>
</body>
</html>

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Mermaid diagrams with a theme switch</title>
<style>
  body { margin: 0; padding: 14px; font-family: system-ui, sans-serif; background: #fff; color: #1d2330; }
  .bar { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-bottom: 10px; }
  select { font: inherit; padding: 4px 6px; }
  .grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 12px; }
  .card { border: 1px solid #e1e4ea; border-radius: 10px; padding: 8px; overflow-x: auto; }
  h2 { font-size: 14px; margin: 0 0 6px; }
  .mermaid { margin: 0; text-align: center; }
  body.dark { background: #1f2020; color: #e5e7eb; }  /* page follows the dark theme */
  body.dark .card { border-color: #3a3d42; }
</style>
</head>
<body>
<div class="bar">
  <label for="theme"><b>Theme</b></label>
  <select id="theme">
    <option>redux-color</option><option>default</option><option>neutral</option>
    <option>dark</option><option>forest</option>
  </select>
</div>

<div class="grid">
  <div class="card"><h2>Flowchart</h2>
    <pre class="mermaid">
flowchart TD
  Idea --> Draft --> Review
  Review -->|changes| Draft
  Review -->|ok| Done</pre></div>
  <div class="card"><h2>Pie chart</h2>
    <pre class="mermaid">
pie title Time spent
  "Writing" : 50
  "Review" : 30
  "Fixes" : 20</pre></div>
</div>

<script type="module">
  import mermaid from 'https://cdn.jsdelivr.net/npm/mermaid@12.0.0/dist/mermaid.esm.min.mjs';

  const boxes = [...document.querySelectorAll('.mermaid')];
  const sources = boxes.map((el) => el.textContent);  // keep the text: rendering replaces it

  const select = document.getElementById('theme');

  async function drawAll(theme) {
    select.disabled = true;                            // one render at a time
    mermaid.initialize({ startOnLoad: false, theme });
    document.body.classList.toggle('dark', theme === 'dark');
    boxes.forEach((el, i) => {
      el.removeAttribute('data-processed');            // allow a second render
      el.textContent = sources[i];
    });
    await mermaid.run({ nodes: boxes });
    select.disabled = false;
  }

  select.addEventListener('change', () => drawAll(select.value));
  drawAll(select.value);
</script>
</body>
</html>