@yorz/cli 0.5.0 → 0.5.1

package/dist/cli/index.js

@@ -1,11 +1,11 @@
 #!/usr/bin/env node
 import { homedir, platform, networkInterfaces } from "node:os";
 import { Command, Option } from "commander";
-import { stat, readFile, writeFile, rm, mkdir, access, rename, readdir, appendFile, copyFile } from "node:fs/promises";
-import { join, dirname, extname, isAbsolute, resolve, basename as basename$1, sep, relative, normalize } from "node:path";
+import { stat, mkdir, readFile, writeFile, rename, rm, access, readdir, appendFile, copyFile } from "node:fs/promises";
+import { join, isAbsolute, resolve, basename as basename$1, dirname, extname, sep, relative, normalize } from "node:path";
 import { createHash, randomUUID, randomBytes } from "node:crypto";
-import { spawn, execFile } from "node:child_process";
 import { existsSync, openSync, closeSync, statSync, readSync, mkdirSync, watch, createReadStream } from "node:fs";
+import { spawn, execFile } from "node:child_process";
 import { serve } from "@hono/node-server";
 import { Hono } from "hono";
 import { promisify } from "node:util";
@@ -22,7 +22,7 @@ import { createOpencode } from "@opencode-ai/sdk";
 import { createInterface as createInterface$1 } from "node:readline/promises";
 import MarkdownIt from "markdown-it";
 const name = "@yorz/cli";
-const version = "0.5.0";
+const version = "0.5.1";
 const type = "module";
 const description = "";
 const bin = { "yorz": "./dist/cli/index.js" };
@@ -53,79 +53,280 @@ const pkg = {
   dependencies,
   devDependencies
 };
-const claudeAdapter = {
-  name: "claude",
-  resolveSkillsDir(scope, ctx) {
-    if (scope === "user") return join(ctx.home, ".claude", "skills");
-    return join(ctx.cwd, ".claude", "skills");
-  }
+const CURRENT_VERSION$1 = 1;
+const DEFAULT_GLOBAL_AGENT = { defaultKind: "claude" };
+const DEFAULT_NOTIFICATIONS = {
+  sessionEnd: { banner: false, sound: false }
 };
-const codexAdapter = {
-  name: "codex",
-  resolveSkillsDir(scope, ctx) {
-    if (scope === "user") return join(ctx.home, ".codex", "skills");
-    return join(ctx.cwd, ".codex", "skills");
+const SHORTCUT_ACTION_IDS = [
+  "newSpec",
+  "toggleSpecDetailFullscreen",
+  "projectSettings"
+];
+function resolveGlobalConfigDir(env = process.env) {
+  if (env.YORZ_HOME && env.YORZ_HOME.trim()) return env.YORZ_HOME.trim();
+  const xdg = env.XDG_CONFIG_HOME?.trim();
+  const base = xdg && xdg.length > 0 ? xdg : join(homedir(), ".config");
+  return join(base, "yorz");
+}
+function resolveGlobalConfigPath(env = process.env) {
+  return join(resolveGlobalConfigDir(env), "projects.json");
+}
+function resolveGlobalSkillsDir(env = process.env) {
+  return join(resolveGlobalConfigDir(env), "skills");
+}
+function resolveSkillEntry(skillName, env = process.env) {
+  return join(resolveGlobalSkillsDir(env), skillName, "SKILL.md");
+}
+async function loadGlobalConfig(filePath) {
+  const fp = filePath ?? resolveGlobalConfigPath();
+  if (!existsSync(fp)) return defaultGlobalConfig();
+  let raw;
+  try {
+    raw = await readFile(fp, "utf8");
+  } catch {
+    return defaultGlobalConfig();
   }
-};
-const opencodeAdapter = {
-  name: "opencode",
-  resolveSkillsDir(scope, ctx) {
-    if (scope === "user") return join(ctx.home, ".config", "opencode", "skills");
-    return join(ctx.cwd, ".opencode", "skills");
+  if (!raw.trim()) return defaultGlobalConfig();
+  let parsed;
+  try {
+    parsed = JSON.parse(raw);
+  } catch {
+    return defaultGlobalConfig();
   }
-};
-const ADAPTERS = {
-  claude: claudeAdapter,
-  opencode: opencodeAdapter,
-  codex: codexAdapter
-};
-function getAdapter(name2) {
-  if (name2 in ADAPTERS) return ADAPTERS[name2];
-  throw new Error(`Unknown agent: ${name2}. Supported: ${Object.keys(ADAPTERS).join(", ")}`);
+  return normalizeConfig$1(parsed);
+}
+async function saveGlobalConfig(config, filePath) {
+  const fp = filePath ?? resolveGlobalConfigPath();
+  await mkdir(dirname(fp), { recursive: true });
+  const normalized = normalizeConfig$1(config);
+  const body = `${JSON.stringify(normalized, null, 2)}
+`;
+  const tmp = `${fp}.tmp-${process.pid}-${Date.now().toString(36)}`;
+  await writeFile(tmp, body, "utf8");
+  await rename(tmp, fp);
+}
+function normalizeConfig$1(value) {
+  if (!value || typeof value !== "object") return defaultGlobalConfig();
+  const obj = value;
+  const projectsRaw = Array.isArray(obj.projects) ? obj.projects : [];
+  const projects = [];
+  for (const item of projectsRaw) {
+    if (!item || typeof item !== "object") continue;
+    const it = item;
+    const id = typeof it.id === "string" ? it.id : "";
+    const path = typeof it.path === "string" ? it.path : "";
+    if (!id || !path) continue;
+    const addedAt = typeof it.addedAt === "string" ? it.addedAt : "";
+    const lastActivityAt = typeof it.lastActivityAt === "string" ? it.lastActivityAt : null;
+    const worktree = normalizeWorktree(it.worktree);
+    const entry = { id, path, addedAt, lastActivityAt };
+    if (worktree) entry.worktree = worktree;
+    projects.push(entry);
+  }
+  return {
+    version: CURRENT_VERSION$1,
+    projects,
+    agent: normalizeAgent$1(obj.agent),
+    notifications: normalizeNotifications(obj.notifications),
+    shortcuts: normalizeShortcuts(obj.shortcuts)
+  };
+}
+function defaultGlobalConfig() {
+  return {
+    version: CURRENT_VERSION$1,
+    projects: [],
+    agent: { defaultKind: DEFAULT_GLOBAL_AGENT.defaultKind },
+    notifications: {
+      sessionEnd: {
+        banner: DEFAULT_NOTIFICATIONS.sessionEnd.banner,
+        sound: DEFAULT_NOTIFICATIONS.sessionEnd.sound
+      }
+    },
+    shortcuts: {}
+  };
+}
+function normalizeAgent$1(value) {
+  if (!value || typeof value !== "object") return { defaultKind: DEFAULT_GLOBAL_AGENT.defaultKind };
+  const obj = value;
+  const defaultKind = obj.defaultKind;
+  if (defaultKind === "opencode" || defaultKind === "codex") return { defaultKind };
+  return { defaultKind: "claude" };
+}
+function normalizeNotifications(value) {
+  if (!value || typeof value !== "object") return defaultGlobalConfig().notifications;
+  const obj = value;
+  const sessionEndRaw = obj.sessionEnd;
+  if (!sessionEndRaw || typeof sessionEndRaw !== "object")
+    return defaultGlobalConfig().notifications;
+  const sessionEndObj = sessionEndRaw;
+  return {
+    sessionEnd: {
+      banner: typeof sessionEndObj.banner === "boolean" ? sessionEndObj.banner : DEFAULT_NOTIFICATIONS.sessionEnd.banner,
+      sound: typeof sessionEndObj.sound === "boolean" ? sessionEndObj.sound : DEFAULT_NOTIFICATIONS.sessionEnd.sound
+    }
+  };
+}
+function normalizeShortcuts(value) {
+  if (!value || typeof value !== "object") return {};
+  const obj = value;
+  const shortcuts = {};
+  for (const action of SHORTCUT_ACTION_IDS) {
+    const raw = obj[action];
+    if (raw === null) {
+      shortcuts[action] = null;
+      continue;
+    }
+    if (typeof raw !== "string") continue;
+    const normalized = normalizeShortcutBinding(raw);
+    if (normalized) shortcuts[action] = normalized;
+  }
+  return shortcuts;
+}
+function normalizeShortcutBinding(value) {
+  const parts = value.split("+").map((part) => part.trim()).filter(Boolean);
+  let key = "";
+  let ctrl = false;
+  let shift = false;
+  let alt = false;
+  let meta = false;
+  for (const part of parts) {
+    const lower = part.toLowerCase();
+    if (lower === "ctrl" || lower === "control") ctrl = true;
+    else if (lower === "shift") shift = true;
+    else if (lower === "alt" || lower === "option") alt = true;
+    else if (lower === "meta" || lower === "cmd" || lower === "command") meta = true;
+    else key = normalizeShortcutKey(part);
+  }
+  if (!key) return null;
+  const out = [];
+  if (ctrl) out.push("Ctrl");
+  if (shift) out.push("Shift");
+  if (alt) out.push("Alt");
+  if (meta) out.push("Meta");
+  out.push(key);
+  return out.join("+");
+}
+function normalizeShortcutKey(key) {
+  if (key.length === 1) return key.toUpperCase();
+  if (key === " ") return "Space";
+  if (key.startsWith("Arrow")) return key;
+  return key.slice(0, 1).toUpperCase() + key.slice(1);
+}
+function normalizeWorktree(value) {
+  if (!value || typeof value !== "object") return void 0;
+  const it = value;
+  const mainProjectId = typeof it.mainProjectId === "string" ? it.mainProjectId : "";
+  const mainPath = typeof it.mainPath === "string" ? it.mainPath : "";
+  const branch = typeof it.branch === "string" ? it.branch : "";
+  const specId = typeof it.specId === "string" ? it.specId : "";
+  const createdAt = typeof it.createdAt === "string" ? it.createdAt : "";
+  if (!mainProjectId || !mainPath || !branch) return void 0;
+  const cleanSlug = typeof it.cleanSlug === "string" ? it.cleanSlug : void 0;
+  const meta = { mainProjectId, mainPath, branch, specId, createdAt };
+  if (cleanSlug) meta.cleanSlug = cleanSlug;
+  return meta;
+}
+function generateProjectId(absPath) {
+  const base = basename$1(absPath);
+  const slug = slugify(base) || "proj";
+  const hash = createHash("sha256").update(absPath).digest("hex").slice(0, 6);
+  return `${slug}-${hash}`;
+}
+function slugify(text) {
+  return text.toLowerCase().replace(/[^a-z0-9-]+/g, "-").replace(/^-+|-+$/g, "").slice(0, 40).replace(/-+$/, "");
+}
+async function addProject(absPath, filePath, now = () => /* @__PURE__ */ new Date()) {
+  const config = await loadGlobalConfig(filePath);
+  const existing = config.projects.find((p) => p.path === absPath);
+  if (existing) return { entry: existing, created: false };
+  const entry = {
+    id: generateProjectId(absPath),
+    path: absPath,
+    addedAt: now().toISOString(),
+    lastActivityAt: null
+  };
+  config.projects.push(entry);
+  await saveGlobalConfig(config, filePath);
+  return { entry, created: true };
+}
+async function setProjectWorktree(id, worktree, filePath) {
+  const config = await loadGlobalConfig(filePath);
+  const target = config.projects.find((p) => p.id === id);
+  if (!target) return false;
+  if (worktree) target.worktree = worktree;
+  else delete target.worktree;
+  await saveGlobalConfig(config, filePath);
+  return true;
+}
+async function removeProject(id, filePath) {
+  const config = await loadGlobalConfig(filePath);
+  const before = config.projects.length;
+  config.projects = config.projects.filter((p) => p.id !== id);
+  if (config.projects.length === before) return false;
+  await saveGlobalConfig(config, filePath);
+  return true;
+}
+async function prepareProjectDir(input, cwd) {
+  if (typeof input !== "string" || !input.trim()) {
+    throw new Error("path required");
+  }
+  const trimmed = input.trim();
+  const abs = isAbsolute(trimmed) ? resolve(trimmed) : resolve(cwd ?? process.cwd(), trimmed);
+  if (!existsSync(abs)) {
+    throw new Error(`path does not exist: ${abs}`);
+  }
+  const stats = await stat(abs);
+  if (!stats.isDirectory()) {
+    throw new Error(`path is not a directory: ${abs}`);
+  }
+  await mkdir(join(abs, ".yorz", "specs"), { recursive: true });
+  return abs;
 }
 const __vite_glob_0_0 = '---\nname: yorz-debug\ndescription: 以资深工程师的调试纪律定位并修复疑难 bug——假设→取证→验证的证据闭环，靠 debug.md 活文档与 git 快照兜住污染。\n---\n\n# YorZ Debug 深度调试 Skill\n\n指导 Agent 以**资深工程师的调试纪律**逐步逼近疑难 bug 的根因：不凭猜测改代码，坚持「假设 → 取证 → 验证 → 缩小范围 → 再假设」的证据闭环。调试过程赋予更大的自由度（临时改代码、Mock 数据、加日志、建临时验证入口），同时用 `debug.md` 活文档 + `git stash create` 快照兜住"污染性改动不进入最终提交"。\n\n> 本 skill **不复用** yorz-spec 的 plan/tasks/execute 状态机。真相以 `debug.md` 为单一载体；Agent 持续推进直至需要用户回传证据（人在环路），或根因确认并收尾。\n\n## 何时进入本 skill\n\n- **独立触发（无需 spec / UI）**：用户在 Agent 对话中直接点名「用 yorz-debug 调这个 bug」。此时可能没有任何 spec 上下文——按下方「无 spec 场景」处理 `debug.md` 落点。\n- **追加任务勾选 Debug**：用户在 SpecDetail 追加 `fix` 任务时勾选「Debug 模式」，后端 prompt 指向本 skill。\n- **重入**：spec 目录已存在 `status: debugging` 的 `debug.md`（有未收尾记录块），run/append 路由自动切到本 skill。此时**不新建记录块**，定位活跃记录块（frontmatter `active: NNN`）续跑。\n\n## 输入约定\n\n- `spec_dir`（**可选**）：spec 目录路径（含 `spec.md`）。给出时 `debug.md` 建在此目录，与 `spec.md` 同级。\n- 待调试 bug 的描述：来自追加任务行 / 用户 prompt。\n- 运行服务上下文（**可选**）：由 YorZ Service 注入的当前项目运行中命令服务列表，包含 `runId`、`name`、`cli`、`pid`、`startedAt`、`logFile` 等字段。\n\n### debug.md 落点\n\n- **有 spec 上下文**：`debug.md` 落 `spec_dir`（与 `spec.md` 同级）。\n- **无 spec 场景（独立触发）**：没有 `spec_dir` 时，Debug 活文档必须落在项目临时目录 `.yorz/tmp/debug/`，文件名必须携带本地秒级时间信息，格式为 `debug-YYYYMMDD-HHmmss.md`；若 YorZ Service prompt 已给出具体文件路径，则以该路径为准。其余多记录模型、快照、脚手架、收尾流程与有 spec 时**完全一致**。\n\n## debug.md：多记录活文档\n\n**一个 `debug.md` 承载同一 spec 生命周期内的多次调试**（某次收尾后又发现新 bug，就追加下一条记录，不覆盖历史）。它同时是：调试活文档、**Debug 模式的持久化标记**（存在未收尾记录 = 处于 Debug 模式）、脚手架是否清理干净的守卫。\n\n### 文件级 frontmatter\n\n```yaml\n---\nstatus: debugging # debugging（存在未收尾记录）| resolved（全部记录已收尾）\nactive: 2 # 当前活跃记录编号；resolved 时留空\nupdated_at: \'2026-07-19 15:54:37\' # 本地秒级字符串\n---\n```\n\n### 正文按「记录块」组织\n\n每次进入 Debug **在文末追加**一个记录块，编号 `NNN` 从 1 递增、**不复用**、不覆盖既有块：\n\n```markdown\n## Debug 1 · <bug 一句话简述>\n\n- 状态：debugging # debugging | resolved\n- 快照：<git stash create 得到的 SHA>\n- 进入时间：\'2026-07-19 15:54:37\'\n\n### 1.1 Bug 现象与复现\n\n...\n\n### 1.2 关联链路分析\n\n...\n\n### 1.3 Debug 基线\n\n快照 SHA + 进入时间；`git diff <SHA>` 为退出闸门基准。\n\n### 1.4 假设看板\n\n...\n\n### 1.5 证据\n\n...\n\n### 1.6 脚手架清单\n\n...\n\n### 1.7 收尾核对\n\n...\n```\n\n### 生命周期\n\n- **创建 / 进入**：`debug.md` 不存在则创建（写文件 frontmatter + 第 1 个记录块）；已存在则追加 `## Debug <max+1>`，置文件 `status: debugging`、`active: <新编号>`。进入后**立刻**打快照（见「污染防线」）。\n- **单块收尾**：把该记录块块头 `状态` 置 `resolved`，脚手架逐条核销，`git diff <SNAP>` 校验只剩合法修复。\n- **文件 status 收敛**：单块收尾后，若**所有**记录块均 `resolved`，置文件 `status: resolved`、清空 `active`；否则保持 `debugging` 且 `active` 指向仍在调试的块。\n- **归档**：收尾**保留** `debug.md` 供复盘，绝不删除。\n\n## 核心调试循环\n\n**分析 → 规划 → 假设 → 实施 → 验证 → 缩小范围 → 再假设**，直至根因被硬证据锁定。\n\n```mermaid\nflowchart TD\n    Start["接手 bug"] --> Repro{"能稳定复现?"}\n    Repro -->|否| GetRepro["补齐复现步骤<br/>（问用户 / 自行构造）"]\n    GetRepro --> Repro\n    Repro -->|是| Analyze["分析关联链路<br/>写入 debug.md"]\n    Analyze --> Hypo["提出可证伪假设<br/>成立看到 X / 不成立看到 Y"]\n    Hypo --> Probe["写验证性代码 / 加日志<br/>登记脚手架清单"]\n    Probe --> Eval{"证据指向?"}\n    Eval -->|证伪| Exclude["记入已排除假设 + 依据"]\n    Exclude --> Narrow["缩小范围（二分/控制变量）"]\n    Narrow --> Hypo\n    Eval -->|坐实根因| Fix["写最终修复"]\n    Fix --> Verify{"重跑复现步骤<br/>问题消失?"}\n    Verify -->|否| Hypo\n    Verify -->|是| Close["进入收尾"]\n```\n\n### 方法层\n\n- **二分法**：在可疑区间（提交历史 / 代码路径 / 数据范围）二分定位，每次砍掉一半。\n- **控制变量法**：一次只改一个变量，隔离单一因素的影响。\n- **遍历可能分支**：对有限的分支/枚举/状态逐一验证，排除法收敛。\n\n## 硬约束（资深工程师容易做、Agent 容易漏）\n\n1. **先复现，再调试**：无法稳定复现，**不得进入修改阶段**——否则无从验证修没修好。复现不了就先构造复现路径或请用户提供。\n2. **假设必须可证伪**：提出假设时，同时写出"若成立会看到 X，若不成立会看到 Y"，再去取证。写进「假设看板」。\n3. **记录已排除假设 + 依据**：每否定一个假设，连同证据写入看板，**避免兜圈子反复验证同一已否定项**。\n4. **禁止无证据修复**：拿到指向根因的**硬证据**（日志 / 截图 / 可复现的最小用例）前，**只许写验证性代码，不许写最终修复**。\n5. **人机协作**：优先主动复现 Bug、获取日志进行分析判断，如果无途径复现 Bug、获取日志，也可暂停执行，让用户配合复现 Bug、回传日志。\n6. **退出双条件**：根因有硬证据 **且** 修复后重跑复现步骤、证据显示问题消失——**缺一不可**。\n\n### 日志纪律\n\n- **可读可复制**：打印结构化字符串而非整个 object（如 拼接关键字段 k1=v1&k2=v2 或 `JSON.stringify(x)`），避免直接打印对象或复杂结构变量的引用。\n- **避免刷屏**：不要在循环/高频路径里打印大量日志；聚焦怀疑环节，必要时带唯一标记便于检索。\n- **可定位**：日志带上下文（哪个函数 / 哪个分支 / 关键变量值），便于判定假设成立与否。\n\n## 更大的自由度（Debug 模式内允许）\n\n- 编写临时代码（条件短路）或注释有意义代码，控制程序进入 / 屏蔽特定分支；\n- 临时篡改变量值、Mock API 返回，让程序走到特定分支；\n- 编写临时独立测试页面 / 入口，简化复现路径、直接验证怀疑环节；\n- 联网查询第三方 SDK 文档、向用户询问必要信息；\n- 允许 lint / typecheck / build / 单测出现错误，允许**临时**跳过这些检查。\n\n> 每一处临时改动都**必须**在「脚手架清单」登记一行（文件 + 位置 + 类型：短路 / Mock / 注释 / 临时页面 / 临时日志），收尾逐条核销。**未登记 = 会漏还原**。\n\n## 污染防线（强制流程）\n\n在**当前项目与分支就地调试**，不开 worktree；靠快照 + 脚手架清单 + diff 兜住污染。\n\n```mermaid\nflowchart TD\n    Enter["进入 Debug（新记录块）"] --> Snap["SNAP = git stash create<br/>零副作用快照当前脏工作区"]\n    Snap --> Record["把 SNAP 写入记录块 · Debug 基线"]\n    Record --> Loop["调试循环<br/>照常改代码 + 登记脚手架清单"]\n    Loop --> Fixed{"根因确认 + 硬证据?"}\n    Fixed -->|否| Loop\n    Fixed -->|是| Revert["按脚手架清单逐条还原"]\n    Revert --> Diff["git diff SNAP"]\n    Diff --> Gate{"仅剩合法修复?"}\n    Gate -->|否| Revert\n    Gate -->|是| Done["置本块 status: resolved<br/>跑变更文件单测/build/typecheck"]\n```\n\n- **进入即打快照**：`git stash create`（**不是** `git stash` / 临时 commit）生成一个记录当前脏工作区的 commit 对象，但**不动工作区 / index / HEAD**。它天然区分"进入前的既有未提交改动"与"调试引入的改动"，避免临时 commit 的还原风险。把返回的 SHA 写入记录块「Debug 基线」。\n  - 若 `git stash create` 无输出（工作区干净），以当前 `HEAD`（`git rev-parse HEAD`）作为快照基准并注明。\n- **git diff 是退出闸门**：宣告完成前，`git diff <SNAP>` 必须**只剩合法修复**——所有短路 / Mock / 注释 / 临时页面 / 临时日志都已还原。diff 里还有脚手架残留 = 不许收尾。\n\n## 收尾（退出 Debug 模式）\n\n根因确认且修复通过复现验证后：\n\n1. **还原脚手架**：按「脚手架清单」逐条还原临时代码与被注释代码，确保原有逻辑正确；清理不需要的 debug 日志。\n2. **退出闸门**：`git diff <SNAP>` 只剩合法修复（脚手架清单全部核销）。\n3. **常规完整性检查**：跑变更文件关联单测、构建、类型检查。\n4. **落状态**：把该记录块块头 `状态` 置 `resolved`；按「文件 status 收敛」更新文件 frontmatter（全部 resolved → 文件 `status: resolved`、清空 `active`）。\n5. **保留归档**：`debug.md` 保留，供复盘。\n\n> 收尾后如又发现**新** bug，回到本 skill 追加下一条 `## Debug NNN` 记录块（不覆盖历史），重新走一遍循环。\n\n## 写回纪律\n\n- 每次写回 `debug.md` 都更新文件 frontmatter 的 `updated_at`。\n- `updated_at` 用本地秒级 `YYYY-MM-DD HH:mm:ss` 字符串。\n- 记录块编号连续递增、不复用、不重排既有块。\n';
 const __vite_glob_0_1 = '{\n  "$schema": "https://json-schema.org/draft-07/schema#",\n  "version": 2,\n  "modules": [\n    {\n      "module": "SKILL",\n      "file": "SKILL.md",\n      "relatedCases": []\n    }\n  ]\n}\n';
-const __vite_glob_0_2 = '---\nname: yorz-spec\ndescription: Drive YorZ spec docs through plan / tasks / execute stages with deterministic state updates.\n---\n\n# YorZ Spec Drive Skill\n\n将单个 YorZ spec 文档作为状态机执行，围绕 `plan` / `tasks` / `execute` 三阶段推进，全部任务完成后进入终止态 `done`，把状态持续写回文档。md 是单一真相；Agent 持续推进直至阻塞（待确认项、决策、Review）或收尾为 `done` 才退出。\n\n## 如何使用本 skill\n\n本 skill 文档结构精简为 3 个文件；每次接到 spec 任务时，**按以下顺序**按需 Read：\n\n1. **本文档（SKILL.md）**：输入约定、frontmatter 规范、格式约定、自动模式判定、全局硬约束、lint 硬约束、持续推进约束。\n2. **[stages.md](./stages.md)**：plan / tasks / execute / new-spec 四阶段流程与正面示例。\n3. **[review.md](./review.md)**：Review / Git Ops 阶段（独立路径，低频使用）。\n\n[mermaid.md](./mermaid.md) 与 `references/` 目录**仅按需 Read**：只有在判断当前阶段需要输出 mermaid 图表「升维」时才加载，纯状态推进任务不必读取，以节省 context。**plan 阶段的「图形化补充」收尾子步骤**（见 stages.md）会针对 `现状分析`/`技术方案` 两节强制加载 mermaid.md 补图；补图须遵循其核心原则**「图优先、精确信息折叠」**——表层给图，精确细节折叠进 `<details>` 精确层。\n\n> 当 Agent 以 `mode=review` / `mode=git-ops` 启动时，按 [review.md](./review.md) 执行；该路径不进入 plan/tasks/execute 状态机，也不修改 spec.md 的 frontmatter。\n\n## 输入约定\n\n- `spec_path`：**可选**，目标 spec 文档路径。\n  - 显式给出时：典型位置 `docs/specs/*.md` 或 `.yorz/specs/<id>/spec.md`，直接更新该 spec。\n  - 缺省时按以下顺序解析：\n    1. **从 session 上下文恢复**：扫描当前会话历史中已出现/已读写过的 spec 文档路径；存在多个时优先选取最近一次被读写的；若仍有歧义，向用户确认。\n    2. **从当前 prompt 创建**：若上下文中没有任何 spec 文档，按 [新建 spec 流程](./stages.md#new-spec) 生成路径与骨架。\n- spec 目录默认为 `.yorz/specs`，可由 `<ProjectRoot>/.yorz/config.json` 的 `specsDir` 字段覆盖。\n- `mode`：可选，`plan|tasks|execute|auto`，默认 `auto`。\n- 批注前缀：`！！！`\n\n## frontmatter 规范\n\n每个 spec md 顶部必须有 YAML frontmatter：\n\n```yaml\n---\nstage: plan # plan | tasks | execute | done\nlast_action: 简述上一次动作\nupdated_at: \'2026-06-14 15:42:07\' # 本地秒级字符串\nsummary: 一句话概要，≤ 200 字符\n---\n```\n\n- 字段顺序固定为 `stage` → `last_action` → `updated_at` → `summary`，每个字段独占一行，禁止嵌套与额外字段。\n- `updated_at` 使用本地秒级 `YYYY-MM-DD HH:mm:ss` 字符串。\n- 缺失任意字段时，先补齐再继续。\n\n## Markdown 格式化约定\n\n- 每次写回 spec md 后，**应在仓库支持的条件下运行 Markdown formatter**（优先 `npx prettier --write <spec_path>`）；未配置则跳过。\n- formatter 必须保留 YAML frontmatter 不变。\n- 任务清单仅使用单层 `- [ ]` / `- [x]`，避免缩进与嵌套。\n- 二、三级标题必须带层级编号，便于外部按章节号定位：\n  - 每次写回前按 body 中 `## ` / `### ` 出现顺序重新编号。\n  - 二级标题 `## N. 标题`（N 从 1 起）；三级标题 `### N.M 标题`（M 在所属二级下从 1 起）。\n  - 该规则不影响 frontmatter 与一级标题（`# `）。\n\n## 自动模式判定顺序（严格按顺序）\n\n`mode=auto` 时，**严格按顺序**判定，命中即停：\n\n1. 若 `spec_path` 缺省：从 session 上下文恢复 spec 路径；恢复失败进入 [新建 spec 流程](./stages.md#new-spec) 并以 `plan` 起步。\n2. **优先扫描 `## 追加任务` 中是否存在 `[open]` 条目**：存在即视为"新输入"信号，进入 `plan`（重开流程）。\n3. 若识别到新增/扩展需求或新增 bug，进入 `plan`（重开流程）。\n4. 若文档存在任意 `！！！` 批注，进入 [tasks](./stages.md#tasks)。\n5. 若 `## 待确认项` 下存在有效条目（非空态 `_暂无_`），停止推进并等待人工批注。\n6. 若 `stage` 已是 `done` 且上述 1–5 均未命中（无新输入/批注/待确认项），直接停止：终止态不再自动推进。\n7. 若存在未完成的**非 `[manual]`** 任务（`- [ ]` 且非 `- [ ] [manual]`），进入 [execute](./stages.md#execute)。\n8. 若任务清单已就绪且不存在未完成的非 manual 任务（走到此处已排除 `[open]`/新需求/批注/待确认项）：将 `stage` 置为 `done` 并停止推进（终止态）。\n9. 若 `## 技术实现方案` 为空或明显不完整，进入 [plan](./stages.md#plan)。\n10. 进入 [tasks](./stages.md#tasks) 生成或刷新详细任务清单。\n\n> 章节名 `## 待确认项` 为新名，parser/lint 兼容旧名 `## 待确认问题`；存量 spec 保留旧名仍可识别，新建/重写一律用 `待确认项`。\n>\n> 待确认项判定：章节内存在任一 `### ` 三级标题即视为未决；仅有 `_暂无_` 或整章为空即视为无未决条目；存在未决条目时禁止进入 execute。\n>\n> `done` 判定忽略 `- [ ] [manual]` 人工确认项：即使 manual 项仍未勾选，只要其余任务全部完成、且无待确认项/批注/`[open]`，即可收尾为 `done`。\n\n## 全局硬约束\n\n### 通用\n\n- 仅更新目标 spec 文档，不修改无关文档。\n- 每次写回文档都必须更新 frontmatter 元信息。\n- 执行任务时若涉及代码改动，只改动与任务相关的最小范围。\n\n### 章节建议\n\n初始化 spec 时**建议**创建以下章节（`## 追加任务` `## 用户批注` 为可选，由用户触发追加时懒插入）：\n\n- `## 现状分析` / `## 技术实现方案` / `## 待确认项` / `## 任务清单` / `## 执行记录`\n\n> lint 不再强制校验章节齐全；但 routing 按章节名查找时，章节不存在视为空态。\n\n### 变更重开流程\n\n**触发条件：**\n\n- 在已有 spec 中识别到"新增/扩展需求"或"新增 bug"，将 `stage` 切回 `plan`，`last_action` 记录"变更重开流程"。\n- `## 追加任务` 存在 `- [open] [feat|refct|fix] ...` 条目时，将 `stage` 切回 `plan`。\n\n**重开后必须做的事：**\n\n- 仅针对新增内容重新走完 `plan → tasks → execute`。\n- 未受影响的既有结论/任务可保留，受影响任务必须重新评估。\n- plan 阶段消费追加任务条目时，**不修改** `[open]` 状态标记。\n\n## 输出优先级\n\n1. 先保证状态正确（frontmatter 元信息更新）。\n2. 再保证结构正确（列表格式、任务格式、候选项）。\n3. 最后保证内容质量（可执行、可验收、可追踪）。\n\n## 写回后的 lint 硬约束\n\n任何阶段完成对 `spec.md` / `review.md` 的写入后，Agent **必须**通过 Bash 运行 `yorz lint <path> --format json`，并 parse stdout。\n\n- `errorCount === 0` 时视为通过。\n- 存在 `severity: error` 时按 `ruleId` + `message` + `line` 定位并修改，然后重新运行 lint。\n- 同一文件 lint 连续失败达到 **3 次**，将偏差作为 `## 待确认项` 条目写入 spec.md 后退出，等待人工干预。\n- `warn` 级 finding 不阻断推进，但应尽力消除。\n\n## 持续推进硬约束\n\nAgent 在 plan / tasks / execute 任意阶段，**只允许**因以下"合法阻塞"退出当轮：\n\n1. `## 待确认项` 章节存在非 `暂无` 条目；\n2. spec md 内存在任何 `！！！` 批注；\n3. 识别到新增/扩展需求或新增 bug，按变更重开流程切回 `plan`；\n4. 执行外部命令 / 工具调用失败，需要用户做不可推断的决断。\n\n**显式禁止**以下"元确认"行为：\n\n- 以"任务很多 / 改动较大 / 范围广 / 时间长 / 风险高"为由询问"是否继续 / 是否执行 / 是否同意此方案"。\n- 在 execute 阶段中段汇报进度并要求用户确认下一步。\n- 反问类如"要不要我开始 / 是否继续下一项"等问句。\n\n替代约定：tasks/execute 阶段若产生新疑问，**必须**作为新条目写回 `## 待确认项` 并按变更重开流程退出。\n\n兜底：对外部世界有副作用、不可逆的命令（如 `git push`、`git reset --hard`、`rm -rf`、修改 CI 配置等破坏性操作）仍按系统默认安全准则处理。\n\n## 与 YorZ 工作流的关联\n\n- 本 skill 不依赖 YorZ Service / GUI 也能独立工作：Agent 直接读写 `spec_path` 即可。\n- 当 YorZ Service 在线时，Agent 写回 md 会被 Service 的 FS Watcher 感知并推送给 GUI。\n- 如需用户介入，Agent 把信息写回文档对应章节后立即退出，由用户人工补齐 `！！！` 批注，再由 CLI / Service 重新拉起 Agent 继续执行。\n';
-const __vite_glob_0_3 = "---\nstage: execute\nlast_action: 主任务完成，追加 1 项 [open] 待处理\nupdated_at: 2026-06-20\nsummary: HELLO.txt 已经创建；追加任务：在 HELLO.txt 末尾追加一行 `goodbye world\\n`。\n---\n\n# HELLO 占位\n\n## 1. 背景\n\n希望仓库根有占位文件，便于演示。\n\n## 2. 需求\n\n- 在仓库根创建 `HELLO.txt`，内容 `hello world\\n`\n\n## 3. 现状分析\n\n`HELLO.txt` 已经存在，内容 `hello world\\n`。\n\n## 4. 技术实现方案\n\n- 直接写入 `HELLO.txt`，内容 `hello world\\n`。\n\n## 5. 待确认问题\n\n- 暂无\n\n## 6. 任务清单\n\n- [x] 在仓库根新建 `HELLO.txt`，内容 `hello world\\n`，验收点：文件存在且字节数 = 12。\n\n## 7. 追加任务\n\n- [open] 在 `HELLO.txt` 末尾追加一行 `goodbye world\\n`，验收点：最终文件含 2 行、共 26 字节。\n\n## 8. 执行记录\n\n- 2026-06-20 创建 `HELLO.txt`，内容 `hello world\\n`。\n";
-const __vite_glob_0_4 = '{\n  "module": "execute"\n}\n';
-const __vite_glob_0_5 = "---\nstage: execute\nlast_action: 任务已就绪，等待执行\nupdated_at: 2026-06-20\nsummary: 在仓库根新增 HELLO.txt 占位文件，内容为 hello world。\n---\n\n# HELLO 占位\n\n## 1. 背景\n\n希望在仓库根有一个 HELLO.txt 占位文件，用于演示 execute 阶段的勾选行为。\n\n## 2. 需求\n\n- 在仓库根创建 `HELLO.txt`，内容固定为 `hello world\\n`\n\n## 3. 现状分析\n\n仓库根目前没有 `HELLO.txt`，需新建。\n\n## 4. 技术实现方案\n\n- 直接写入 `HELLO.txt`，内容 `hello world\\n`，无 BOM、无尾随空行。\n\n## 5. 待确认问题\n\n- 暂无\n\n## 6. 任务清单\n\n- [ ] 在仓库根新建 `HELLO.txt`，内容为 `hello world\\n`，验收点：文件存在且内容字节数 = 12。\n\n## 7. 追加任务\n\n- 暂无\n\n## 8. 执行记录\n\n- 暂无\n";
+const __vite_glob_0_2 = '---\nname: yorz-git-ops\ndescription: Execute YorZ Review page git operations with focused safety rules.\n---\n\n# YorZ Git Ops Skill\n\n本 skill 描述 service 端拉起 git 操作（带 `action`）时，Agent 应遵守的输入解析与 git 安全约束。**这条路径不进入 yorz-spec 的 plan/tasks/execute 状态机**，亦不修改 spec.md 的 frontmatter `stage`。\n\n## 输入\n\n- spec 文档路径（`<spec_path>`）。\n- spec-id。\n- 当前 git 仓库的未提交变更（`git status -sb` / `git diff` / `git diff --staged`）。\n- action：`commit` / `discard` / `stash`。\n\n## action=commit\n\n- 由 Agent 基于 spec 文档与当前 git 状态，自主决定本次要提交的 spec 相关变更文件清单。\n- commit message 由 Agent 基于本次变更语义自行生成；不附加 `[spec:<id>]` 锚点，不带 scope（遵循 `260630.refct.review-commit-msg-remove-scope`）。\n- 仅允许使用 `git add <paths>` + `git commit -m <message>`；**禁止** `git push` / `git reset --hard` / `git rebase` / 修改任何已提交历史。\n\n## action=discard\n\n- 使用 `git restore --staged --worktree -- <paths>` 丢弃已 tracked 的修改；untracked 新文件使用 `git clean -fd -- <paths>` 清理。\n- 对 untracked 文件先在终端输出待清理列表，再执行 clean，便于日志回溯。\n- **不**预先 `git stash` 作为“保险备份”（遵循用户显式意图，保持轻量）。\n- **禁止** `git reset --hard`、`git push`。\n\n## action=stash\n\n- 使用 `git stash push -m "yorz:<spec-id>" -- <paths>`，仅暂存 spec 相关变更文件。\n- 不要使用 `git stash --all` 之类会影响 untracked / ignored 文件的形式，除非明确需要。\n- **禁止** `git push`。\n\n## 通用硬约束\n\n- 仅操作 `<spec_path>` 与 git 工作区文件；不修改无关 spec、不修改本 skill 文件。\n- 任一 git 子命令失败时，把错误信息写入终端日志（service 端会落盘到 agent-logs），不要静默吞掉。\n- 元确认禁令：不向用户回问“是否继续 / 是否执行”等问题（GUI 已在按钮触发前做过必要的二次确认）。若无法安全判断文件范围或命令失败且无法自行恢复，应停止并把原因写入终端日志。\n';
+const __vite_glob_0_3 = '{\n  "$schema": "https://json-schema.org/draft-07/schema#",\n  "version": 2,\n  "modules": [\n    {\n      "module": "SKILL",\n      "file": "SKILL.md",\n      "relatedCases": []\n    }\n  ]\n}\n';
+const __vite_glob_0_4 = '---\nname: yorz-spec\ndescription: Drive YorZ spec docs through plan / tasks / execute stages with deterministic state updates.\n---\n\n# YorZ Spec Drive Skill\n\n将单个 YorZ spec 文档作为状态机执行，围绕 `plan` / `tasks` / `execute` 三阶段推进，全部任务完成后进入终止态 `done`，把状态持续写回文档。md 是单一真相；Agent 持续推进直至阻塞（待确认项、决策或执行失败）或收尾为 `done` 才退出。\n\n## 如何使用本 skill\n\n本 skill 文档结构精简为 2 个核心文件；每次接到 spec 任务时，**按以下顺序**按需 Read：\n\n1. **本文档（SKILL.md）**：输入约定、frontmatter 规范、格式约定、自动模式判定、全局硬约束、lint 硬约束、持续推进约束。\n2. **[stages.md](./stages.md)**：plan / tasks / execute / new-spec 四阶段流程与正面示例。\n\n[mermaid.md](./mermaid.md) 与 `references/` 目录**仅按需 Read**：只有在判断当前阶段需要输出 mermaid 图表「升维」时才加载，纯状态推进任务不必读取，以节省 context。**plan 阶段的「图形化补充」收尾子步骤**（见 stages.md）会针对 `现状分析`/`技术方案` 两节强制加载 mermaid.md 补图；补图须遵循其核心原则**「图优先、精确信息折叠」**——表层给图，精确细节折叠进 `<details>` 精确层。\n\n## 输入约定\n\n- `spec_path`：**可选**，目标 spec 文档路径。\n  - 显式给出时：典型位置 `docs/specs/*.md` 或 `.yorz/specs/<id>/spec.md`，直接更新该 spec。\n  - 缺省时按以下顺序解析：\n    1. **从 session 上下文恢复**：扫描当前会话历史中已出现/已读写过的 spec 文档路径；存在多个时优先选取最近一次被读写的；若仍有歧义，向用户确认。\n    2. **从当前 prompt 创建**：若上下文中没有任何 spec 文档，按 [新建 spec 流程](./stages.md#new-spec) 生成路径与骨架。\n- spec 目录默认为 `.yorz/specs`，可由 `<ProjectRoot>/.yorz/config.json` 的 `specsDir` 字段覆盖。\n- `mode`：可选，`plan|tasks|execute|auto`，默认 `auto`。\n- 批注前缀：`！！！`\n\n## frontmatter 规范\n\n每个 spec md 顶部必须有 YAML frontmatter：\n\n```yaml\n---\nstage: plan # plan | tasks | execute | done\nlast_action: 简述上一次动作\nupdated_at: \'2026-06-14 15:42:07\' # 本地秒级字符串\nsummary: 一句话概要，≤ 200 字符\n---\n```\n\n- 字段顺序固定为 `stage` → `last_action` → `updated_at` → `summary`，每个字段独占一行，禁止嵌套与额外字段。\n- `updated_at` 使用本地秒级 `YYYY-MM-DD HH:mm:ss` 字符串。\n- 缺失任意字段时，先补齐再继续。\n\n## Markdown 格式化约定\n\n- 每次写回 spec md 后，**应在仓库支持的条件下运行 Markdown formatter**（优先 `npx prettier --write <spec_path>`）；未配置则跳过。\n- formatter 必须保留 YAML frontmatter 不变。\n- 任务清单仅使用单层 `- [ ]` / `- [x]`，避免缩进与嵌套。\n- 二、三级标题必须带层级编号，便于外部按章节号定位：\n  - 每次写回前按 body 中 `## ` / `### ` 出现顺序重新编号。\n  - 二级标题 `## N. 标题`（N 从 1 起）；三级标题 `### N.M 标题`（M 在所属二级下从 1 起）。\n  - 该规则不影响 frontmatter 与一级标题（`# `）。\n\n## 自动模式判定顺序（严格按顺序）\n\n`mode=auto` 时，**严格按顺序**判定，命中即停：\n\n1. 若 `spec_path` 缺省：从 session 上下文恢复 spec 路径；恢复失败进入 [新建 spec 流程](./stages.md#new-spec) 并以 `plan` 起步。\n2. **优先扫描 `## 追加任务` 中是否存在 `[open]` 条目**：存在即视为"新输入"信号，进入 `plan`（重开流程）。\n3. 若识别到新增/扩展需求或新增 bug，进入 `plan`（重开流程）。\n4. 若文档存在任意 `！！！` 批注，进入 [tasks](./stages.md#tasks)。\n5. 若 `## 待确认项` 下存在有效条目（非空态 `_暂无_`），停止推进并等待人工批注。\n6. 若 `stage` 已是 `done` 且上述 1–5 均未命中（无新输入/批注/待确认项），直接停止：终止态不再自动推进。\n7. 若存在未完成的**非 `[manual]`** 任务（`- [ ]` 且非 `- [ ] [manual]`），进入 [execute](./stages.md#execute)。\n8. 若任务清单已就绪且不存在未完成的非 manual 任务（走到此处已排除 `[open]`/新需求/批注/待确认项）：将 `stage` 置为 `done` 并停止推进（终止态）。\n9. 若 `## 技术实现方案` 为空或明显不完整，进入 [plan](./stages.md#plan)。\n10. 进入 [tasks](./stages.md#tasks) 生成或刷新详细任务清单。\n\n> 章节名 `## 待确认项` 为新名，parser/lint 兼容旧名 `## 待确认问题`；存量 spec 保留旧名仍可识别，新建/重写一律用 `待确认项`。\n>\n> 待确认项判定：章节内存在任一 `### ` 三级标题即视为未决；仅有 `_暂无_` 或整章为空即视为无未决条目；存在未决条目时禁止进入 execute。\n>\n> `done` 判定忽略 `- [ ] [manual]` 人工确认项：即使 manual 项仍未勾选，只要其余任务全部完成、且无待确认项/批注/`[open]`，即可收尾为 `done`。\n\n## 全局硬约束\n\n### 通用\n\n- 仅更新目标 spec 文档，不修改无关文档。\n- 每次写回文档都必须更新 frontmatter 元信息。\n- 执行任务时若涉及代码改动，只改动与任务相关的最小范围。\n\n### 章节建议\n\n初始化 spec 时**建议**创建以下章节（`## 追加任务` `## 用户批注` 为可选，由用户触发追加时懒插入）：\n\n- `## 现状分析` / `## 技术实现方案` / `## 待确认项` / `## 任务清单` / `## 执行记录`\n\n> lint 不再强制校验章节齐全；但 routing 按章节名查找时，章节不存在视为空态。\n\n### 变更重开流程\n\n**触发条件：**\n\n- 在已有 spec 中识别到"新增/扩展需求"或"新增 bug"，将 `stage` 切回 `plan`，`last_action` 记录"变更重开流程"。\n- `## 追加任务` 存在 `- [open] [feat|refct|fix] ...` 条目时，将 `stage` 切回 `plan`。\n\n**重开后必须做的事：**\n\n- 仅针对新增内容重新走完 `plan → tasks → execute`。\n- 未受影响的既有结论/任务可保留，受影响任务必须重新评估。\n- plan 阶段消费追加任务条目时，**不修改** `[open]` 状态标记。\n\n## 输出优先级\n\n1. 先保证状态正确（frontmatter 元信息更新）。\n2. 再保证结构正确（列表格式、任务格式、候选项）。\n3. 最后保证内容质量（可执行、可验收、可追踪）。\n\n## 写回后的 lint 硬约束\n\n任何阶段完成对 `spec.md` 的写入后，Agent **必须**通过 Bash 运行 `yorz lint <path> --format json`，并 parse stdout。\n\n- `errorCount === 0` 时视为通过。\n- 存在 `severity: error` 时按 `ruleId` + `message` + `line` 定位并修改，然后重新运行 lint。\n- 同一文件 lint 连续失败达到 **3 次**，将偏差作为 `## 待确认项` 条目写入 spec.md 后退出，等待人工干预。\n- `warn` 级 finding 不阻断推进，但应尽力消除。\n\n## 持续推进硬约束\n\nAgent 在 plan / tasks / execute 任意阶段，**只允许**因以下"合法阻塞"退出当轮：\n\n1. `## 待确认项` 章节存在非 `暂无` 条目；\n2. spec md 内存在任何 `！！！` 批注；\n3. 识别到新增/扩展需求或新增 bug，按变更重开流程切回 `plan`；\n4. 执行外部命令 / 工具调用失败，需要用户做不可推断的决断。\n\n**显式禁止**以下"元确认"行为：\n\n- 以"任务很多 / 改动较大 / 范围广 / 时间长 / 风险高"为由询问"是否继续 / 是否执行 / 是否同意此方案"。\n- 在 execute 阶段中段汇报进度并要求用户确认下一步。\n- 反问类如"要不要我开始 / 是否继续下一项"等问句。\n\n替代约定：tasks/execute 阶段若产生新疑问，**必须**作为新条目写回 `## 待确认项` 并按变更重开流程退出。\n\n兜底：对外部世界有副作用、不可逆的命令（如 `git push`、`git reset --hard`、`rm -rf`、修改 CI 配置等破坏性操作）仍按系统默认安全准则处理。\n\n## 与 YorZ 工作流的关联\n\n- 本 skill 不依赖 YorZ Service / GUI 也能独立工作：Agent 直接读写 `spec_path` 即可。\n- 当 YorZ Service 在线时，Agent 写回 md 会被 Service 的 FS Watcher 感知并推送给 GUI。\n- 如需用户介入，Agent 把信息写回文档对应章节后立即退出，由用户人工补齐 `！！！` 批注，再由 CLI / Service 重新拉起 Agent 继续执行。\n';
+const __vite_glob_0_5 = "---\nstage: execute\nlast_action: 主任务完成，追加 1 项 [open] 待处理\nupdated_at: 2026-06-20\nsummary: HELLO.txt 已经创建；追加任务：在 HELLO.txt 末尾追加一行 `goodbye world\\n`。\n---\n\n# HELLO 占位\n\n## 1. 背景\n\n希望仓库根有占位文件，便于演示。\n\n## 2. 需求\n\n- 在仓库根创建 `HELLO.txt`，内容 `hello world\\n`\n\n## 3. 现状分析\n\n`HELLO.txt` 已经存在，内容 `hello world\\n`。\n\n## 4. 技术实现方案\n\n- 直接写入 `HELLO.txt`，内容 `hello world\\n`。\n\n## 5. 待确认问题\n\n- 暂无\n\n## 6. 任务清单\n\n- [x] 在仓库根新建 `HELLO.txt`，内容 `hello world\\n`，验收点：文件存在且字节数 = 12。\n\n## 7. 追加任务\n\n- [open] 在 `HELLO.txt` 末尾追加一行 `goodbye world\\n`，验收点：最终文件含 2 行、共 26 字节。\n\n## 8. 执行记录\n\n- 2026-06-20 创建 `HELLO.txt`，内容 `hello world\\n`。\n";
 const __vite_glob_0_6 = '{\n  "module": "execute"\n}\n';
-const __vite_glob_0_7 = '{\n  "module": "new-spec",\n  "newSpec": true,\n  "prompt": "请使用 yorz-spec skill 新建 spec：给 GUI 加一个夜间模式开关，挂在 Settings 页面。"\n}\n';
-const __vite_glob_0_8 = "---\nstage: plan\nlast_action: 初始化\nupdated_at: 2026-06-20\nsummary: 给项目新增「最近访问」入口；需要决定挂载位置、数据来源、上限条数与清空策略。\n---\n\n# 最近访问入口\n\n## 1. 背景\n\n用户反馈每次打开应用都要在 spec 列表里翻找昨天碰过的几个 spec。希望首屏看到一个「最近访问」入口直接跳转。\n\n## 2. 需求\n\n- 新增「最近访问」入口，列出用户近期访问过的 spec\n- 需要决定：入口挂在导航哪一层？数据来自本地还是服务端？最多保留多少条？是否提供清空按钮？\n\n## 3. 现状分析\n\n当前 GUI 主导航只有两个 tab：`Specs`、`Settings`。没有任何位置承载「最近访问」类的快捷入口。Spec 列表本身按 mtime 排序，并不区分「访问过 / 未访问过」，也没有任何客户端访问记录。\n\n## 4. 技术实现方案\n\n- 暂无（待 plan 阶段决策）\n\n## 5. 待确认问题\n\n_暂无_\n\n## 6. 任务清单\n\n- 暂无\n\n## 7. 追加任务\n\n- 暂无\n\n## 8. 执行记录\n\n- 暂无\n";
-const __vite_glob_0_9 = '{\n  "module": "plan"\n}\n';
-const __vite_glob_0_10 = "---\nstage: execute\nlast_action: 全部任务已完成\nupdated_at: 2026-06-20\nsummary: 新增 HELLO.txt 占位文件；后续新增需求：同步生成 HELLO.md，与 HELLO.txt 内容保持一致。\n---\n\n# HELLO 占位\n\n## 1. 背景\n\n希望仓库根有占位文件，便于演示。\n\n## 2. 需求\n\n- 在仓库根创建 `HELLO.txt`，内容 `hello world\\n`\n- 新增需求：同步生成 `HELLO.md`，标题为 `# HELLO`，正文与 `HELLO.txt` 保持一致；后续两个文件必须同步维护\n\n## 3. 现状分析\n\n`HELLO.txt` 已经存在；`HELLO.md` 暂无。\n\n## 4. 技术实现方案\n\n- 直接写入 `HELLO.txt`。\n\n## 5. 待确认问题\n\n- 暂无\n\n## 6. 任务清单\n\n- [x] 在仓库根新建 `HELLO.txt`，内容 `hello world\\n`，验收点：文件存在且内容字节数 = 12。\n\n## 7. 追加任务\n\n- 暂无\n\n## 8. 执行记录\n\n- 2026-06-20 创建 `HELLO.txt`，内容 `hello world\\n`。\n";
-const __vite_glob_0_11 = '{\n  "module": "routing"\n}\n';
-const __vite_glob_0_12 = "---\nstage: plan\nlast_action: 已生成 plan，等待用户批注待确认问题\nupdated_at: 2026-06-20\nsummary: 给项目新增「最近访问」入口，挂在 Specs 列表上方；数据本地存储；上限 10 条；提供清空按钮。\n---\n\n# 最近访问入口\n\n## 1. 背景\n\n用户反馈每次打开应用都要在 spec 列表里翻找昨天碰过的几个 spec。希望首屏看到一个「最近访问」入口直接跳转。\n\n## 2. 需求\n\n- 新增「最近访问」入口，列出用户近期访问过的 spec\n- 决策范围：挂载位置、数据来源、上限条数、清空策略\n\n## 3. 现状分析\n\nGUI 主导航当前只有 `Specs`、`Settings`；Spec 列表按 mtime 排序，没有访问记录。\n\n## 4. 技术实现方案\n\n- 在 `Specs` 列表上方插入「最近访问」区域，最多展示 10 条，按访问时间倒序。\n- 访问记录写入浏览器 `localStorage`，key 为 `yorz:recent-specs`，存 spec id + 最后访问时间。\n- 列表右侧提供「清空」按钮，弹确认对话框后清空 key。\n\n## 5. 待确认问题\n\n- 「最近访问」入口挂在哪里？\n  - 挂在 Specs 列表上方\n  - 挂在主导航单独 tab\n  - 挂在 Settings 页面\n  ！！！选「挂在 Specs 列表上方」\n- 访问记录的存储位置？\n  - localStorage\n  - 服务端数据库\n  ！！！选 localStorage，本地够用\n- 最多保留多少条？\n  - 10 条\n  - 20 条\n  - 50 条\n  ！！！选 10 条\n- 是否提供「清空」按钮？\n  - 提供，弹确认对话框\n  - 不提供\n  ！！！提供，弹确认对话框\n\n## 6. 任务清单\n\n- 暂无\n\n## 7. 追加任务\n\n- 暂无\n\n## 8. 执行记录\n\n- 暂无\n";
-const __vite_glob_0_13 = '{\n  "module": "tasks"\n}\n';
-const __vite_glob_0_14 = '{\n  "$schema": "https://json-schema.org/draft-07/schema#",\n  "version": 2,\n  "modules": [\n    {\n      "module": "SKILL",\n      "file": "SKILL.md",\n      "relatedCases": ["reopen-on-new-requirement", "append-task-state"]\n    },\n    {\n      "module": "stages",\n      "file": "stages.md",\n      "relatedCases": [\n        "plan-candidates",\n        "tasks-consume-annotations",\n        "execute-checkbox-flip",\n        "append-task-state",\n        "new-spec-skeleton"\n      ]\n    },\n    {\n      "module": "mermaid",\n      "file": "mermaid.md",\n      "relatedCases": []\n    },\n    {\n      "module": "review",\n      "file": "review.md",\n      "relatedCases": []\n    }\n  ]\n}\n';
-const __vite_glob_0_15 = '# Mermaid 图表输出指南\n\n本模块指导 Agent 在 spec 文档的各个阶段（plan / tasks / execute）按需输出 mermaid 图表，对信息进行"升维"，提升可读性与决策效率。\n\n## 核心原则：图优先、精确信息折叠\n\n一切图形化决策先服从这条贯穿性原则：**spec 表层图形优先，精确信息折叠收纳**。\n\n- **图形目标**：让读者快速建立三类认知——核心逻辑流程、模块结构、模块间交互。图是「认知层」。\n- **图形边界**：图中**不写**文件路径、代码行号、源码/伪代码全文、精确函数签名；这些属于「精确层」，不该塞进节点标签。\n- **分层表达**：章节表层先给图（认知层），再把 Agent 实施所需的精确信息折叠进「精确层」承载物（见[精确信息折叠](#精确信息折叠)）；图与折叠块**互补而非重复**。\n\n```mermaid\nflowchart TD\n    A[章节含复杂信息] --> B{信息属性}\n    B -->|流程 分支 循环| C[flowchart]\n    B -->|类型 接口 关系| D[classDiagram]\n    B -->|模块交互 时序| E[sequenceDiagram]\n    B -->|模块结构 影响面| F[结构图 + 语义配色]\n    C --> G[表层放图 认知层]\n    D --> G\n    E --> G\n    F --> G\n    G --> H[路径 行号 源码 类型全文 折叠进精确层]\n```\n\n## 图表选型表\n\n根据信息特征选择最合适的图表类型。**优先选择最能清晰传达信息的类型**，而非最复杂的类型。每行"替代什么"列提示：该场景下应**用图替代**的低效文本形式。\n\n| 信息特征                   | 推荐图表                                                 | 替代什么               | 典型 spec 落点               |\n| -------------------------- | -------------------------------------------------------- | ---------------------- | ---------------------------- |\n| 流程、步骤、决策分支       | [**flowchart**](references/flowchart.md)                 | md 列表 + 文字描述     | 核心代码逻辑、执行流程       |\n| 组件间交互、消息传递       | [**sequenceDiagram**](references/sequenceDiagram.md)     | 编号文字描述交互过程   | 现状分析链路、技术方案交互   |\n| 状态机、阶段流转           | [**stateDiagram**](references/stateDiagram.md)           | 文字列举状态变更条件   | 关键状态关系、spec 阶段流转  |\n| 类结构、类型定义、继承关系 | [**classDiagram**](references/classDiagram.md)           | TS/代码片段            | 数据模型、模块结构、类型设计 |\n| 数据库表、实体关系         | [**erDiagram**](references/entityRelationshipDiagram.md) | 建表 SQL 或文字描述    | 数据模型设计                 |\n| 系统架构、组件依赖         | [**architecture**](references/architecture.md)           | 文字描述系统组成       | 现状分析架构、总体架构       |\n| 层级逻辑、数据结构         | [**treeView-beta**](references/treeView.md)              | ASCII 字符树、嵌套列表 | 模块层级、文件结构、AST 结构 |\n| 层级结构 + 占比分布        | [**treemap-beta**](references/treemap.md)                | ASCII 字符树、嵌套列表 | 模块层级量级、文件结构占比   |\n| 层级关系、知识结构         | [**mindmap**](references/mindmap.md)                     | 缩进列表               | 需求拆解、影响面分析         |\n| 历史事件、变更时间线       | [**timeline**](references/timeline.md)                   | 文字按日期罗列         | 执行记录、变更历史           |\n| Git 分支、合并策略         | [**gitgraph**](references/gitgraph.md)                   | 文字描述分支操作       | Git 工作流设计               |\n| 事件建模、系统信息流       | [**eventmodeling**](references/eventmodeling.md)         | 文字描述事件流         | 事件驱动架构设计、CQRS 模型  |\n| 二进制协议、数据包结构     | [**packet**](references/packet.md)                       | 文字描述协议字段       | 二进制协议分析、网络包结构   |\n| 方案候选决策、风险象限     | [**quadrantChart**](references/quadrantChart.md)         | 文字描述优劣对比       | 候选方案决策、风险评估       |\n| 多方案能力对比、权衡       | [**radar**](references/radar.md)                         | 文字描述能力对比       | 架构方案对比、技术选型权衡   |\n| 多模块职责在复杂流程中     | [**swimlane**](references/swimlanes.md)                  | 普通流程图             | 复杂业务流程、跨团队协作     |\n| 统计数据、趋势分析         | [**xyChart**](references/xyChart.md)                     | 文字描述数据           | 变更影响分析、日志统计       |\n\n## 场景优先级\n\n### 必须用图（高优先级）\n\n以下场景**必须**使用对应图表替代纯文字描述：\n\n1. **类型定义与关系** → `classDiagram`：展示接口/类型的属性、方法、继承与组合关系。不要用 TS 代码块替代——类图能直观展现关系拓扑。\n   - **可判定触发词**：见到「接口/类型/entry 结构的定义」「一段 TS interface / type / class 全文」「数据模型字段罗列」——必须出 classDiagram。\n2. **核心业务流程/算法逻辑** → `flowchart`：包含分支判断、循环、并行路径的逻辑。不要用 md 列表 + 文字逐步描述——flowchart 的分支视觉远比缩进列表清晰。\n   - **可判定触发词**：见到「分步/编号叙述 + 分支策略」「命令/函数的实现流程散文」「先…再…否则…」这类流程散文——必须出 flowchart，别退回有序列表。\n3. **状态机与生命周期** → `stateDiagram`：实体在不同状态间的流转与触发条件。不要用文字列举状态——状态图能展现并发状态与守卫条件。\n4. **层级逻辑与数据结构** → `treeView-beta`：模块/文件/目录的层级关系、AST 结构等。不要用 ASCII 字符树——treeView 更清晰且可渲染（mermaid fence 首行须写 `treeView-beta`，与 lint 白名单一致）。\n\n> **代码/类型全文折叠配套（强约束）**：类型定义、实现源码、伪代码在图中**只表达结构与关系**；其**全文**移入[精确信息折叠](#精确信息折叠)承载，**严禁** classDiagram 与等价 TS 代码块并列重复贴出。\n\n### 推荐用图（中优先级）\n\n5. **组件交互** → `sequenceDiagram`：多组件间的消息传递、API 调用时序。\n6. **数据模型** → `erDiagram`：数据库表结构与外键关系。\n7. **系统架构** → `architecture`：组件依赖与分组、部署拓扑。\n8. **需求拆解** → `mindmap`：影响面分析、需求分解为子项。\n9. **多模块职责流程** → `swimlane`：复杂业务流程中跨模块/团队的分工与职责边界。\n\n### 按需用图（低优先级）\n\n10. **变更历史** → `timeline`：执行记录中按时间排列关键事件。\n11. **Git 工作流** → `gitgraph`：描述分支策略与合并流程。\n12. **层级占比** → `treemap-beta`：需要同时展示层级结构与各部分量级/占比时（mermaid fence 首行须写 `treemap-beta`）。\n13. **方案候选决策** → `quadrantChart`：Review/方案选择时做象限分析。\n14. **多方案能力对比** → `radar`：架构选型时做多维度能力雷达对比。\n15. **统计数据** → `xyChart`：日志/变更影响/性能数据等统计可视化。\n16. **事件建模** → `eventmodeling`：事件驱动系统设计时描述信息流。\n17. **二进制协议** → `packet`：协议分析时展示数据包字段结构。\n\n## 各阶段落点指导\n\n### plan 阶段（收尾「图形化补充」子步骤）\n\n> 出图作为 plan 的**独立收尾子步骤**执行（见 [stages.md](./stages.md) 的「图形化补充」）：方案文字定稿后，专门回看下列两节补图，**仅覆盖 `现状分析` / `技术方案` 两节**，不扩展到其它章节。\n\n- **## 现状分析**：用 **architecture** 图描述现有系统结构与组件依赖；用 **flowchart** 描述当前业务流程或数据流。\n- **## 技术实现方案**：用 **flowchart** 描述方案逻辑与决策分支；用 **sequenceDiagram** 描述模块间交互与时序；用 **architecture** 图描述改造后的总体架构。\n- **## 技术实现方案 · 兼容性/影响范围**：凡方案含「被变更模块的现有组成结构 + 影响面」，必须出**结构图**（classDiagram 或 flowchart）展示现有模块组成，并按下方[影响面语义配色](#影响面语义配色强约定)标注 breaking / affected 区域。此落点属 plan 技术方案（非 review），plan 收尾补图工序必须覆盖。\n\n#### 影响面语义配色（强约定）\n\n统一语义色，用 `classDef` 承载——**红 = breaking change 区域，黄 = 受影响区域**；classDiagram 与 flowchart 均按下列范式上色。\n\nflowchart 范式：\n\n```mermaid\nflowchart TB\n    subgraph 现有模块结构\n      A[模块 A 不变]\n      B[模块 B breaking]\n      C[模块 C 受影响]\n    end\n    classDef breaking fill:#ffdddd,stroke:#e03131,color:#c92a2a\n    classDef affected fill:#fff3bf,stroke:#f08c00,color:#e67700\n    class B breaking\n    class C affected\n```\n\nclassDiagram 范式：\n\n```mermaid\nclassDiagram\n    class ModuleA { +stable() }\n    class ModuleB { +changed() }\n    class ModuleC { +touched() }\n    ModuleA --> ModuleB\n    ModuleB --> ModuleC\n    classDef breaking fill:#ffdddd,stroke:#e03131,color:#c92a2a\n    classDef affected fill:#fff3bf,stroke:#f08c00,color:#e67700\n    class ModuleB:::breaking\n    class ModuleC:::affected\n```\n\n### review 阶段\n\n- **风险提示**：用 **quadrantChart** 按风险概率 × 影响程度做象限分布，直观标识高优风险项；用 **mindmap** 将风险按类别（安全 / 性能 / 兼容性 / 数据一致性等）层级展开，快速纵览全貌。\n- **变更范围**：用 **mindmap** 以变更源为根节点展开影响面（受影响模块、文件、接口、配置等）；当变更沿调用链传播时，用 **flowchart** 绘制波及路径，标明直接与间接影响层级。\n- **变更前后差异**：用 **flowchart** 并排呈现 Before / After 流程，关键变更点用样式高亮（如红色边框标记新增节点、删除线标记移除节点）；涉及数据模型变更时用 **classDiagram** 或 **erDiagram** 对比结构差异；涉及配置/枚举等层级数据变化时用 **treeView** 做树形 Diff。\n\n## 输出规范\n\n1. **代码块包裹**：mermaid 代码必须用 ` ```mermaid ` 代码块包裹。\n2. **语法正确**：确保代码可直接渲染，无语法错误。不确定时参考 `references/` 对应文档。\n3. **语义化命名**：节点、变量使用有意义的名称（如 `Skill输出` 而非 `A`），便于理解。\n4. **适度样式**：需要时包含样式（颜色、形状区分）以提升可读性，但不要过度装饰。\n5. **中文友好**：节点文本可使用中文；ID 使用英文或拼音以避免 mermaid 解析问题。\n\n### 示例\n\n```mermaid\nflowchart LR\n    A[Skill 输出 mermaid code] --> B[spec.md]\n    B -->|SSE 推送| C[GUI SpecDetail]\n    C --> D[fence rule 识别]\n    D --> E[异步渲染图形]\n```\n\n## 精确信息折叠\n\n「图优先、精确信息折叠」的落地承载。GUI 渲染器已开启**受控 HTML**：仅放行 `<details>` / `<summary>`，故用原生 `<details>` 折叠精确层。\n\n**该折叠的信息（精确层）**：文件路径与行号、接口/类型/类的全文定义、实现源码或伪代码、精确函数签名、逐字段配置清单、冗长的命令样例。这些是 Agent 实施所需、但会干扰认知的细节。\n\n**不该折叠的信息（认知层）**：章节表层的图、方案要点、决策结论——保持直接可见。\n\n写法（`<details>` 前后留空行，内部 markdown 正常解析）：\n\n```markdown\n<details>\n<summary>add.ts 类型定义与实现细节</summary>\n\n- `src/cli/add.ts:42` 新增 `interface AddOptions { path: string; force?: boolean }`\n- 具体源码 / 逐字段说明 …\n\n</details>\n```\n\n> 注意：`<details>`/`<summary>` 之外的原始 HTML（如 `<div>`、`<script>`）会被 GUI 转义为文本，不要依赖其它标签。\n\n## 节制原则\n\n- **只在信息确实复杂、图形能显著提升可读性时输出**，避免为出图而出图。\n- 简单的线性列表、两三步操作无需图表。\n- 单个章节不宜超过 2 张图，过多图表反而降低可读性。\n- 图表应**补充**文字描述而非替代——文字说明图表无法表达的细节。\n- 如果不确定是否需要图表，优先不画，在文字分析足够清晰时省略。\n';
-const __vite_glob_0_16 = '> **Warning**\n>\n> ## THIS IS AN AUTOGENERATED FILE. DO NOT EDIT.\n>\n> ## Please edit the corresponding file in [/packages/mermaid/src/docs/syntax/architecture.md](../../packages/mermaid/src/docs/syntax/architecture.md).\n\n# Architecture Diagrams Documentation (v11.1.0+)\n\n> In the context of mermaid-js, the architecture diagram is used to show the relationship between services and resources commonly found within the Cloud or CI/CD deployments. In an architecture diagram, services (nodes) are connected by edges. Related services can be placed within groups to better illustrate how they are organized.\n\n## Example\n\n```mermaid-example\narchitecture-beta\n    group api(cloud)[API]\n\n    service db(database)[Database] in api\n    service disk1(disk)[Storage] in api\n    service disk2(disk)[Storage] in api\n    service server(server)[Server] in api\n\n    db:L -- R:server\n    disk1:T -- B:server\n    disk2:T -- B:db\n```\n\n```mermaid\narchitecture-beta\n    group api(cloud)[API]\n\n    service db(database)[Database] in api\n    service disk1(disk)[Storage] in api\n    service disk2(disk)[Storage] in api\n    service server(server)[Server] in api\n\n    db:L -- R:server\n    disk1:T -- B:server\n    disk2:T -- B:db\n```\n\n## Syntax\n\nThe building blocks of an architecture are `groups`, `services`, `edges`, and `junctions`.\n\nFor supporting components, icons are declared by surrounding the icon name with `()`, while labels are declared by surrounding the text with `[]`.\n\nTo begin an architecture diagram, use the keyword `architecture-beta`, followed by your groups, services, edges, and junctions. While each of the 3 building blocks can be declared in any order, care must be taken to ensure the identifier was previously declared by another component.\n\n### Groups\n\nThe syntax for declaring a group is:\n\n```\ngroup {group id}({icon name})[{title}] (in {parent id})?\n```\n\nPut together:\n\n```\ngroup public_api(cloud)[Public API]\n```\n\ncreates a group identified as `public_api`, uses the icon `cloud`, and has the label `Public API`.\n\nAdditionally, groups can be placed within a group using the optional `in` keyword\n\n```\ngroup private_api(cloud)[Private API] in public_api\n```\n\n### Services\n\nThe syntax for declaring a service is:\n\n```\nservice {service id}({icon name})[{title}] (in {parent id})?\n```\n\nPut together:\n\n```\nservice database1(database)[My Database]\n```\n\ncreates the service identified as `database1`, using the icon `database`, with the label `My Database`.\n\nIf the service belongs to a group, it can be placed inside it through the optional `in` keyword\n\n```\nservice database1(database)[My Database] in private_api\n```\n\n### Edges\n\nThe syntax for declaring an edge is:\n\n```\n{serviceId}{{group}}?:{T|B|L|R} {<}?--{>}? {T|B|L|R}:{serviceId}{{group}}?\n```\n\n#### Edge Direction\n\nThe side of the service the edge comes out of is specified by adding a colon (`:`) to the side of the service connecting to the arrow and adding `L|R|T|B`\n\nFor example:\n\n```\ndb:R -- L:server\n```\n\ncreates an edge between the services `db` and `server`, with the edge coming out of the right of `db` and the left of `server`.\n\n```\ndb:T -- L:server\n```\n\ncreates a 90 degree edge between the services `db` and `server`, with the edge coming out of the top of `db` and the left of `server`.\n\n#### Arrows\n\nArrows can be added to each side of an edge by adding `<` before the direction on the left, and/or `>` after the direction on the right.\n\nFor example:\n\n```\nsubnet:R --> L:gateway\n```\n\ncreates an edge with the arrow going into the `gateway` service\n\n#### Edges out of Groups\n\nTo have an edge go from a group to another group or service within another group, the `{group}` modifier can be added after the `serviceId`.\n\nFor example:\n\n```\nservice server[Server] in groupOne\nservice subnet[Subnet] in groupTwo\n\nserver{group}:B --> T:subnet{group}\n```\n\ncreates an edge going out of `groupOne`, adjacent to `server`, and into `groupTwo`, adjacent to `subnet`.\n\nIt\'s important to note that `groupId`s cannot be used for specifying edges and the `{group}` modifier can only be used for services within a group.\n\n### Aligning siblings (v\\<MERMAID_RELEASE_VERSION>+)\n\nWhen several services share similar edge topology (for example, three databases all connecting `R --> L:mcp`), the layout heuristic may collapse them onto the same coordinate so that two render on top of each other. The `align` directive declares that a set of services share a row (same y) or a column (same x), and forces them to spread along that axis.\n\n```\nalign row {idA} {idB} {idC} ...\nalign column {idA} {idB} ...\n```\n\nMembers must already be declared as services or junctions, and at least two members are required. Each `align` directive lives on its own line.\n\nPick the axis based on how the listed members are connected:\n\n- Use **`align column`** when the members connect to a common downstream node _via the same horizontal port pair_ (e.g. all use `R --> L:mcp`). They naturally form a vertical stack to one side, with parallel arrows reaching the downstream node.\n- Use **`align row`** when the members connect to a common downstream node _via the same vertical port pair_ (e.g. all use `B --> T:proc`). They naturally form a horizontal row above the downstream node.\n\nThree databases all feeding `mcp` via right-to-left edges → stack them in a column:\n\n```mermaid-example\narchitecture-beta\n    group api(cloud)[API]\n    service db1(database)[DB1] in api\n    service db2(database)[DB2] in api\n    service db3(database)[DB3] in api\n    service mcp(server)[MCP] in api\n    db1:R --> L:mcp\n    db2:R --> L:mcp\n    db3:R --> L:mcp\n    align column db1 db2 db3\n```\n\n```mermaid\narchitecture-beta\n    group api(cloud)[API]\n    service db1(database)[DB1] in api\n    service db2(database)[DB2] in api\n    service db3(database)[DB3] in api\n    service mcp(server)[MCP] in api\n    db1:R --> L:mcp\n    db2:R --> L:mcp\n    db3:R --> L:mcp\n    align column db1 db2 db3\n```\n\nThree sources all feeding `proc` via top-to-bottom edges → arrange them in a row:\n\n```mermaid-example\narchitecture-beta\n    service src1(server)[Source 1]\n    service src2(server)[Source 2]\n    service src3(server)[Source 3]\n    service proc(server)[Processor]\n    src1:B --> T:proc\n    src2:B --> T:proc\n    src3:B --> T:proc\n    align row src1 src2 src3\n```\n\n```mermaid\narchitecture-beta\n    service src1(server)[Source 1]\n    service src2(server)[Source 2]\n    service src3(server)[Source 3]\n    service proc(server)[Processor]\n    src1:B --> T:proc\n    src2:B --> T:proc\n    src3:B --> T:proc\n    align row src1 src2 src3\n```\n\nThe order of members in the `align` directive determines their order along the axis. The gap between aligned members is controlled by `idealEdgeLengthMultiplier`.\n\n> **Note:** the declared order must not contradict the directions of edges between the listed members. For example, if the diagram contains `a:L --> R:b` (which places `a` to the right of `b`), then `align row a b` will conflict with that edge direction and the layout engine will fail to render. Use `align row b a` instead, or remove the conflicting edge.\n\n#### Grid layouts (combining `row` and `column`)\n\n`align row` only pins the y-coordinate of its members. To produce a clean grid where columns also align across tiers, pair each `align row` with one or more `align column` directives. The columns can span as many rows as you like — chain every node that should share an x-coordinate, even across groups.\n\n```mermaid-example\narchitecture-beta\n    group sources(cloud)[Sources]\n        service src_a(server)[Source A] in sources\n        service src_b(server)[Source B] in sources\n        service src_c(server)[Source C] in sources\n\n    group storage(database)[Storage]\n        service db_one(database)[DB One] in storage\n        service db_two(database)[DB Two] in storage\n        service db_three(database)[DB Three] in storage\n\n    group output(disk)[Output]\n        service brief(disk)[Brief] in output\n        service analyst(server)[Analyst] in output\n        service delivery(cloud)[Delivery] in output\n\n    src_a:B --> T:db_one\n    src_b:B --> T:db_two\n    src_c:B --> T:db_three\n    db_two:B --> T:brief\n    brief:R --> L:analyst\n    analyst:R --> L:delivery\n\n    align row src_a src_b src_c\n    align row db_one db_two db_three\n    align row brief analyst delivery\n\n    align column src_a db_one\n    align column src_b db_two brief\n    align column src_c db_three\n```\n\n```mermaid\narchitecture-beta\n    group sources(cloud)[Sources]\n        service src_a(server)[Source A] in sources\n        service src_b(server)[Source B] in sources\n        service src_c(server)[Source C] in sources\n\n    group storage(database)[Storage]\n        service db_one(database)[DB One] in storage\n        service db_two(database)[DB Two] in storage\n        service db_three(database)[DB Three] in storage\n\n    group output(disk)[Output]\n        service brief(disk)[Brief] in output\n        service analyst(server)[Analyst] in output\n        service delivery(cloud)[Delivery] in output\n\n    src_a:B --> T:db_one\n    src_b:B --> T:db_two\n    src_c:B --> T:db_three\n    db_two:B --> T:brief\n    brief:R --> L:analyst\n    analyst:R --> L:delivery\n\n    align row src_a src_b src_c\n    align row db_one db_two db_three\n    align row brief analyst delivery\n\n    align column src_a db_one\n    align column src_b db_two brief\n    align column src_c db_three\n```\n\nThe result is three left-to-right tiers stacked vertically with a straight spine through the middle column. Edges between aligned nodes render as straight horizontal or vertical lines; cross-axis edges (e.g. `db_one:R --> T:hub`) get a single 90° elbow.\n\n> **Tip:** if a long single-word label is too wide to fit on one line at small `iconSize` values, increase `iconSize` (or use a shorter title) to keep it on one line.\n\n### Junctions\n\nJunctions are a special type of node which acts as a potential 4-way split between edges.\n\nThe syntax for declaring a junction is:\n\n```\njunction {junction id} (in {parent id})?\n```\n\n```mermaid-example\narchitecture-beta\n    service left_disk(disk)[Disk]\n    service top_disk(disk)[Disk]\n    service bottom_disk(disk)[Disk]\n    service top_gateway(internet)[Gateway]\n    service bottom_gateway(internet)[Gateway]\n    junction junctionCenter\n    junction junctionRight\n\n    left_disk:R -- L:junctionCenter\n    top_disk:B -- T:junctionCenter\n    bottom_disk:T -- B:junctionCenter\n    junctionCenter:R -- L:junctionRight\n    top_gateway:B -- T:junctionRight\n    bottom_gateway:T -- B:junctionRight\n```\n\n```mermaid\narchitecture-beta\n    service left_disk(disk)[Disk]\n    service top_disk(disk)[Disk]\n    service bottom_disk(disk)[Disk]\n    service top_gateway(internet)[Gateway]\n    service bottom_gateway(internet)[Gateway]\n    junction junctionCenter\n    junction junctionRight\n\n    left_disk:R -- L:junctionCenter\n    top_disk:B -- T:junctionCenter\n    bottom_disk:T -- B:junctionCenter\n    junctionCenter:R -- L:junctionRight\n    top_gateway:B -- T:junctionRight\n    bottom_gateway:T -- B:junctionRight\n```\n\n## Configuration\n\n### `randomize` (v11.14.0+)\n\nBy default, architecture diagrams start nodes at deterministic seed positions (`randomize: false`). Setting `randomize` to `true` randomizes initial node positions before running the layout algorithm, which may produce varied but potentially better-spaced layouts on each render.\n\n> Note: `randomize: false` alone is not enough to guarantee identical renders — the underlying fcose layout still calls `Math.random()` during its constraint solver. Use the `seed` option (described below) to lock the layout fully.\n\nVia frontmatter:\n\n```\n%%{init: {"architecture": {"randomize": true}}}%%\narchitecture-beta\n    group api(cloud)[API]\n    service db(database)[Database] in api\n    service server(server)[Server] in api\n    db:R --> L:server\n```\n\nVia `mermaid.initialize()`:\n\n```javascript\nmermaid.initialize({\n  architecture: {\n    randomize: true,\n  },\n});\n```\n\n| Option      | Type    | Default | Description                                                            |\n| ----------- | ------- | ------- | ---------------------------------------------------------------------- |\n| `randomize` | boolean | `false` | Whether to randomize initial node positions before running the layout. |\n\n### Layout tuning (v11.15.0+)\n\nThe following options pass through to the underlying [fcose](https://github.com/iVis-at-Bilkent/cytoscape.js-fcose) layout so you can adjust spacing and density without changing your diagram source:\n\n| Option                      | Type   | Default | Description                                                                                                                                                                                                                                      |\n| --------------------------- | ------ | ------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |\n| `nodeSeparation`            | number | `75`    | Minimum separation, in pixels, between sibling nodes in the same group. Pass-through to fcose.                                                                                                                                                   |\n| `idealEdgeLengthMultiplier` | number | `1.5`   | Multiplier applied to `iconSize` to compute the ideal length of edges between nodes within the same group. Increase for breathing room, decrease to pack tighter. Cross-group edges are not affected.                                            |\n| `edgeElasticity`            | number | `0.45`  | Spring elasticity (0–1) on same-group edges. Higher pulls connected nodes closer; lower lets them spread out. Cross-group edges are not affected.                                                                                                |\n| `numIter`                   | number | `2500`  | Maximum fcose iterations. Increase for higher-quality layouts on large diagrams at the cost of render time.                                                                                                                                      |\n| `seed`                      | number | `1`     | Deterministic seed for fcose. Defaults to `1` so the same diagram always renders with the same layout. Set to `0` to opt out and use native (non-deterministic) `Math.random`. Any other number selects a different reproducible layout variant. |\n\nExample — bumping `idealEdgeLengthMultiplier` stretches the spacing between connected nodes in a chain:\n\n```\n%%{init: {"architecture": {"idealEdgeLengthMultiplier": 3}}}%%\narchitecture-beta\n    service a(server)[A]\n    service b(server)[B]\n    service c(server)[C]\n    a:R --> L:b\n    b:R --> L:c\n```\n\n> **Note:** these knobs tune fcose\'s force-directed layout; they do not change which nodes the layout heuristic considers adjacent. If two siblings render on top of each other because they share the same logical position in the spatial map (a known limitation tracked in [#6120](https://github.com/mermaid-js/mermaid/issues/6120)), no combination of these knobs will move them apart — see the upcoming `align row|column` directive instead.\n\n## Icons\n\nBy default, architecture diagram supports the following icons: `cloud`, `database`, `disk`, `internet`, `server`.\nUsers can use any of the 200,000+ icons available in iconify.design, or add other custom icons, by [registering an icon pack](../config/icons.md).\n\nAfter the icons are installed, they can be used in the architecture diagram by using the format "name:icon-name", where name is the value used when registering the icon pack.\n\n```mermaid-example\narchitecture-beta\n    group api(logos:aws-lambda)[API]\n\n    service db(logos:aws-aurora)[Database] in api\n    service disk1(logos:aws-glacier)[Storage] in api\n    service disk2(logos:aws-s3)[Storage] in api\n    service server(logos:aws-ec2)[Server] in api\n\n    db:L -- R:server\n    disk1:T -- B:server\n    disk2:T -- B:db\n```\n\n```mermaid\narchitecture-beta\n    group api(logos:aws-lambda)[API]\n\n    service db(logos:aws-aurora)[Database] in api\n    service disk1(logos:aws-glacier)[Storage] in api\n    service disk2(logos:aws-s3)[Storage] in api\n    service server(logos:aws-ec2)[Server] in api\n\n    db:L -- R:server\n    disk1:T -- B:server\n    disk2:T -- B:db\n```\n';
-const __vite_glob_0_17 = '> **Warning**\n>\n> ## THIS IS AN AUTOGENERATED FILE. DO NOT EDIT.\n>\n> ## Please edit the corresponding file in [/packages/mermaid/src/docs/syntax/classDiagram.md](../../packages/mermaid/src/docs/syntax/classDiagram.md).\n\n# Class diagrams\n\n> "In software engineering, a class diagram in the Unified Modeling Language (UML) is a type of static structure diagram that describes the structure of a system by showing the system\'s classes, their attributes, operations (or methods), and the relationships among objects."\n>\n> -Wikipedia\n\nThe class diagram is the main building block of object-oriented modeling. It is used for general conceptual modeling of the structure of the application, and for detailed modeling to translate the models into programming code. Class diagrams can also be used for data modeling. The classes in a class diagram represent both the main elements, interactions in the application, and the classes to be programmed.\n\nMermaid can render class diagrams.\n\n```mermaid-example\n---\ntitle: Animal example\n---\nclassDiagram\n    note "From Duck till Zebra"\n    Animal <|-- Duck\n    note for Duck "can fly<br>can swim<br>can dive<br>can help in debugging"\n    Animal <|-- Fish\n    Animal <|-- Zebra\n    Animal : +int age\n    Animal : +String gender\n    Animal: +isMammal()\n    Animal: +mate()\n    class Duck{\n        +String beakColor\n        +swim()\n        +quack()\n    }\n    class Fish{\n        -int sizeInFeet\n        -canEat()\n    }\n    class Zebra{\n        +bool is_wild\n        +run()\n    }\n```\n\n```mermaid\n---\ntitle: Animal example\n---\nclassDiagram\n    note "From Duck till Zebra"\n    Animal <|-- Duck\n    note for Duck "can fly<br>can swim<br>can dive<br>can help in debugging"\n    Animal <|-- Fish\n    Animal <|-- Zebra\n    Animal : +int age\n    Animal : +String gender\n    Animal: +isMammal()\n    Animal: +mate()\n    class Duck{\n        +String beakColor\n        +swim()\n        +quack()\n    }\n    class Fish{\n        -int sizeInFeet\n        -canEat()\n    }\n    class Zebra{\n        +bool is_wild\n        +run()\n    }\n```\n\n## Syntax\n\n### Class\n\nUML provides mechanisms to represent class members, such as attributes and methods, and additional information about them.\nA single instance of a class in the diagram contains three compartments:\n\n- The top compartment contains the name of the class. It is printed in bold and centered, and the first letter is capitalized. It may also contain optional annotation text describing the nature of the class.\n- The middle compartment contains the attributes of the class. They are left-aligned and the first letter is lowercase.\n- The bottom compartment contains the operations the class can execute. They are also left-aligned and the first letter is lowercase.\n\n```mermaid-example\n---\ntitle: Bank example\n---\nclassDiagram\n    class BankAccount\n    BankAccount : +String owner\n    BankAccount : +Bigdecimal balance\n    BankAccount : +deposit(amount)\n    BankAccount : +withdrawal(amount)\n\n```\n\n```mermaid\n---\ntitle: Bank example\n---\nclassDiagram\n    class BankAccount\n    BankAccount : +String owner\n    BankAccount : +Bigdecimal balance\n    BankAccount : +deposit(amount)\n    BankAccount : +withdrawal(amount)\n\n```\n\n## Define a class\n\nThere are two ways to define a class:\n\n- Explicitly using keyword **class** like `class Animal` which would define the Animal class.\n- Via a **relationship** which defines two classes at a time along with their relationship. For instance, `Vehicle <|-- Car`.\n\n```mermaid-example\nclassDiagram\n    class Animal\n    Vehicle <|-- Car\n```\n\n```mermaid\nclassDiagram\n    class Animal\n    Vehicle <|-- Car\n```\n\nNaming convention: a class name should be composed only of alphanumeric characters (including unicode), underscores, and dashes (-).\n\n### Class labels\n\nIn case you need to provide a label for a class, you can use the following syntax:\n\n```mermaid-example\nclassDiagram\n    class Animal["Animal with a label"]\n    class Car["Car with *! symbols"]\n    Animal --> Car\n```\n\n```mermaid\nclassDiagram\n    class Animal["Animal with a label"]\n    class Car["Car with *! symbols"]\n    Animal --> Car\n```\n\nYou can also use backticks to escape special characters in the label:\n\n```mermaid-example\nclassDiagram\n    class `Animal Class!`\n    class `Car Class`\n    `Animal Class!` --> `Car Class`\n```\n\n```mermaid\nclassDiagram\n    class `Animal Class!`\n    class `Car Class`\n    `Animal Class!` --> `Car Class`\n```\n\n## Defining Members of a class\n\nUML provides mechanisms to represent class members such as attributes and methods, as well as additional information about them.\n\nMermaid distinguishes between attributes and functions/methods based on if the **parenthesis** `()` are present or not. The ones with `()` are treated as functions/methods, and all others as attributes.\n\nThere are two ways to define the members of a class, and regardless of whichever syntax is used to define the members, the output will still be same. The two different ways are :\n\n- Associate a member of a class using **:** (colon) followed by member name, useful to define one member at a time. For example:\n\n```mermaid-example\nclassDiagram\nclass BankAccount\nBankAccount : +String owner\nBankAccount : +BigDecimal balance\nBankAccount : +deposit(amount)\nBankAccount : +withdrawal(amount)\n```\n\n```mermaid\nclassDiagram\nclass BankAccount\nBankAccount : +String owner\nBankAccount : +BigDecimal balance\nBankAccount : +deposit(amount)\nBankAccount : +withdrawal(amount)\n```\n\n- Associate members of a class using **{}** brackets, where members are grouped within curly brackets. Suitable for defining multiple members at once. For example:\n\n```mermaid-example\nclassDiagram\nclass BankAccount{\n    +String owner\n    +BigDecimal balance\n    +deposit(amount)\n    +withdrawal(amount)\n}\n```\n\n```mermaid\nclassDiagram\nclass BankAccount{\n    +String owner\n    +BigDecimal balance\n    +deposit(amount)\n    +withdrawal(amount)\n}\n```\n\n#### Return Type\n\nOptionally you can end a method/function definition with the data type that will be returned (note: there must be a space between the final `)` and the return type). An example:\n\n```mermaid-example\nclassDiagram\nclass BankAccount{\n    +String owner\n    +BigDecimal balance\n    +deposit(amount) bool\n    +withdrawal(amount) int\n}\n```\n\n```mermaid\nclassDiagram\nclass BankAccount{\n    +String owner\n    +BigDecimal balance\n    +deposit(amount) bool\n    +withdrawal(amount) int\n}\n```\n\n#### Generic Types\n\nGenerics can be represented as part of a class definition, and for class members/return types. In order to denote an item as generic, you enclose that type within `~` (**tilde**). **Nested** type declarations such as `List<List<int>>` are supported, though generics that include a comma are currently not supported. (such as `List<List<K, V>>`)\n\n> _note_ when a generic is used within a class definition, the generic type is NOT considered part of the class name. i.e.: for any syntax which required you to reference the class name, you need to drop the type part of the definition. This also means that mermaid does not currently support having two classes with the same name, but different generic types.\n\n```mermaid-example\nclassDiagram\nclass Square~Shape~{\n    int id\n    List~int~ position\n    setPoints(List~int~ points)\n    getPoints() List~int~\n}\n\nSquare : -List~string~ messages\nSquare : +setMessages(List~string~ messages)\nSquare : +getMessages() List~string~\nSquare : +getDistanceMatrix() List~List~int~~\n```\n\n```mermaid\nclassDiagram\nclass Square~Shape~{\n    int id\n    List~int~ position\n    setPoints(List~int~ points)\n    getPoints() List~int~\n}\n\nSquare : -List~string~ messages\nSquare : +setMessages(List~string~ messages)\nSquare : +getMessages() List~string~\nSquare : +getDistanceMatrix() List~List~int~~\n```\n\n#### Visibility\n\nTo describe the visibility (or encapsulation) of an attribute or method/function that is a part of a class (i.e. a class member), optional notation may be placed before that members\' name:\n\n- `+` Public\n- `-` Private\n- `#` Protected\n- `~` Package/Internal\n\n> _note_ you can also include additional _classifiers_ to a method definition by adding the following notation to the _end_ of the method, i.e.: after the `()` or after the return type:\n>\n> - `*` Abstract e.g.: `someAbstractMethod()*` or `someAbstractMethod() int*`\n> - `$` Static e.g.: `someStaticMethod()$` or `someStaticMethod() String$`\n\n> _note_ you can also include additional _classifiers_ to a field definition by adding the following notation to the very end:\n>\n> - `$` Static e.g.: `String someField$`\n\n## Defining Relationship\n\nA relationship is a general term covering the specific types of logical connections found on class and object diagrams.\n\n```\n[classA][Arrow][ClassB]\n```\n\nThere are eight different types of relations defined for classes under UML which are currently supported:\n\n| Type    | Description   |\n| ------- | ------------- |\n| `<\\|--` | Inheritance   |\n| `*--`   | Composition   |\n| `o--`   | Aggregation   |\n| `-->`   | Association   |\n| `--`    | Link (Solid)  |\n| `..>`   | Dependency    |\n| `..\\|>` | Realization   |\n| `..`    | Link (Dashed) |\n\n```mermaid-example\nclassDiagram\nclassA <|-- classB\nclassC *-- classD\nclassE o-- classF\nclassG <-- classH\nclassI -- classJ\nclassK <.. classL\nclassM <|.. classN\nclassO .. classP\n\n```\n\n```mermaid\nclassDiagram\nclassA <|-- classB\nclassC *-- classD\nclassE o-- classF\nclassG <-- classH\nclassI -- classJ\nclassK <.. classL\nclassM <|.. classN\nclassO .. classP\n\n```\n\nWe can use the labels to describe the nature of the relation between two classes. Also, arrowheads can be used in the opposite direction as well:\n\n```mermaid-example\nclassDiagram\nclassA --|> classB : Inheritance\nclassC --* classD : Composition\nclassE --o classF : Aggregation\nclassG --> classH : Association\nclassI -- classJ : Link(Solid)\nclassK ..> classL : Dependency\nclassM ..|> classN : Realization\nclassO .. classP : Link(Dashed)\n\n```\n\n```mermaid\nclassDiagram\nclassA --|> classB : Inheritance\nclassC --* classD : Composition\nclassE --o classF : Aggregation\nclassG --> classH : Association\nclassI -- classJ : Link(Solid)\nclassK ..> classL : Dependency\nclassM ..|> classN : Realization\nclassO .. classP : Link(Dashed)\n\n```\n\n### Labels on Relations\n\nIt is possible to add label text to a relation:\n\n```\n[classA][Arrow][ClassB]:LabelText\n```\n\n```mermaid-example\nclassDiagram\nclassA <|-- classB : implements\nclassC *-- classD : composition\nclassE o-- classF : aggregation\n```\n\n```mermaid\nclassDiagram\nclassA <|-- classB : implements\nclassC *-- classD : composition\nclassE o-- classF : aggregation\n```\n\n### Two-way relations\n\nRelations can logically represent an N:M association:\n\n```mermaid-example\nclassDiagram\n    Animal <|--|> Zebra\n```\n\n```mermaid\nclassDiagram\n    Animal <|--|> Zebra\n```\n\nHere is the syntax:\n\n```\n[Relation Type][Link][Relation Type]\n```\n\nWhere `Relation Type` can be one of:\n\n| Type  | Description |\n| ----- | ----------- |\n| `<\\|` | Inheritance |\n| `\\*`  | Composition |\n| `o`   | Aggregation |\n| `>`   | Association |\n| `<`   | Association |\n| `\\|>` | Realization |\n\nAnd `Link` can be one of:\n\n| Type | Description |\n| ---- | ----------- |\n| --   | Solid       |\n| ..   | Dashed      |\n\n### Lollipop Interfaces\n\nClasses can also be given a special relation type that defines a lollipop interface on the class. A lollipop interface is defined using the following syntax:\n\n- `bar ()-- foo`\n- `foo --() bar`\n\nThe interface (bar) with the lollipop connects to the class (foo).\n\nNote: Each interface that is defined is unique and is meant to not be shared between classes / have multiple edges connecting to it.\n\n```mermaid-example\nclassDiagram\n  bar ()-- foo\n```\n\n```mermaid\nclassDiagram\n  bar ()-- foo\n```\n\n```mermaid-example\nclassDiagram\n  class Class01 {\n    int amount\n    draw()\n  }\n  Class01 --() bar\n  Class02 --() bar\n\n  foo ()-- Class01\n```\n\n```mermaid\nclassDiagram\n  class Class01 {\n    int amount\n    draw()\n  }\n  Class01 --() bar\n  Class02 --() bar\n\n  foo ()-- Class01\n```\n\n## Define Namespace\n\nA namespace groups classes.\n\n```mermaid-example\nclassDiagram\nnamespace BaseShapes {\n    class Triangle\n    class Rectangle {\n      double width\n      double height\n    }\n}\n```\n\n```mermaid\nclassDiagram\nnamespace BaseShapes {\n    class Triangle\n    class Rectangle {\n      double width\n      double height\n    }\n}\n```\n\n### Namespace Labels (v11.15.0+)\n\nA namespace can be given a display label using square bracket syntax, similar to class labels:\n\n```mermaid-example\nclassDiagram\n    namespace Auth["Authentication Service"] {\n        class UserService {\n            +login()\n            +logout()\n        }\n    }\n```\n\n```mermaid\nclassDiagram\n    namespace Auth["Authentication Service"] {\n        class UserService {\n            +login()\n            +logout()\n        }\n    }\n```\n\nThe label replaces the namespace name in the rendered diagram, while the name is still used internally for relationships and nesting.\n\n### Nested Namespaces (v11.15.0+)\n\nNamespaces can be nested to represent hierarchical groupings. There are two ways to define nested namespaces:\n\n**Dot notation** creates intermediate namespaces automatically:\n\n```mermaid-example\nclassDiagram\n    namespace Company.Engineering.Backend {\n        class Developer {\n            +writeCode()\n        }\n    }\n    namespace Company.Engineering.Frontend {\n        class Designer {\n            +createMockup()\n        }\n    }\n    namespace Company.Engineering {\n        class TechLead {\n            +planSprint()\n        }\n    }\n    TechLead --> Developer : leads\n    TechLead --> Designer : leads\n```\n\n```mermaid\nclassDiagram\n    namespace Company.Engineering.Backend {\n        class Developer {\n            +writeCode()\n        }\n    }\n    namespace Company.Engineering.Frontend {\n        class Designer {\n            +createMockup()\n        }\n    }\n    namespace Company.Engineering {\n        class TechLead {\n            +planSprint()\n        }\n    }\n    TechLead --> Developer : leads\n    TechLead --> Designer : leads\n```\n\n**Syntactic nesting** places namespace blocks inside other namespace blocks:\n\n```mermaid-example\nclassDiagram\n    namespace Platform {\n        namespace Auth {\n            class UserService {\n                +login()\n                +logout()\n            }\n        }\n        namespace Data {\n            class Repository {\n                +find()\n                +save()\n            }\n        }\n        class Gateway {\n            +route()\n        }\n    }\n    Gateway --> UserService : delegates\n    Gateway --> Repository : delegates\n```\n\n```mermaid\nclassDiagram\n    namespace Platform {\n        namespace Auth {\n            class UserService {\n                +login()\n                +logout()\n            }\n        }\n        namespace Data {\n            class Repository {\n                +find()\n                +save()\n            }\n        }\n        class Gateway {\n            +route()\n        }\n    }\n    Gateway --> UserService : delegates\n    Gateway --> Repository : delegates\n```\n\nBoth approaches can be combined. Dot notation like `namespace A.B.C` will automatically create namespaces `A` and `A.B` as parents if they don\'t already exist.\n\n#### Compact rendering (`hierarchicalNamespaces: false`)\n\nBy default (`hierarchicalNamespaces: true`), each segment of a dotted or syntactically-nested namespace name renders as its own cluster, producing a nested layout.\n\nSetting `hierarchicalNamespaces: false` in the class diagram config switches to **compact mode**: only namespaces the user explicitly declares are drawn — each as a single flat box labelled with its fully-qualified name. Auto-created intermediate ancestors are skipped, and classes inside them are moved to their nearest declared namespace.\n\n```mermaid-example\n---\nconfig:\n  class:\n    hierarchicalNamespaces: false\n---\nclassDiagram\n    namespace Company.Engineering.Backend {\n        class Developer {\n            +writeCode()\n        }\n    }\n    namespace Company.Engineering.Frontend {\n        class Designer {\n            +createMockup()\n        }\n    }\n    namespace Company {\n        class CEO {\n            +makeDecisions()\n        }\n    }\n    CEO --> Developer : oversees\n    CEO --> Designer : oversees\n```\n\n```mermaid\n---\nconfig:\n  class:\n    hierarchicalNamespaces: false\n---\nclassDiagram\n    namespace Company.Engineering.Backend {\n        class Developer {\n            +writeCode()\n        }\n    }\n    namespace Company.Engineering.Frontend {\n        class Designer {\n            +createMockup()\n        }\n    }\n    namespace Company {\n        class CEO {\n            +makeDecisions()\n        }\n    }\n    CEO --> Developer : oversees\n    CEO --> Designer : oversees\n```\n\n## Cardinality / Multiplicity on relations\n\nMultiplicity or cardinality in class diagrams indicates the number of instances of one class that can be linked to an instance of the other class. For example, each company will have one or more employees (not zero), and each employee currently works for zero or one companies.\n\nMultiplicity notations are placed near the end of an association.\n\nThe different cardinality options are :\n\n- `1` Only 1\n- `0..1` Zero or One\n- `1..*` One or more\n- `*` Many\n- `n` n (where n>1)\n- `0..n` zero to n (where n>1)\n- `1..n` one to n (where n>1)\n\nCardinality can be easily defined by placing the text option within quotes `"` before or after a given arrow. For example:\n\n```\n[classA] "cardinality1" [Arrow] "cardinality2" [ClassB]:LabelText\n```\n\n```mermaid-example\nclassDiagram\n    Customer "1" --> "*" Ticket\n    Student "1" --> "1..*" Course\n    Galaxy --> "many" Star : Contains\n```\n\n```mermaid\nclassDiagram\n    Customer "1" --> "*" Ticket\n    Student "1" --> "1..*" Course\n    Galaxy --> "many" Star : Contains\n```\n\n## Annotations on classes\n\nIt is possible to annotate classes with markers to provide additional metadata about the class. This can give a clearer indication about its nature. Some common annotations include:\n\n- `<<Interface>>` To represent an Interface class\n- `<<Abstract>>` To represent an abstract class\n- `<<Service>>` To represent a service class\n- `<<Enumeration>>` To represent an enum\n\nAnnotations are defined within the opening `<<` and closing `>>`. There are three ways to add an annotation to a class, and in all cases the output will be the same:\n\n- **Inline** with the class definition:\n\n```mermaid-example\nclassDiagram\n  class Shape <<interface>>\n```\n\n```mermaid\nclassDiagram\n  class Shape <<interface>>\n```\n\n- In a **_separate line_** after a class is defined:\n\n```mermaid-example\nclassDiagram\nclass Shape\n<<interface>> Shape\nShape : noOfVertices\nShape : draw()\n```\n\n```mermaid\nclassDiagram\nclass Shape\n<<interface>> Shape\nShape : noOfVertices\nShape : draw()\n```\n\n- In a **_nested structure_** along with the class definition:\n\n```mermaid-example\nclassDiagram\nclass Shape{\n    <<interface>>\n    noOfVertices\n    draw()\n}\nclass Color{\n    <<enumeration>>\n    RED\n    BLUE\n    GREEN\n    WHITE\n    BLACK\n}\n\n```\n\n```mermaid\nclassDiagram\nclass Shape{\n    <<interface>>\n    noOfVertices\n    draw()\n}\nclass Color{\n    <<enumeration>>\n    RED\n    BLUE\n    GREEN\n    WHITE\n    BLACK\n}\n\n```\n\n## Comments\n\nComments can be entered within a class diagram, which will be ignored by the parser. Comments need to be on their own line, and must be prefaced with `%%` (double percent signs). Any text until the next newline will be treated as a comment, including any class diagram syntax.\n\n```mermaid-example\nclassDiagram\n%% This whole line is a comment classDiagram class Shape <<interface>>\nclass Shape{\n    <<interface>>\n    noOfVertices\n    draw()\n}\n```\n\n```mermaid\nclassDiagram\n%% This whole line is a comment classDiagram class Shape <<interface>>\nclass Shape{\n    <<interface>>\n    noOfVertices\n    draw()\n}\n```\n\n## Setting the direction of the diagram\n\nWith class diagrams you can use the direction statement to set the direction in which the diagram will render:\n\n```mermaid-example\nclassDiagram\n  direction RL\n  class Student {\n    -idCard : IdCard\n  }\n  class IdCard{\n    -id : int\n    -name : string\n  }\n  class Bike{\n    -id : int\n    -name : string\n  }\n  Student "1" --o "1" IdCard : carries\n  Student "1" --o "1" Bike : rides\n```\n\n```mermaid\nclassDiagram\n  direction RL\n  class Student {\n    -idCard : IdCard\n  }\n  class IdCard{\n    -id : int\n    -name : string\n  }\n  class Bike{\n    -id : int\n    -name : string\n  }\n  Student "1" --o "1" IdCard : carries\n  Student "1" --o "1" Bike : rides\n```\n\n## Interaction\n\nIt is possible to bind a click event to a node. The click can lead to either a javascript callback or to a link which will be opened in a new browser tab. **Note**: This functionality is disabled when using `securityLevel=\'strict\'` and enabled when using `securityLevel=\'loose\'`.\n\nYou would define these actions on a separate line after all classes have been declared.\n\n```\naction className "reference" "tooltip"\nclick className call callback() "tooltip"\nclick className href "url" "tooltip"\n```\n\n- _action_ is either `link` or `callback`, depending on which type of interaction you want to have called\n- _className_ is the id of the node that the action will be associated with\n- _reference_ is either the url link, or the function name for callback.\n- (_optional_) tooltip is a string to be displayed when hovering over element (note: The styles of the tooltip are set by the class .mermaidTooltip.)\n- note: callback function will be called with the nodeId as parameter.\n\n## Notes\n\nIt is possible to add notes on the diagram using `note "line1\\nline2"`. A note can be added for a specific class using `note for <CLASS NAME> "line1\\nline2"`.\n\n### Examples\n\n```mermaid-example\nclassDiagram\n    note "This is a general note"\n    note for MyClass "This is a note for a class"\n    class MyClass{\n    }\n```\n\n```mermaid\nclassDiagram\n    note "This is a general note"\n    note for MyClass "This is a note for a class"\n    class MyClass{\n    }\n```\n\n_URL Link:_\n\n```mermaid-example\nclassDiagram\nclass Shape\nlink Shape "https://www.github.com" "This is a tooltip for a link"\nclass Shape2\nclick Shape2 href "https://www.github.com" "This is a tooltip for a link"\n```\n\n```mermaid\nclassDiagram\nclass Shape\nlink Shape "https://www.github.com" "This is a tooltip for a link"\nclass Shape2\nclick Shape2 href "https://www.github.com" "This is a tooltip for a link"\n```\n\n_Callback:_\n\n```mermaid-example\nclassDiagram\nclass Shape\ncallback Shape "callbackFunction" "This is a tooltip for a callback"\nclass Shape2\nclick Shape2 call callbackFunction() "This is a tooltip for a callback"\n```\n\n```mermaid\nclassDiagram\nclass Shape\ncallback Shape "callbackFunction" "This is a tooltip for a callback"\nclass Shape2\nclick Shape2 call callbackFunction() "This is a tooltip for a callback"\n```\n\n```html\n<script>\n  const callbackFunction = function () {\n    alert(\'A callback was triggered\');\n  };\n<\/script>\n```\n\n```mermaid-example\nclassDiagram\n    class Class01\n    class Class02\n    callback Class01 "callbackFunction" "Callback tooltip"\n    link Class02 "https://www.github.com" "This is a link"\n    class Class03\n    class Class04\n    click Class03 call callbackFunction() "Callback tooltip"\n    click Class04 href "https://www.github.com" "This is a link"\n```\n\n```mermaid\nclassDiagram\n    class Class01\n    class Class02\n    callback Class01 "callbackFunction" "Callback tooltip"\n    link Class02 "https://www.github.com" "This is a link"\n    class Class03\n    class Class04\n    click Class03 call callbackFunction() "Callback tooltip"\n    click Class04 href "https://www.github.com" "This is a link"\n```\n\n> **Success** The tooltip functionality and the ability to link to urls are available from version 0.5.2.\n\nBeginner\'s tip—a full example using interactive links in an HTML page:\n\n```html\n<body>\n  <pre class="mermaid">\n    classDiagram\n    Animal <|-- Duck\n    Animal <|-- Fish\n    Animal <|-- Zebra\n    Animal : +int age\n    Animal : +String gender\n    Animal: +isMammal()\n    Animal: +mate()\n    class Duck{\n      +String beakColor\n      +swim()\n      +quack()\n      }\n    class Fish{\n      -int sizeInFeet\n      -canEat()\n      }\n    class Zebra{\n      +bool is_wild\n      +run()\n      }\n\n      callback Duck "callback" "Tooltip"\n      link Zebra "https://www.github.com" "This is a link"\n  </pre>\n\n  <script>\n    const callback = function () {\n      alert(\'A callback was triggered\');\n    };\n    const config = {\n      startOnLoad: true,\n      securityLevel: \'loose\',\n    };\n    mermaid.initialize(config);\n  <\/script>\n</body>\n```\n\n## Styling\n\n### Styling a node\n\nIt is possible to apply specific styles such as a thicker border or a different background color to an individual node using the `style` keyword.\n\nNote that notes and namespaces cannot be styled individually but do support themes.\n\n```mermaid-example\nclassDiagram\n  class Animal\n  class Mineral\n  style Animal fill:#f9f,stroke:#333,stroke-width:4px\n  style Mineral fill:#bbf,stroke:#f66,stroke-width:2px,color:#fff,stroke-dasharray: 5 5\n```\n\n```mermaid\nclassDiagram\n  class Animal\n  class Mineral\n  style Animal fill:#f9f,stroke:#333,stroke-width:4px\n  style Mineral fill:#bbf,stroke:#f66,stroke-width:2px,color:#fff,stroke-dasharray: 5 5\n```\n\n#### Classes\n\nMore convenient than defining the style every time is to define a class of styles and attach this class to the nodes that\nshould have a different look.\n\nA class definition looks like the example below:\n\n```\nclassDef className fill:#f9f,stroke:#333,stroke-width:4px;\n```\n\nAlso, it is possible to define style to multiple classes in one statement:\n\n```\nclassDef firstClassName,secondClassName font-size:12pt;\n```\n\nAttachment of a class to a node is done as per below:\n\n```\ncssClass "nodeId1" className;\n```\n\nIt is also possible to attach a class to a list of nodes in one statement:\n\n```\ncssClass "nodeId1,nodeId2" className;\n```\n\nA shorter form of adding a class is to attach the classname to the node using the `:::` operator:\n\n```mermaid-example\nclassDiagram\n    class Animal:::someclass\n    classDef someclass fill:#f96\n```\n\n```mermaid\nclassDiagram\n    class Animal:::someclass\n    classDef someclass fill:#f96\n```\n\nOr:\n\n```mermaid-example\nclassDiagram\n    class Animal:::someclass {\n        -int sizeInFeet\n        -canEat()\n    }\n    classDef someclass fill:#f96\n```\n\n```mermaid\nclassDiagram\n    class Animal:::someclass {\n        -int sizeInFeet\n        -canEat()\n    }\n    classDef someclass fill:#f96\n```\n\n### Default class\n\nIf a class is named default it will be applied to all nodes. Specific styles and classes should be defined afterwards to override the applied default styling.\n\n```\nclassDef default fill:#f9f,stroke:#333,stroke-width:4px;\n```\n\n```mermaid-example\nclassDiagram\n  class Animal:::pink\n  class Mineral\n\n  classDef default fill:#f96,color:red\n  classDef pink color:#f9f\n```\n\n```mermaid\nclassDiagram\n  class Animal:::pink\n  class Mineral\n\n  classDef default fill:#f96,color:red\n  classDef pink color:#f9f\n```\n\n### CSS Classes\n\nIt is also possible to predefine classes in CSS styles that can be applied from the graph definition as in the example\nbelow:\n\n**Example style**\n\n```html\n<style>\n  .styleClass > * > g {\n    fill: #ff0000;\n    stroke: #ffff00;\n    stroke-width: 4px;\n  }\n</style>\n```\n\n**Example definition**\n\n```mermaid-example\nclassDiagram\n    class Animal:::styleClass\n```\n\n```mermaid\nclassDiagram\n    class Animal:::styleClass\n```\n\n> cssClasses cannot be added using this shorthand method at the same time as a relation statement.\n\n## Configuration\n\n### Members Box\n\nIt is possible to hide the empty members box of a class node.\n\nThis is done by changing the **hideEmptyMembersBox** value of the class diagram configuration. For more information on how to edit the Mermaid configuration see the [configuration page.](https://mermaid.js.org/config/configuration.html)\n\n### Possible configuration parameters:\n\n| Parameter           | Description                                                  | Default value |\n| ------------------- | ------------------------------------------------------------ | ------------- |\n| hideEmptyMembersBox | Hides the empty members box of a class node when set to true | false         |\n\n```mermaid-example\n---\n  config:\n    class:\n      hideEmptyMembersBox: true\n---\nclassDiagram\n  class Duck\n```\n\n```mermaid\n---\n  config:\n    class:\n      hideEmptyMembersBox: true\n---\nclassDiagram\n  class Duck\n```\n';
-const __vite_glob_0_18 = '> **Warning**\n>\n> ## THIS IS AN AUTOGENERATED FILE. DO NOT EDIT.\n>\n> ## Please edit the corresponding file in [/packages/mermaid/src/docs/config/configuration.md](../../packages/mermaid/src/docs/config/configuration.md).\n\n# Configuration\n\nWhen mermaid starts, configuration is extracted to determine a configuration to be used for a diagram. There are 3 sources for configuration:\n\n- The default configuration\n- Overrides at the site level are set by the initialize call, and will be applied to all diagrams in the site/app. The term for this is the **siteConfig**.\n- Frontmatter (v10.5.0+) - diagram authors can update selected configuration parameters in the frontmatter of the diagram. These are applied to the render config.\n- Directives (Deprecated by Frontmatter) - diagram authors can update selected configuration parameters directly in the diagram code via directives. These are applied to the render config.\n\n**The render config** is configuration that is used when rendering by applying these configurations.\n\n## Frontmatter config\n\nThe entire mermaid configuration (except the secure configs) can be overridden by the diagram author in the frontmatter of the diagram. The frontmatter is a YAML block at the top of the diagram.\n\n```mermaid-example\n---\ntitle: Hello Title\nconfig:\n  theme: base\n  themeVariables:\n    primaryColor: "#00ff00"\n---\nflowchart\n	Hello --> World\n\n```\n\n```mermaid\n---\ntitle: Hello Title\nconfig:\n  theme: base\n  themeVariables:\n    primaryColor: "#00ff00"\n---\nflowchart\n	Hello --> World\n\n```\n\n## Theme configuration\n\n## Starting mermaid\n\n```mermaid-example\nsequenceDiagram\n	Site->>mermaid: initialize\n	Site->>mermaid: content loaded\n	mermaid->>mermaidAPI: init\n```\n\n```mermaid\nsequenceDiagram\n	Site->>mermaid: initialize\n	Site->>mermaid: content loaded\n	mermaid->>mermaidAPI: init\n```\n\n## Initialize\n\nThe initialize call is applied **only once**. It is called by the site integrator in order to override the default configuration at a site level.\n\n## configApi.reset\n\nThis method resets the configuration for a diagram to the overall site configuration, which is the configuration provided by the site integrator. Before each rendering of a diagram, reset is called at the very beginning.\n';
-const __vite_glob_0_19 = '> **Warning**\n>\n> ## THIS IS AN AUTOGENERATED FILE. DO NOT EDIT.\n>\n> ## Please edit the corresponding file in [/packages/mermaid/src/docs/config/directives.md](../../packages/mermaid/src/docs/config/directives.md).\n\n# Directives\n\n> **Warning**\n> Directives are deprecated from v10.5.0. Please use the `config` key in frontmatter to pass configuration. See [Configuration](./configuration.md) for more details.\n\n## Directives\n\nDirectives give a diagram author the capability to alter the appearance of a diagram before rendering by changing the applied configuration.\n\nThe significance of having directives is that you have them available while writing the diagram, and can modify the default global and diagram-specific configurations. So, directives are applied on top of the default configuration. The beauty of directives is that you can use them to alter configuration settings for a specific diagram, i.e. at an individual level.\n\nWhile directives allow you to change most of the default configuration settings, there are some that are not available, for security reasons. Also, you have the _option to define the set of configurations_ that you wish to allow diagram authors to override with directives.\n\n## Types of Directives options\n\nMermaid basically supports two types of configuration options to be overridden by directives.\n\n1. _General/Top Level configurations_ : These are the configurations that are available and applied to all the diagram. **Some of the most important top-level** configurations are:\n   - theme\n   - fontFamily\n   - logLevel\n   - securityLevel\n   - startOnLoad\n   - secure\n\n2. _Diagram-specific configurations_ : These are the configurations that are available and applied to a specific diagram. For each diagram there are specific configuration that will alter how that particular diagram looks and behaves.\n   For example, `mirrorActors` is a configuration that is specific to the `SequenceDiagram` and alters whether the actors are mirrored or not. So this config is available only for the `SequenceDiagram` type.\n\n**NOTE:** Not all configuration options are listed here. To get hold of all the configuration options, please refer to the [defaultConfig.ts](https://github.com/mermaid-js/mermaid/blob/develop/packages/mermaid/src/defaultConfig.ts) in the source code.\n\n> **Note**\n> We plan to publish a complete list of top-level configurations & diagram-specific configurations with their possible values in the docs soon.\n\n## Declaring directives\n\nNow that we have defined the types of configurations that are available, we can learn how to declare directives.\nA directive always starts and ends with `%%` signs with directive text in between, like `%% {directive_text} %%`.\n\nHere the structure of a directive text is like a nested key-value pair map or a JSON object with root being _init_. Where all the general configurations are defined in the top level, and all the diagram specific configurations are defined one level deeper with diagram type as key/root for that section.\n\nThe following code snippet shows the structure of a directive:\n\n```\n%%{\n  init: {\n    "theme": "dark",\n    "fontFamily": "monospace",\n    "logLevel": "info",\n    "htmlLabels": true,\n    "flowchart": {\n      "curve": "linear"\n    },\n    "sequence": {\n      "mirrorActors": true\n    }\n  }\n}%%\n```\n\nYou can also define the directives in a single line, like this:\n\n```\n%%{init: { **insert configuration options here** } }%%\n```\n\nFor example, the following code snippet:\n\n```\n%%{init: { "sequence": { "mirrorActors":false }}}%%\n```\n\n**Notes:**\nThe JSON object that is passed as {**argument**} must be valid key value pairs and encased in quotation marks or it will be ignored.\nValid Key Value pairs can be found in config.\n\nExample with a simple graph:\n\n```mermaid-example\n%%{init: { \'logLevel\': \'debug\', \'theme\': \'dark\' } }%%\ngraph LR\nA-->B\n```\n\n```mermaid\n%%{init: { \'logLevel\': \'debug\', \'theme\': \'dark\' } }%%\ngraph LR\nA-->B\n```\n\nHere the directive declaration will set the `logLevel` to `debug` and the `theme` to `dark` for a rendered mermaid diagram, changing the appearance of the diagram itself.\n\nNote: You can use \'init\' or \'initialize\' as both are acceptable as init directives. Also note that `%%init%%` and `%%initialize%%` directives will be grouped together after they are parsed.\n\n```mermaid-example\n%%{init: { \'logLevel\': \'debug\', \'theme\': \'forest\' } }%%\n%%{initialize: { \'logLevel\': \'fatal\', "theme":\'dark\', \'startOnLoad\': true } }%%\n...\n```\n\n```mermaid\n%%{init: { \'logLevel\': \'debug\', \'theme\': \'forest\' } }%%\n%%{initialize: { \'logLevel\': \'fatal\', "theme":\'dark\', \'startOnLoad\': true } }%%\n...\n```\n\nFor example, parsing the above generates a single `%%init%%` JSON object below, combining the two directives and carrying over the last value given for `loglevel`:\n\n```json\n{\n  "logLevel": "fatal",\n  "theme": "dark",\n  "startOnLoad": true\n}\n```\n\nThis will then be sent to `mermaid.initialize(...)` for rendering.\n\n## Directive Examples\n\nNow that the concept of directives has been explained, let us see some more examples of directive usage:\n\n### Changing theme via directive\n\nThe following code snippet changes `theme` to `forest`:\n\n`%%{init: { "theme": "forest" } }%%`\n\nPossible theme values are: `default`, `base`, `dark`, `forest` and `neutral`.\nDefault Value is `default`.\n\nExample:\n\n```mermaid-example\n%%{init: { "theme": "forest" } }%%\ngraph TD\nA(Forest) --> B[/Another/]\nA --> C[End]\n  subgraph section\n  B\n  C\n  end\n\n```\n\n```mermaid\n%%{init: { "theme": "forest" } }%%\ngraph TD\nA(Forest) --> B[/Another/]\nA --> C[End]\n  subgraph section\n  B\n  C\n  end\n\n```\n\n### Changing fontFamily via directive\n\nThe following code snippet changes fontFamily to Trebuchet MS, Verdana, Arial, Sans-Serif:\n\n`%%{init: { "fontFamily": "Trebuchet MS, Verdana, Arial, Sans-Serif" } }%%`\n\nExample:\n\n```mermaid-example\n%%{init: { "fontFamily": "Trebuchet MS, Verdana, Arial, Sans-Serif" } }%%\ngraph TD\nA(Forest) --> B[/Another/]\nA --> C[End]\n  subgraph section\n  B\n  C\n  end\n\n```\n\n```mermaid\n%%{init: { "fontFamily": "Trebuchet MS, Verdana, Arial, Sans-Serif" } }%%\ngraph TD\nA(Forest) --> B[/Another/]\nA --> C[End]\n  subgraph section\n  B\n  C\n  end\n\n```\n\n### Changing logLevel via directive\n\nThe following code snippet changes `logLevel` to `2`:\n\n`%%{init: { "logLevel": 2 } }%%`\n\nPossible `logLevel` values are:\n\n- `1` for _debug_,\n- `2` for _info_\n- `3` for _warn_\n- `4` for _error_\n- `5` for _only fatal errors_\n\nDefault Value is `5`.\n\nExample:\n\n```mermaid-example\n%%{init: { "logLevel": 2 } }%%\ngraph TD\nA(Forest) --> B[/Another/]\nA --> C[End]\n  subgraph section\n  B\n  C\n  end\n```\n\n```mermaid\n%%{init: { "logLevel": 2 } }%%\ngraph TD\nA(Forest) --> B[/Another/]\nA --> C[End]\n  subgraph section\n  B\n  C\n  end\n```\n\n### Changing flowchart config via directive\n\nSome common flowchart configurations are:\n\n- ~~_htmlLabels_~~: Deprecated, [prefer setting this at the root level](/config/schema-docs/config#htmllabels).\n- _curve_: linear/curve\n- _diagramPadding_: number\n- _useMaxWidth_: number\n\nFor a complete list of flowchart configurations, see [defaultConfig.ts](https://github.com/mermaid-js/mermaid/blob/develop/packages/mermaid/src/defaultConfig.ts) in the source code.\n_Soon we plan to publish a complete list of all diagram-specific configurations updated in the docs._\n\nThe following code snippet changes flowchart config:\n\n```\n%%{init: { "htmlLabels": true, "flowchart": { "curve": "linear" } } }%%\n```\n\nHere we are overriding only the flowchart config, and not the general config, setting `htmlLabels` to `true` and `curve` to `linear`.\n\n> **Warning**\n> **Deprecated:** `flowchart.htmlLabels` has been deprecated from (v11.12.3+). Use the global `htmlLabels` configuration instead. For example, instead of `"flowchart": { "htmlLabels": true }`, use `"htmlLabels": true` at the top level.\n\n```mermaid-example\n%%{init: { "flowchart": { "htmlLabels": true, "curve": "linear" } } }%%\ngraph TD\nA(Forest) --> B[/Another/]\nA --> C[End]\n  subgraph section\n  B\n  C\n  end\n```\n\n```mermaid\n%%{init: { "flowchart": { "htmlLabels": true, "curve": "linear" } } }%%\ngraph TD\nA(Forest) --> B[/Another/]\nA --> C[End]\n  subgraph section\n  B\n  C\n  end\n```\n\n### Changing Sequence diagram config via directive\n\nSome common sequence diagram configurations are:\n\n- _width_: number\n- _height_: number\n- _messageAlign_: left, center, right\n- _mirrorActors_: boolean\n- _useMaxWidth_: boolean\n- _rightAngles_: boolean\n- _showSequenceNumbers_: boolean\n- _wrap_: boolean\n\nFor a complete list of sequence diagram configurations, see [defaultConfig.ts](https://github.com/mermaid-js/mermaid/blob/develop/packages/mermaid/src/defaultConfig.ts) in the source code.\n_Soon we plan to publish a complete list of all diagram-specific configurations updated in the docs._\n\nSo, `wrap` by default has a value of `false` for sequence diagrams.\n\nLet us see an example:\n\n```mermaid-example\nsequenceDiagram\n\nAlice->Bob: Hello Bob, how are you?\nBob->Alice: Fine, how did your mother like the book I suggested? And did you catch the new book about alien invasion?\nAlice->Bob: Good.\nBob->Alice: Cool\n```\n\n```mermaid\nsequenceDiagram\n\nAlice->Bob: Hello Bob, how are you?\nBob->Alice: Fine, how did your mother like the book I suggested? And did you catch the new book about alien invasion?\nAlice->Bob: Good.\nBob->Alice: Cool\n```\n\nNow let us enable wrap for sequence diagrams.\n\nThe following code snippet changes sequence diagram config for `wrap` to `true`:\n\n`%%{init: { "sequence": { "wrap": true} } }%%`\n\nBy applying that snippet to the diagram above, `wrap` will be enabled:\n\n```mermaid-example\n%%{init: { "sequence": { "wrap": true, "width":300 } } }%%\nsequenceDiagram\nAlice->Bob: Hello Bob, how are you?\nBob->Alice: Fine, how did your mother like the book I suggested? And did you catch the new book about alien invasion?\nAlice->Bob: Good.\nBob->Alice: Cool\n```\n\n```mermaid\n%%{init: { "sequence": { "wrap": true, "width":300 } } }%%\nsequenceDiagram\nAlice->Bob: Hello Bob, how are you?\nBob->Alice: Fine, how did your mother like the book I suggested? And did you catch the new book about alien invasion?\nAlice->Bob: Good.\nBob->Alice: Cool\n```\n';
-const __vite_glob_0_20 = "> **Warning**\n>\n> ## THIS IS AN AUTOGENERATED FILE. DO NOT EDIT.\n>\n> ## Please edit the corresponding file in [/packages/mermaid/src/docs/config/layouts.md](../../packages/mermaid/src/docs/config/layouts.md).\n\n# Layouts\n\nThis page lists the available layout algorithms supported in Mermaid diagrams.\n\n## Supported Layouts\n\n- **elk**: [ELK (Eclipse Layout Kernel)](https://www.eclipse.org/elk/)\n- **tidy-tree**: Tidy tree layout for hierarchical diagrams [Tidy Tree Configuration](/config/tidy-tree)\n- **cose-bilkent**: Cose Bilkent layout for force-directed graphs\n- **dagre**: Dagre layout for layered graphs\n\n## How to Use\n\nYou can specify the layout in your diagram's YAML config or initialization options. For example:\n\n```mermaid-example\n---\nconfig:\n  layout: elk\n---\ngraph TD;\n  A-->B;\n  B-->C;\n```\n\n```mermaid\n---\nconfig:\n  layout: elk\n---\ngraph TD;\n  A-->B;\n  B-->C;\n```\n";
-const __vite_glob_0_21 = '> **Warning**\n>\n> ## THIS IS AN AUTOGENERATED FILE. DO NOT EDIT.\n>\n> ## Please edit the corresponding file in [/packages/mermaid/src/docs/config/math.md](../../packages/mermaid/src/docs/config/math.md).\n\n# Math Configuration (v10.9.0+)\n\nMermaid supports rendering mathematical expressions through the [KaTeX](https://katex.org/) typesetter.\n\n## Usage\n\nTo render math within a diagram, surround the mathematical expression with the `$$` delimiter.\n\nNote that at the moment, the only supported diagrams are below:\n\n### Flowcharts\n\n```mermaid-example\n graph LR\n      A["$$x^2$$"] -->|"$$\\sqrt{x+3}$$"| B("$$\\frac{1}{2}$$")\n      A -->|"$$\\overbrace{a+b+c}^{\\text{note}}$$"| C("$$\\pi r^2$$")\n      B --> D("$$x = \\begin{cases} a &\\text{if } b \\\\ c &\\text{if } d \\end{cases}$$")\n      C --> E("$$x(t)=c_1\\begin{bmatrix}-\\cos{t}+\\sin{t}\\\\ 2\\cos{t} \\end{bmatrix}e^{2t}$$")\n```\n\n```mermaid\n graph LR\n      A["$$x^2$$"] -->|"$$\\sqrt{x+3}$$"| B("$$\\frac{1}{2}$$")\n      A -->|"$$\\overbrace{a+b+c}^{\\text{note}}$$"| C("$$\\pi r^2$$")\n      B --> D("$$x = \\begin{cases} a &\\text{if } b \\\\ c &\\text{if } d \\end{cases}$$")\n      C --> E("$$x(t)=c_1\\begin{bmatrix}-\\cos{t}+\\sin{t}\\\\ 2\\cos{t} \\end{bmatrix}e^{2t}$$")\n```\n\n### Sequence\n\n```mermaid-example\nsequenceDiagram\n    autonumber\n    participant 1 as $$\\alpha$$\n    participant 2 as $$\\beta$$\n    1->>2: Solve: $$\\sqrt{2+2}$$\n    2-->>1: Answer: $$2$$\n    Note right of 2: $$\\sqrt{2+2}=\\sqrt{4}=2$$\n```\n\n```mermaid\nsequenceDiagram\n    autonumber\n    participant 1 as $$\\alpha$$\n    participant 2 as $$\\beta$$\n    1->>2: Solve: $$\\sqrt{2+2}$$\n    2-->>1: Answer: $$2$$\n    Note right of 2: $$\\sqrt{2+2}=\\sqrt{4}=2$$\n```\n\n## Legacy Support\n\nBy default, MathML is used for rendering mathematical expressions. If you have users on [unsupported browsers](https://caniuse.com/?search=mathml), `legacyMathML` can be set in the config to fall back to CSS rendering. Note that **you must provide KaTeX\'s stylesheets on your own** as they do not come bundled with Mermaid.\n\nExample with legacy mode enabled (the latest version of KaTeX\'s stylesheet can be found on their [docs](https://katex.org/docs/browser.html)):\n\n```html\n<!doctype html>\n<!-- KaTeX requires the use of the HTML5 doctype. Without it, KaTeX may not render properly -->\n<html lang="en">\n  <head>\n    <!-- Please ensure the stylesheet\'s version matches with the KaTeX version in your package-lock -->\n    <link\n      rel="stylesheet"\n      href="https://cdn.jsdelivr.net/npm/katex@{version_number}/dist/katex.min.css"\n      integrity="sha384-{hash}"\n      crossorigin="anonymous"\n    />\n  </head>\n\n  <body>\n    <script type="module">\n      import mermaid from \'./mermaid.esm.mjs\';\n      mermaid.initialize({\n        legacyMathML: true,\n      });\n    <\/script>\n  </body>\n</html>\n```\n\n## Handling Rendering Differences\n\nDue to differences between default fonts across operating systems and browser\'s MathML implementations, inconsistent results can be seen across platforms. If having consistent results are important, or the most optimal rendered results are desired, `forceLegacyMathML` can be enabled in the config.\n\nThis option will always use KaTeX\'s stylesheet instead of only when MathML is not supported (as with `legacyMathML`). Note that only `forceLegacyMathML` needs to be set.\n\nIf including KaTeX\'s stylesheet is not a concern, enabling this option is recommended to avoid scenarios where no MathML implementation within a browser provides the desired output (as seen below).\n\n![Image showing differences between Browsers](img/mathMLDifferences.png)\n';
-const __vite_glob_0_22 = "> **Warning**\n>\n> ## THIS IS AN AUTOGENERATED FILE. DO NOT EDIT.\n>\n> ## Please edit the corresponding file in [/packages/mermaid/src/docs/config/theming.md](../../packages/mermaid/src/docs/config/theming.md).\n\n# Theme Configuration\n\nDynamic and integrated theme configuration was introduced in Mermaid version 8.7.0.\n\nThemes can now be customized at the site-wide level, or on individual Mermaid diagrams. For site-wide theme customization, the `initialize` call is used. For diagram specific customization, frontmatter config is used.\n\n## Available Themes\n\n1. [**default**](https://github.com/mermaid-js/mermaid/blob/develop/packages/mermaid/src/themes/theme-default.js) - This is the default theme for all diagrams.\n\n2. [**neutral**](https://github.com/mermaid-js/mermaid/blob/develop/packages/mermaid/src/themes/theme-neutral.js) - This theme is great for black and white documents that will be printed.\n\n3. [**dark**](https://github.com/mermaid-js/mermaid/blob/develop/packages/mermaid/src/themes/theme-dark.js) - This theme goes well with dark-colored elements or dark-mode. To use the dark theme (which changes the theme of the schema itself) with dark-mode (which sets the background), set `darkMode` to `true` in your config.\n\n4. [**forest**](https://github.com/mermaid-js/mermaid/blob/develop/packages/mermaid/src/themes/theme-forest.js) - This theme contains shades of green.\n\n5. [**base**](https://github.com/mermaid-js/mermaid/blob/develop/packages/mermaid/src/themes/theme-base.js) - This is the only theme that can be modified. Use this theme as the base for customizations.\n\n## Site-wide Theme\n\nTo customize themes site-wide, call the `initialize` method on the `mermaid`.\n\nExample of `initialize` call setting `theme` to `base`:\n\n```javascript\nmermaid.initialize({\n  securityLevel: 'loose',\n  theme: 'base',\n});\n```\n\n## Diagram-specific Themes\n\nTo customize the theme of an individual diagram, use frontmatter config.\n\nExample of frontmatter config setting the `theme` to `forest`:\n\n```mermaid-example\n---\nconfig:\n  theme: 'forest'\n---\n  graph TD\n    a --> b\n```\n\n```mermaid\n---\nconfig:\n  theme: 'forest'\n---\n  graph TD\n    a --> b\n```\n\n> **Reminder**: the only theme that can be customized is the `base` theme. The following section covers how to use `themeVariables` for customizations.\n\n## Customizing Themes with `themeVariables`\n\nTo make a custom theme, modify `themeVariables` via frontmatter config.\n\nYou will need to use the [base](#available-themes) theme as it is the only modifiable theme.\n\n| Parameter      | Description                        | Type   | Properties                                                                          |\n| -------------- | ---------------------------------- | ------ | ----------------------------------------------------------------------------------- |\n| themeVariables | Modifiable with frontmatter config | Object | `primaryColor`, `primaryTextColor`, `lineColor` ([see full list](#theme-variables)) |\n\nExample of modifying `themeVariables` using frontmatter config:\n\n```mermaid-example\n---\nconfig:\n  theme: 'base'\n  themeVariables:\n    primaryColor: '#BB2528'\n    primaryTextColor: '#fff'\n    primaryBorderColor: '#7C0000'\n    lineColor: '#F8B229'\n    secondaryColor: '#006100'\n    tertiaryColor: '#fff'\n---\n        graph TD\n          A[Christmas] -->|Get money| B(Go shopping)\n          B --> C{Let me think}\n          B --> G[/Another/]\n          C ==>|One| D[Laptop]\n          C -->|Two| E[iPhone]\n          C -->|Three| F[fa:fa-car Car]\n          subgraph section\n            C\n            D\n            E\n            F\n            G\n          end\n```\n\n```mermaid\n---\nconfig:\n  theme: 'base'\n  themeVariables:\n    primaryColor: '#BB2528'\n    primaryTextColor: '#fff'\n    primaryBorderColor: '#7C0000'\n    lineColor: '#F8B229'\n    secondaryColor: '#006100'\n    tertiaryColor: '#fff'\n---\n        graph TD\n          A[Christmas] -->|Get money| B(Go shopping)\n          B --> C{Let me think}\n          B --> G[/Another/]\n          C ==>|One| D[Laptop]\n          C -->|Two| E[iPhone]\n          C -->|Three| F[fa:fa-car Car]\n          subgraph section\n            C\n            D\n            E\n            F\n            G\n          end\n```\n\n## Color and Color Calculation\n\nTo ensure diagram readability, the default value of certain variables is calculated or derived from other variables. For example, `primaryBorderColor` is derived from the `primaryColor` variable. So if the `primaryColor` variable is customized, Mermaid will adjust `primaryBorderColor` automatically. Adjustments can mean a color inversion, a hue change, a darkening/lightening by 10%, etc.\n\nThe theming engine will only recognize hex colors and not color names. So, the value `#ff0000` will work, but `red` will not.\n\n## Theme Variables\n\n| Variable             | Default value                      | Description                                                                                                                      |\n| -------------------- | ---------------------------------- | -------------------------------------------------------------------------------------------------------------------------------- |\n| darkMode             | false                              | Affects how derived colors are calculated. Set value to `true` for dark mode.                                                    |\n| background           | #f4f4f4                            | Used to calculate color for items that should either be background colored or contrasting to the background                      |\n| fontFamily           | trebuchet ms, verdana, arial       | Font family for diagram text                                                                                                     |\n| fontSize             | 16px                               | Font size in pixels                                                                                                              |\n| primaryColor         | #fff4dd                            | Color to be used as background in nodes, other colors will be derived from this                                                  |\n| primaryTextColor     | calculated from darkMode #ddd/#333 | Color to be used as text color in nodes using `primaryColor`                                                                     |\n| secondaryColor       | calculated from primaryColor       |                                                                                                                                  |\n| primaryBorderColor   | calculated from primaryColor       | Color to be used as border in nodes using `primaryColor`                                                                         |\n| secondaryBorderColor | calculated from secondaryColor     | Color to be used as border in nodes using `secondaryColor`                                                                       |\n| secondaryTextColor   | calculated from secondaryColor     | Color to be used as text color in nodes using `secondaryColor`                                                                   |\n| tertiaryColor        | calculated from primaryColor       |                                                                                                                                  |\n| tertiaryBorderColor  | calculated from tertiaryColor      | Color to be used as border in nodes using `tertiaryColor`                                                                        |\n| tertiaryTextColor    | calculated from tertiaryColor      | Color to be used as text color in nodes using `tertiaryColor`                                                                    |\n| noteBkgColor         | #fff5ad                            | Color used as background in notes                                                                                                |\n| noteTextColor        | #333                               | Text color in note rectangles                                                                                                    |\n| noteBorderColor      | calculated from noteBkgColor       | Border color in note rectangles                                                                                                  |\n| lineColor            | calculated from background         |                                                                                                                                  |\n| textColor            | calculated from primaryTextColor   | Text in diagram over the background for instance text on labels and on signals in sequence diagram or the title in Gantt diagram |\n| mainBkg              | calculated from primaryColor       | Background in flowchart objects like rects/circles, class diagram classes, sequence diagram etc                                  |\n| errorBkgColor        | tertiaryColor                      | Color for syntax error message                                                                                                   |\n| errorTextColor       | tertiaryTextColor                  | Color for syntax error message                                                                                                   |\n\n## Flowchart Variables\n\n| Variable            | Default value                  | Description                 |\n| ------------------- | ------------------------------ | --------------------------- |\n| nodeBorder          | primaryBorderColor             | Node Border Color           |\n| clusterBkg          | tertiaryColor                  | Background in subgraphs     |\n| clusterBorder       | tertiaryBorderColor            | Cluster Border Color        |\n| defaultLinkColor    | lineColor                      | Link Color                  |\n| titleColor          | tertiaryTextColor              | Title Color                 |\n| edgeLabelBackground | calculated from secondaryColor |                             |\n| nodeTextColor       | primaryTextColor               | Color for text inside Nodes |\n\n## Sequence Diagram Variables\n\n| Variable              | Default value                  | Description                 |\n| --------------------- | ------------------------------ | --------------------------- |\n| actorBkg              | mainBkg                        | Actor Background Color      |\n| actorBorder           | primaryBorderColor             | Actor Border Color          |\n| actorTextColor        | primaryTextColor               | Actor Text Color            |\n| actorLineColor        | actorBorder                    | Actor Line Color            |\n| signalColor           | textColor                      | Signal Color                |\n| signalTextColor       | textColor                      | Signal Text Color           |\n| labelBoxBkgColor      | actorBkg                       | Label Box Background Color  |\n| labelBoxBorderColor   | actorBorder                    | Label Box Border Color      |\n| labelTextColor        | actorTextColor                 | Label Text Color            |\n| loopTextColor         | actorTextColor                 | Loop Text Color             |\n| activationBorderColor | calculated from secondaryColor | Activation Border Color     |\n| activationBkgColor    | secondaryColor                 | Activation Background Color |\n| sequenceNumberColor   | calculated from lineColor      | Sequence Number Color       |\n\n## Pie Diagram Variables\n\n| Variable            | Default value                  | Description                                |\n| ------------------- | ------------------------------ | ------------------------------------------ |\n| pie1                | primaryColor                   | Fill for 1st section in pie diagram        |\n| pie2                | secondaryColor                 | Fill for 2nd section in pie diagram        |\n| pie3                | calculated from tertiary       | Fill for 3rd section in pie diagram        |\n| pie4                | calculated from primaryColor   | Fill for 4th section in pie diagram        |\n| pie5                | calculated from secondaryColor | Fill for 5th section in pie diagram        |\n| pie6                | calculated from tertiaryColor  | Fill for 6th section in pie diagram        |\n| pie7                | calculated from primaryColor   | Fill for 7th section in pie diagram        |\n| pie8                | calculated from primaryColor   | Fill for 8th section in pie diagram        |\n| pie9                | calculated from primaryColor   | Fill for 9th section in pie diagram        |\n| pie10               | calculated from primaryColor   | Fill for 10th section in pie diagram       |\n| pie11               | calculated from primaryColor   | Fill for 11th section in pie diagram       |\n| pie12               | calculated from primaryColor   | Fill for 12th section in pie diagram       |\n| pieTitleTextSize    | 25px                           | Title text size                            |\n| pieTitleTextColor   | taskTextDarkColor              | Title text color                           |\n| pieSectionTextSize  | 17px                           | Text size of individual section labels     |\n| pieSectionTextColor | textColor                      | Text color of individual section labels    |\n| pieLegendTextSize   | 17px                           | Text size of labels in diagram legend      |\n| pieLegendTextColor  | taskTextDarkColor              | Text color of labels in diagram legend     |\n| pieStrokeColor      | black                          | Border color of individual pie sections    |\n| pieStrokeWidth      | 2px                            | Border width of individual pie sections    |\n| pieOuterStrokeWidth | 2px                            | Border width of pie diagram's outer circle |\n| pieOuterStrokeColor | black                          | Border color of pie diagram's outer circle |\n| pieOpacity          | 0.7                            | Opacity of individual pie sections         |\n\n## State Colors\n\n| Variable      | Default value    | Description                                  |\n| ------------- | ---------------- | -------------------------------------------- |\n| labelColor    | primaryTextColor |                                              |\n| altBackground | tertiaryColor    | Used for background in deep composite states |\n\n## Class Colors\n\n| Variable  | Default value | Description                     |\n| --------- | ------------- | ------------------------------- |\n| classText | textColor     | Color of Text in class diagrams |\n\n## User Journey Colors\n\n| Variable  | Default value                  | Description                             |\n| --------- | ------------------------------ | --------------------------------------- |\n| fillType0 | primaryColor                   | Fill for 1st section in journey diagram |\n| fillType1 | secondaryColor                 | Fill for 2nd section in journey diagram |\n| fillType2 | calculated from primaryColor   | Fill for 3rd section in journey diagram |\n| fillType3 | calculated from secondaryColor | Fill for 4th section in journey diagram |\n| fillType4 | calculated from primaryColor   | Fill for 5th section in journey diagram |\n| fillType5 | calculated from secondaryColor | Fill for 6th section in journey diagram |\n| fillType6 | calculated from primaryColor   | Fill for 7th section in journey diagram |\n| fillType7 | calculated from secondaryColor | Fill for 8th section in journey diagram |\n";
-const __vite_glob_0_23 = "> **Warning**\n>\n> ## THIS IS AN AUTOGENERATED FILE. DO NOT EDIT.\n>\n> ## Please edit the corresponding file in [/packages/mermaid/src/docs/config/tidy-tree.md](../../packages/mermaid/src/docs/config/tidy-tree.md).\n\n# Tidy-tree Layout\n\nThe **tidy-tree** layout arranges nodes in a hierarchical, tree-like structure. It is especially useful for diagrams where parent-child relationships are important, such as mindmaps.\n\n## Features\n\n- Organizes nodes in a tidy, non-overlapping tree\n- Ideal for mindmaps and hierarchical data\n- Automatically adjusts spacing for readability\n\n## Example Usage\n\n```mermaid-example\n---\nconfig:\n  layout: tidy-tree\n---\nmindmap\nroot((mindmap is a long thing))\n  A\n  B\n  C\n  D\n```\n\n```mermaid\n---\nconfig:\n  layout: tidy-tree\n---\nmindmap\nroot((mindmap is a long thing))\n  A\n  B\n  C\n  D\n```\n\n```mermaid-example\n---\nconfig:\n  layout: tidy-tree\n---\nmindmap\nroot((mindmap))\n    Origins\n      Long history\n      ::icon(fa fa-book)\n      Popularisation\n        British popular psychology author Tony Buzan\n    Research\n      On effectiveness<br/>and features\n      On Automatic creation\n        Uses\n            Creative techniques\n            Strategic planning\n            Argument mapping\n```\n\n```mermaid\n---\nconfig:\n  layout: tidy-tree\n---\nmindmap\nroot((mindmap))\n    Origins\n      Long history\n      ::icon(fa fa-book)\n      Popularisation\n        British popular psychology author Tony Buzan\n    Research\n      On effectiveness<br/>and features\n      On Automatic creation\n        Uses\n            Creative techniques\n            Strategic planning\n            Argument mapping\n```\n\n## Note\n\n- Currently, tidy-tree is primarily supported for mindmap diagrams.\n";
-const __vite_glob_0_24 = '> **Warning**\n>\n> ## THIS IS AN AUTOGENERATED FILE. DO NOT EDIT.\n>\n> ## Please edit the corresponding file in [/packages/mermaid/src/docs/syntax/entityRelationshipDiagram.md](../../packages/mermaid/src/docs/syntax/entityRelationshipDiagram.md).\n\n# Entity Relationship Diagrams\n\n> An entity–relationship model (or ER model) describes interrelated things of interest in a specific domain of knowledge. A basic ER model is composed of entity types (which classify the things of interest) and specifies relationships that can exist between entities (instances of those entity types) [Wikipedia](https://en.wikipedia.org/wiki/Entity%E2%80%93relationship_model).\n\nNote that practitioners of ER modelling almost always refer to _entity types_ simply as _entities_. For example the `CUSTOMER` entity _type_ would be referred to simply as the `CUSTOMER` entity. This is so common it would be inadvisable to do anything else, but technically an entity is an abstract _instance_ of an entity type, and this is what an ER diagram shows - abstract instances, and the relationships between them. This is why entities are always named using singular nouns.\n\nMermaid can render ER diagrams\n\n```mermaid-example\n---\ntitle: Order example\n---\nerDiagram\n    CUSTOMER ||--o{ ORDER : places\n    ORDER ||--|{ LINE-ITEM : contains\n    CUSTOMER }|..|{ DELIVERY-ADDRESS : uses\n```\n\n```mermaid\n---\ntitle: Order example\n---\nerDiagram\n    CUSTOMER ||--o{ ORDER : places\n    ORDER ||--|{ LINE-ITEM : contains\n    CUSTOMER }|..|{ DELIVERY-ADDRESS : uses\n```\n\nEntity names are often capitalised, although there is no accepted standard on this, and it is not required in Mermaid.\n\nRelationships between entities are represented by lines with end markers representing cardinality. Mermaid uses the most popular crow\'s foot notation. The crow\'s foot intuitively conveys the possibility of many instances of the entity that it connects to.\n\nER diagrams can be used for various purposes, ranging from abstract logical models devoid of any implementation details, through to physical models of relational database tables. It can be useful to include attribute definitions on ER diagrams to aid comprehension of the purpose and meaning of entities. These do not necessarily need to be exhaustive; often a small subset of attributes is enough. Mermaid allows them to be defined in terms of their _type_ and _name_.\n\n```mermaid-example\nerDiagram\n    CUSTOMER ||--o{ ORDER : places\n    CUSTOMER {\n        string name\n        string custNumber\n        string sector\n    }\n    ORDER ||--|{ LINE-ITEM : contains\n    ORDER {\n        int orderNumber\n        string deliveryAddress\n    }\n    LINE-ITEM {\n        string productCode\n        int quantity\n        float pricePerUnit\n    }\n```\n\n```mermaid\nerDiagram\n    CUSTOMER ||--o{ ORDER : places\n    CUSTOMER {\n        string name\n        string custNumber\n        string sector\n    }\n    ORDER ||--|{ LINE-ITEM : contains\n    ORDER {\n        int orderNumber\n        string deliveryAddress\n    }\n    LINE-ITEM {\n        string productCode\n        int quantity\n        float pricePerUnit\n    }\n```\n\nWhen including attributes on ER diagrams, you must decide whether to include foreign keys as attributes. This probably depends on how closely you are trying to represent relational table structures. If your diagram is a _logical_ model which is not meant to imply a relational implementation, then it is better to leave these out because the associative relationships already convey the way that entities are associated. For example, a JSON data structure can implement a one-to-many relationship without the need for foreign key properties, using arrays. Similarly an object-oriented programming language may use pointers or references to collections. Even for models that are intended for relational implementation, you might decide that inclusion of foreign key attributes duplicates information already portrayed by the relationships, and does not add meaning to entities. Ultimately, it\'s your choice.\n\n## Syntax\n\n### Entities and Relationships\n\nMermaid syntax for ER diagrams is compatible with PlantUML, with an extension to label the relationship. Each statement consists of the following parts:\n\n```\n    <first-entity> [<relationship> <second-entity> : <relationship-label>]\n```\n\nWhere:\n\n- `first-entity` is the name of an entity. Names support any unicode characters and can include spaces if surrounded by double quotes (e.g. "name with space").\n- `relationship` describes the way that both entities inter-relate. See below.\n- `second-entity` is the name of the other entity.\n- `relationship-label` describes the relationship from the perspective of the first entity.\n\nFor example:\n\n```\n    PROPERTY ||--|{ ROOM : contains\n```\n\nThis statement can be read as _a property contains one or more rooms, and a room is part of one and only one property_. You can see that the label here is from the first entity\'s perspective: a property contains a room, but a room does not contain a property. When considered from the perspective of the second entity, the equivalent label is usually very easy to infer. (Some ER diagrams label relationships from both perspectives, but this is not supported here, and is usually superfluous).\n\nOnly the `first-entity` part of a statement is mandatory. This makes it possible to show an entity with no relationships, which can be useful during iterative construction of diagrams. If any other parts of a statement are specified, then all parts are mandatory.\n\n#### Unicode text\n\nEntity names, relationships, and attributes all support unicode text.\n\n```mermaid-example\nerDiagram\n    "This ❤ Unicode"\n```\n\n```mermaid\nerDiagram\n    "This ❤ Unicode"\n```\n\n#### Markdown formatting\n\nMarkdown formatting and text is also supported.\n\n```mermaid-example\nerDiagram\n    "This **is** _Markdown_"\n```\n\n```mermaid\nerDiagram\n    "This **is** _Markdown_"\n```\n\n### Relationship Syntax\n\nThe `relationship` part of each statement can be broken down into three sub-components:\n\n- the cardinality of the first entity with respect to the second\n- whether the relationship confers identity on a \'child\' entity\n- the cardinality of the second entity with respect to the first\n\nCardinality is a property that describes how many elements of another entity can be related to the entity in question. In the above example a `PROPERTY` can have one or more `ROOM` instances associated to it, whereas a `ROOM` can only be associated with one `PROPERTY`. In each cardinality marker there are two characters. The outermost character represents a maximum value, and the innermost character represents a minimum value. The table below summarises possible cardinalities.\n\n| Value (left) | Value (right) | Meaning                       |\n| :----------: | :-----------: | ----------------------------- |\n|    `\\|o`     |     `o\\|`     | Zero or one                   |\n|    `\\|\\|`    |    `\\|\\|`     | Exactly one                   |\n|     `}o`     |     `o{`      | Zero or more (no upper limit) |\n|    `}\\|`     |     `\\|{`     | One or more (no upper limit)  |\n\n**Aliases**\n\n| Value (left) | Value (right) | Alias for    |\n| :----------: | :-----------: | ------------ |\n| one or zero  |  one or zero  | Zero or one  |\n| zero or one  |  zero or one  | Zero or one  |\n| one or more  |  one or more  | One or more  |\n| one or many  |  one or many  | One or more  |\n|   many(1)    |    many(1)    | One or more  |\n|      1+      |      1+       | One or more  |\n| zero or more | zero or more  | Zero or more |\n| zero or many | zero or many  | Zero or more |\n|   many(0)    |    many(0)    | Zero or more |\n|      0+      |      0+       | Zero or more |\n|   only one   |   only one    | Exactly one  |\n|      1       |       1       | Exactly one  |\n\n### Identification\n\nRelationships may be classified as either _identifying_ or _non-identifying_ and these are rendered with either solid or dashed lines respectively. This is relevant when one of the entities in question cannot have independent existence without the other. For example a firm that insures people to drive cars might need to store data on `NAMED-DRIVER`s. In modelling this we might start out by observing that a `CAR` can be driven by many `PERSON` instances, and a `PERSON` can drive many `CAR`s - both entities can exist without the other, so this is a non-identifying relationship that we might specify in Mermaid as: `PERSON }|..|{ CAR : "driver"`. Note the two dots in the middle of the relationship that will result in a dashed line being drawn between the two entities. But when this many-to-many relationship is resolved into two one-to-many relationships, we observe that a `NAMED-DRIVER` cannot exist without both a `PERSON` and a `CAR` - the relationships become identifying and would be specified using hyphens, which translate to a solid line:\n\n| Value |     Alias for     |\n| :---: | :---------------: |\n|  --   |   _identifying_   |\n|  ..   | _non-identifying_ |\n\n**Aliases**\n\n|     Value     |     Alias for     |\n| :-----------: | :---------------: |\n|      to       |   _identifying_   |\n| optionally to | _non-identifying_ |\n\n```mermaid-example\nerDiagram\n    CAR ||--o{ NAMED-DRIVER : allows\n    PERSON }o..o{ NAMED-DRIVER : is\n```\n\n```mermaid\nerDiagram\n    CAR ||--o{ NAMED-DRIVER : allows\n    PERSON }o..o{ NAMED-DRIVER : is\n```\n\n```mermaid-example\nerDiagram\n    CAR 1 to zero or more NAMED-DRIVER : allows\n    PERSON many(0) optionally to 0+ NAMED-DRIVER : is\n```\n\n```mermaid\nerDiagram\n    CAR 1 to zero or more NAMED-DRIVER : allows\n    PERSON many(0) optionally to 0+ NAMED-DRIVER : is\n```\n\n### Attributes\n\nAttributes can be defined for entities by specifying the entity name followed by a block containing multiple `type name` pairs, where a block is delimited by an opening `{` and a closing `}`. The attributes are rendered inside the entity boxes. For example:\n\n```mermaid-example\nerDiagram\n    CAR ||--o{ NAMED-DRIVER : allows\n    CAR {\n        string registrationNumber\n        string make\n        string model\n    }\n    PERSON ||--o{ NAMED-DRIVER : is\n    PERSON {\n        string firstName\n        string lastName\n        int age\n    }\n```\n\n```mermaid\nerDiagram\n    CAR ||--o{ NAMED-DRIVER : allows\n    CAR {\n        string registrationNumber\n        string make\n        string model\n    }\n    PERSON ||--o{ NAMED-DRIVER : is\n    PERSON {\n        string firstName\n        string lastName\n        int age\n    }\n```\n\nThe `type` values must begin with an alphabetic character and may contain digits, hyphens, underscores, parentheses and square brackets. The `name` values follow a similar format to `type`, but may start with an asterisk as another option to indicate an attribute is a primary key. Other than that, there are no restrictions, and there is no implicit set of valid data types.\n\n#### Optional attribute types (v\\<MERMAID_RELEASE_VERSION>+)\n\nAttribute `type` values may end with `?` to indicate an optional or nullable type.\n\n```mermaid-example\nerDiagram\n    PERSON {\n        string firstName\n        string? middleName\n        string lastName\n    }\n```\n\n```mermaid\nerDiagram\n    PERSON {\n        string firstName\n        string? middleName\n        string lastName\n    }\n```\n\n### Entity Name Aliases\n\nAn alias can be added to an entity using square brackets. If provided, the alias will be showed in the diagram instead of the entity name. Alias names follow all of the same rules as entity names.\n\n```mermaid-example\nerDiagram\n    p[Person] {\n        string firstName\n        string lastName\n    }\n    a["Customer Account"] {\n        string email\n    }\n    p ||--o| a : has\n```\n\n```mermaid\nerDiagram\n    p[Person] {\n        string firstName\n        string lastName\n    }\n    a["Customer Account"] {\n        string email\n    }\n    p ||--o| a : has\n```\n\n#### Attribute Keys and Comments\n\nAttributes may also have a `key` or comment defined. Keys can be `PK`, `FK` or `UK`, for Primary Key, Foreign Key or Unique Key (markdown formatting and unicode is not supported for keys). To specify multiple key constraints on a single attribute, separate them with a comma (e.g., `PK, FK`). A `comment` is defined by double quotes at the end of an attribute. Comments themselves cannot have double-quote characters in them.\n\n```mermaid-example\nerDiagram\n    CAR ||--o{ NAMED-DRIVER : allows\n    CAR {\n        string registrationNumber PK\n        string make\n        string model\n        string[] parts\n    }\n    PERSON ||--o{ NAMED-DRIVER : is\n    PERSON {\n        string driversLicense PK "The license #"\n        string(99) firstName "Only 99 characters are allowed"\n        string lastName\n        string phone UK\n        int age\n    }\n    NAMED-DRIVER {\n        string carRegistrationNumber PK, FK\n        string driverLicence PK, FK\n    }\n    MANUFACTURER only one to zero or more CAR : makes\n```\n\n```mermaid\nerDiagram\n    CAR ||--o{ NAMED-DRIVER : allows\n    CAR {\n        string registrationNumber PK\n        string make\n        string model\n        string[] parts\n    }\n    PERSON ||--o{ NAMED-DRIVER : is\n    PERSON {\n        string driversLicense PK "The license #"\n        string(99) firstName "Only 99 characters are allowed"\n        string lastName\n        string phone UK\n        int age\n    }\n    NAMED-DRIVER {\n        string carRegistrationNumber PK, FK\n        string driverLicence PK, FK\n    }\n    MANUFACTURER only one to zero or more CAR : makes\n```\n\n### Direction\n\nThe direction statement declares the direction of the diagram.\n\nThis declares that the diagram is oriented from top to bottom (`TB`). This can be reversed to be oriented from bottom to top (`BT`).\n\n```mermaid-example\nerDiagram\n    direction TB\n    CUSTOMER ||--o{ ORDER : places\n    CUSTOMER {\n        string name\n        string custNumber\n        string sector\n    }\n    ORDER ||--|{ LINE-ITEM : contains\n    ORDER {\n        int orderNumber\n        string deliveryAddress\n    }\n    LINE-ITEM {\n        string productCode\n        int quantity\n        float pricePerUnit\n    }\n```\n\n```mermaid\nerDiagram\n    direction TB\n    CUSTOMER ||--o{ ORDER : places\n    CUSTOMER {\n        string name\n        string custNumber\n        string sector\n    }\n    ORDER ||--|{ LINE-ITEM : contains\n    ORDER {\n        int orderNumber\n        string deliveryAddress\n    }\n    LINE-ITEM {\n        string productCode\n        int quantity\n        float pricePerUnit\n    }\n```\n\nThis declares that the diagram is oriented from left to right (`LR`). This can be reversed to be oriented from right to left (`RL`).\n\n```mermaid-example\nerDiagram\n    direction LR\n    CUSTOMER ||--o{ ORDER : places\n    CUSTOMER {\n        string name\n        string custNumber\n        string sector\n    }\n    ORDER ||--|{ LINE-ITEM : contains\n    ORDER {\n        int orderNumber\n        string deliveryAddress\n    }\n    LINE-ITEM {\n        string productCode\n        int quantity\n        float pricePerUnit\n    }\n```\n\n```mermaid\nerDiagram\n    direction LR\n    CUSTOMER ||--o{ ORDER : places\n    CUSTOMER {\n        string name\n        string custNumber\n        string sector\n    }\n    ORDER ||--|{ LINE-ITEM : contains\n    ORDER {\n        int orderNumber\n        string deliveryAddress\n    }\n    LINE-ITEM {\n        string productCode\n        int quantity\n        float pricePerUnit\n    }\n```\n\nPossible diagram orientations are:\n\n- TB - Top to bottom\n- BT - Bottom to top\n- RL - Right to left\n- LR - Left to right\n\n### Subgraphs (v\\<MERMAID_RELEASE_VERSION>+)\n\nSubgraphs allow grouping entities into logical sections within an ER diagram. They are useful for organizing\ncomplex diagrams and improving readability.\n\nSubgraphs can contain entities, relationships, and even other subgraphs (nested subgraphs).\n\n```\nsubgraph title\n    graph definition\nend\n```\n\nAn example below:\n\n```mermaid-example\nerDiagram\n    subgraph title1\n        CUSTOMER\n        CUSTOMER {\n            string name\n            string custNumber\n            string sector\n        }\n    end\n    subgraph title2\n        CAR ||--o{ NAMED-DRIVER : allows\n        subgraph title3\n            PERSON\n            PERSON {\n                string firstName\n                string lastName\n                int age\n            }\n        end\n    end\n```\n\n```mermaid\nerDiagram\n    subgraph title1\n        CUSTOMER\n        CUSTOMER {\n            string name\n            string custNumber\n            string sector\n        }\n    end\n    subgraph title2\n        CAR ||--o{ NAMED-DRIVER : allows\n        subgraph title3\n            PERSON\n            PERSON {\n                string firstName\n                string lastName\n                int age\n            }\n        end\n    end\n```\n\nA subgraph always has an `id`, and optionally a `title`.\n\nIf the subgraph name is a single word, it is used as both id and title:\n\n```mermaid-example\nerDiagram\n    subgraph title1\n        CUSTOMER\n    end\n```\n\n```mermaid\nerDiagram\n    subgraph title1\n        CUSTOMER\n    end\n```\n\nIf the subgraph identifier contains more than one word, it must be written in `quotes`. In this case, the quoted value is used both as the id and the title.\n\n```mermaid-example\nerDiagram\n    subgraph "Customer Domain"\n        CUSTOMER\n    end\n```\n\n```mermaid\nerDiagram\n    subgraph "Customer Domain"\n        CUSTOMER\n    end\n```\n\nYou can also set an explicit id for the subgraph.\n\n```mermaid-example\nerDiagram\n    subgraph id1 [title 1]\n        CUSTOMER\n    end\n```\n\n```mermaid\nerDiagram\n    subgraph id1 [title 1]\n        CUSTOMER\n    end\n```\n\n> **Note**\n> Subgraphs are always referenced by their id, never by their title.\n>\n> This is important when defining relationships involving subgraphs.\n>\n> **If a subgraph id contains spaces, it must be referenced using quotes:**\n>\n> `"Customer Domain" ||--o{ ORDER : contains`\n\n#### Relationships involving subgraphs\n\nIt is also possible to define relationships to and from subgraphs.\n\n```mermaid-example\nerDiagram\n    subgraph title1\n        A1 ||--|| A2 : links\n    end\n\n    subgraph title2\n        B1 ||--|| B2 : links\n    end\n\n    subgraph title3\n        C1 ||--|| C2 : links\n    end\n\n    title1 ||--|| title2 : links\n    title2 ||--|| title3 : links\n    title2 ||--|| C2 : links\n```\n\n```mermaid\nerDiagram\n    subgraph title1\n        A1 ||--|| A2 : links\n    end\n\n    subgraph title2\n        B1 ||--|| B2 : links\n    end\n\n    subgraph title3\n        C1 ||--|| C2 : links\n    end\n\n    title1 ||--|| title2 : links\n    title2 ||--|| title3 : links\n    title2 ||--|| C2 : links\n```\n\n#### Direction in subgraphs\n\nA subgraph can define its own layout direction.\n\n```mermaid-example\nerDiagram\n    direction LR\n    subgraph TOP\n        direction TB\n        subgraph B1\n            direction RL\n            I1 ||--|| F1 : links\n        end\n        subgraph B2\n            direction BT\n            I2 ||--|| F2 : links\n        end\n    end\n    A ||--|| TOP : links\n    TOP ||--|| B : links\n    B1 ||--|| B2 : links\n```\n\n```mermaid\nerDiagram\n    direction LR\n    subgraph TOP\n        direction TB\n        subgraph B1\n            direction RL\n            I1 ||--|| F1 : links\n        end\n        subgraph B2\n            direction BT\n            I2 ||--|| F2 : links\n        end\n    end\n    A ||--|| TOP : links\n    TOP ||--|| B : links\n    B1 ||--|| B2 : links\n```\n\n### Styling a node\n\nIt is possible to apply specific styles such as a thicker border or a different background color to a node.\n\n```mermaid-example\nerDiagram\n    id1||--||id2 : label\n    style id1 fill:#f9f,stroke:#333,stroke-width:4px\n    style id2 fill:#bbf,stroke:#f66,stroke-width:2px,color:#fff,stroke-dasharray: 5 5\n```\n\n```mermaid\nerDiagram\n    id1||--||id2 : label\n    style id1 fill:#f9f,stroke:#333,stroke-width:4px\n    style id2 fill:#bbf,stroke:#f66,stroke-width:2px,color:#fff,stroke-dasharray: 5 5\n```\n\nIt is also possible to attach styles to a list of nodes in one statement:\n\n```\n    style nodeId1,nodeId2 styleList\n```\n\n#### Classes\n\nMore convenient than defining the style every time is to define a class of styles and attach this class to the nodes that\nshould have a different look.\n\nA class definition looks like the example below:\n\n```\n    classDef className fill:#f9f,stroke:#333,stroke-width:4px\n```\n\nIt is also possible to define multiple classes in one statement:\n\n```\n    classDef firstClassName,secondClassName font-size:12pt\n```\n\nAttachment of a class to a node is done as per below:\n\n```\n    class nodeId1 className\n```\n\nIt is also possible to attach a class to a list of nodes in one statement:\n\n```\n    class nodeId1,nodeId2 className\n```\n\nMultiple classes can be attached at the same time as well:\n\n```\n    class nodeId1,nodeId2 className1,className2\n```\n\nA shorter form of adding a class is to attach the classname to the node using the `:::`operator as per below:\n\n```mermaid-example\nerDiagram\n    direction TB\n    CAR:::someclass {\n        string registrationNumber\n        string make\n        string model\n    }\n    PERSON:::someclass {\n        string firstName\n        string lastName\n        int age\n    }\n    HOUSE:::someclass\n\n    classDef someclass fill:#f96\n```\n\n```mermaid\nerDiagram\n    direction TB\n    CAR:::someclass {\n        string registrationNumber\n        string make\n        string model\n    }\n    PERSON:::someclass {\n        string firstName\n        string lastName\n        int age\n    }\n    HOUSE:::someclass\n\n    classDef someclass fill:#f96\n```\n\nThis form can be used when declaring relationships between entities:\n\n```mermaid-example\nerDiagram\n    CAR {\n        string registrationNumber\n        string make\n        string model\n    }\n    PERSON {\n        string firstName\n        string lastName\n        int age\n    }\n    PERSON:::foo ||--|| CAR : owns\n    PERSON o{--|| HOUSE:::bar : has\n\n    classDef foo stroke:#f00\n    classDef bar stroke:#0f0\n    classDef foobar stroke:#00f\n```\n\n```mermaid\nerDiagram\n    CAR {\n        string registrationNumber\n        string make\n        string model\n    }\n    PERSON {\n        string firstName\n        string lastName\n        int age\n    }\n    PERSON:::foo ||--|| CAR : owns\n    PERSON o{--|| HOUSE:::bar : has\n\n    classDef foo stroke:#f00\n    classDef bar stroke:#0f0\n    classDef foobar stroke:#00f\n```\n\nSimilar to the class statement, the shorthand syntax can also apply multiple classes at once:\n\n```\n    nodeId:::className1,className2\n```\n\n### Default class\n\nIf a class is named default it will be assigned to all classes without specific class definitions.\n\n```\n    classDef default fill:#f9f,stroke:#333,stroke-width:4px;\n```\n\n> **Note:** Custom styles from style or other class statements take priority and will overwrite the default styles. (e.g. The `default` class gives nodes a background color of pink but the `blue` class will give that node a background color of blue if applied.)\n\n```mermaid-example\nerDiagram\n    CAR {\n        string registrationNumber\n        string make\n        string model\n    }\n    PERSON {\n        string firstName\n        string lastName\n        int age\n    }\n    PERSON:::foo ||--|| CAR : owns\n    PERSON o{--|| HOUSE:::bar : has\n\n    classDef default fill:#f9f,stroke-width:4px\n    classDef foo stroke:#f00\n    classDef bar stroke:#0f0\n    classDef foobar stroke:#00f\n```\n\n```mermaid\nerDiagram\n    CAR {\n        string registrationNumber\n        string make\n        string model\n    }\n    PERSON {\n        string firstName\n        string lastName\n        int age\n    }\n    PERSON:::foo ||--|| CAR : owns\n    PERSON o{--|| HOUSE:::bar : has\n\n    classDef default fill:#f9f,stroke-width:4px\n    classDef foo stroke:#f00\n    classDef bar stroke:#0f0\n    classDef foobar stroke:#00f\n```\n\n## Configuration\n\n### Layout\n\nThe layout of the diagram is handled by [`render()`](../config/setup/mermaid/interfaces/Mermaid.md#render). The default layout is dagre.\n\nFor larger or more-complex diagrams, you can alternatively apply the ELK (Eclipse Layout Kernel) layout using your YAML frontmatter\'s `config`. For more information, see [Customizing ELK Layout](../intro/syntax-reference.md#customizing-elk-layout).\n\n```yaml\n---\nconfig:\n  layout: elk\n---\n```\n\nYour Mermaid code should be similar to the following:\n\n```mermaid-example\n---\ntitle: Order example\nconfig:\n    layout: elk\n---\nerDiagram\n    CUSTOMER ||--o{ ORDER : places\n    ORDER ||--|{ LINE-ITEM : contains\n    CUSTOMER }|..|{ DELIVERY-ADDRESS : uses\n```\n\n```mermaid\n---\ntitle: Order example\nconfig:\n    layout: elk\n---\nerDiagram\n    CUSTOMER ||--o{ ORDER : places\n    ORDER ||--|{ LINE-ITEM : contains\n    CUSTOMER }|..|{ DELIVERY-ADDRESS : uses\n```\n\n> **Note**\n> Note that the site needs to use mermaid version 9.4+ for this to work and have this featured enabled in the lazy-loading configuration.\n\n<!--- cspell:locale en,en-gb --->\n';
-const __vite_glob_0_25 = "> **Warning**\n>\n> ## THIS IS AN AUTOGENERATED FILE. DO NOT EDIT.\n>\n> ## Please edit the corresponding file in [/packages/mermaid/src/docs/syntax/eventmodeling.md](../../packages/mermaid/src/docs/syntax/eventmodeling.md).\n\n# Event Modeling Diagram (v11.15.0+)\n\n## Introduction\n\n> **Event Modeling** (EM) is a method of describing systems using an example of how information has changed within them over time. Event Modeling specifically omits transient details and looks at what the information flow is and what the user sees at any particular point in time.\n\nYou can read more at [Event Modeling web page](https://eventmodeling.org/).\n\nEvent Modeling diagram is composed of a few main entities:\n\n- Trigger - UI and Processor\n- Command\n- View / Read Model\n- Event\n\nEntities are organized in swimlanes forming a timeline usually based on the following patterns:\n\n- State View\n- State Change\n- Translation\n- Automation\n\nYou can find more details in the [cheat sheet](https://eventmodeling.org/posts/event-modeling-cheatsheet/).\n\nThe purpose of the Domain Specific Language (DSL) supporting the drawing of the Event Modeling diagram is the rapid creation. Relations among the entities are inferred by default, so the distraction while you design is limited. Further detail to the entities can be added gradually.\n\nThe grammar for the DSL is also maintained in a [separate project](https://github.com/lgazo/event-modeling-dsl) with the intention to provide also different types of output, VS Code (and potentially other) IDEs, etc.\n\n## Basic Syntax\n\nThe DSL supports two types of syntaxes - compact and relaxed one. Both will be mentioned in the examples and both can be used interchangeably.\n\n### Timeline\n\nThe timeline is the key part of the diagram and it is composed of **Time Frame** definitions. Speedy Time Frame typing is the key of the compact notation. For compact notation you type the `tf` token. For the relaxed notation you type `timeframe` token.\n\n```md\neventmodeling\n\ntf 01 ui CartUI\ntf 02 cmd AddItem\ntf 03 evt ItemAdded\n```\n\nrendering to\n\n```mermaid-example\neventmodeling\n\ntf 01 ui CartUI\ntf 02 cmd AddItem\ntf 03 evt ItemAdded\n```\n\n```mermaid\neventmodeling\n\ntf 01 ui CartUI\ntf 02 cmd AddItem\ntf 03 evt ItemAdded\n```\n\nEach Time Frame is referenced by a **unique number** in order to distinguish one from another and also to be able to reference it when needed. Depending on the complexity of the diagram it should be enough to have just two digit number or more. Imagine you are typing a BASIC program on your ZX Spectrum always starting with a two digit number, but the order of the numbers does not matter, just the uniqueness in the whole timeline.\n\nThe Time Frame also contains an **Entity Identifier**, e.g. in case of `01` Time Frame it is `CartUI`. One Entity Identifier can be used multiple times in the timeline for example when you want to express invocations of the same event in different points in time.\n\nRelaxed notation would look like this:\n\n```md\neventmodeling\n\ntimeframe 01 ui CartUI\ntimeframe 02 command AddItem\ntimeframe 03 event ItemAdded\n```\n\n### Inline data\n\nIt is possible to provide data examples for individual Time Frames. An Inline Data is wrapped in curly brackets on the same line as the Time Frame.\n\nCompact version:\n\n```mermaid-example\neventmodeling\n\ntf 01 ui CartUI\ntf 02 cmd AddItem { description: string }\ntf 03 evt ItemAdded { description: string }\n```\n\n```mermaid\neventmodeling\n\ntf 01 ui CartUI\ntf 02 cmd AddItem { description: string }\ntf 03 evt ItemAdded { description: string }\n```\n\nRelaxed version:\n\n```mermaid-example\neventmodeling\n\ntimeframe 01 ui CartUI\ntimeframe 02 command AddItem { description: string }\ntimeframe 03 event ItemAdded { description: string }\n```\n\n```mermaid\neventmodeling\n\ntimeframe 01 ui CartUI\ntimeframe 02 command AddItem { description: string }\ntimeframe 03 event ItemAdded { description: string }\n```\n\n### Data block\n\nIf you need to provide more complex data description, you can define the **Data Block** separately. Data Block is referenced from a Time Frame by providing the identifier inside of double-square brackets `[[identifier]]`, similar to wiki links convention in Markdown.\n\nIn case the same entity is repeated you need to uniquely identify the data blocks, therefore the Data Block identifier is suffixed with a number.\n\nCompact version:\n\n```mermaid-example\neventmodeling\n\ntf 01 ui CartUI\ntf 02 cmd AddItem [[AddItem01]]\ntf 03 evt ItemAdded [[ItemAdded]]\ntf 04 cmd AddItem [[AddItem02]]\ntf 05 evt ItemAdded [[ItemAdded]]\n\ndata AddItem01 {\n  description: 'john'\n  image: 'avatar_john'\n  price: 20.4\n}\n\ndata AddItem02 {\n  description: 'jack'\n  image: 'avatar_jack'\n  price: 12.5\n}\n\ndata ItemAdded {\n  description: string\n  image: string\n  price: number\n}\n```\n\n```mermaid\neventmodeling\n\ntf 01 ui CartUI\ntf 02 cmd AddItem [[AddItem01]]\ntf 03 evt ItemAdded [[ItemAdded]]\ntf 04 cmd AddItem [[AddItem02]]\ntf 05 evt ItemAdded [[ItemAdded]]\n\ndata AddItem01 {\n  description: 'john'\n  image: 'avatar_john'\n  price: 20.4\n}\n\ndata AddItem02 {\n  description: 'jack'\n  image: 'avatar_jack'\n  price: 12.5\n}\n\ndata ItemAdded {\n  description: string\n  image: string\n  price: number\n}\n```\n\nRelaxed version:\n\n```mermaid-example\neventmodeling\n\ntimeframe 01 ui CartUI\ntimeframe 02 command AddItem [[AddItem01]]\ntimeframe 03 event ItemAdded [[ItemAdded]]\ntimeframe 04 command AddItem [[AddItem02]]\ntimeframe 05 event ItemAdded [[ItemAdded]]\n\ndata AddItem01 {\n  description: 'john'\n  image: 'avatar_john'\n  price: 20.4\n}\n\ndata AddItem02 {\n  description: 'jack'\n  image: 'avatar_jack'\n  price: 12.5\n}\n\ndata ItemAdded {\n  description: string\n  image: string\n  price: number\n}\n```\n\n```mermaid\neventmodeling\n\ntimeframe 01 ui CartUI\ntimeframe 02 command AddItem [[AddItem01]]\ntimeframe 03 event ItemAdded [[ItemAdded]]\ntimeframe 04 command AddItem [[AddItem02]]\ntimeframe 05 event ItemAdded [[ItemAdded]]\n\ndata AddItem01 {\n  description: 'john'\n  image: 'avatar_john'\n  price: 20.4\n}\n\ndata AddItem02 {\n  description: 'jack'\n  image: 'avatar_jack'\n  price: 12.5\n}\n\ndata ItemAdded {\n  description: string\n  image: string\n  price: number\n}\n```\n\n### Resetting the flow\n\nBy default the diagram builds the relations based on the inference. But modeling a more complex business flow requires to break such inference from time to time. For that you can use a different type of Time Frame called **Reset Frame**. It is represented by a `rf` / `resetframe` token.\n\nCompact version:\n\n```mermaid-example\neventmodeling\n\ntf 01 ui CartUI\ntf 02 cmd AddItem\ntf 03 evt ItemAdded\n\nrf 04 evt External.InventoryChanged\ntf 05 pcr InventoryProcessor\ntf 06 cmd ChangeInventory\ntf 07 evt Cart.InventoryChanged\n```\n\n```mermaid\neventmodeling\n\ntf 01 ui CartUI\ntf 02 cmd AddItem\ntf 03 evt ItemAdded\n\nrf 04 evt External.InventoryChanged\ntf 05 pcr InventoryProcessor\ntf 06 cmd ChangeInventory\ntf 07 evt Cart.InventoryChanged\n```\n\nRelaxed version:\n\n```mermaid-example\neventmodeling\n\ntimeframe 01 ui CartUI\ntimeframe 02 command AddItem\ntimeframe 03 event ItemAdded\n\nresetframe 04 event External.InventoryChanged\ntimeframe 05 processor InventoryProcessor\ntimeframe 06 command ChangeInventory\ntimeframe 07 event Cart.InventoryChanged\n```\n\n```mermaid\neventmodeling\n\ntimeframe 01 ui CartUI\ntimeframe 02 command AddItem\ntimeframe 03 event ItemAdded\n\nresetframe 04 event External.InventoryChanged\ntimeframe 05 processor InventoryProcessor\ntimeframe 06 command ChangeInventory\ntimeframe 07 event Cart.InventoryChanged\n```\n\n### Multiple relations\n\nThere are situations where you need to specify multiple relations for an entity. For example when a **Read Model** is built of multiple **Events**. You can use `->>` token for that.\n\n```mermaid-example\neventmodeling\n\nrf 02 evt CartCreated\nrf 03 evt ItemAdded\nrf 04 evt ItemRemoved\nrf 05 evt CartCleared\ntf 01 rmo CartUI ->> 02 ->> 03 ->> 04 ->> 05\n```\n\n```mermaid\neventmodeling\n\nrf 02 evt CartCreated\nrf 03 evt ItemAdded\nrf 04 evt ItemRemoved\nrf 05 evt CartCleared\ntf 01 rmo CartUI ->> 02 ->> 03 ->> 04 ->> 05\n```\n\n## Event Modeling patterns\n\nThis chapter briefly summarizes each Event Modeling pattern.\n\n### State Change\n\n```mermaid-example\neventmodeling\n\ntf 01 ui CartUI\ntf 02 cmd AddItem\ntf 03 evt ItemAdded\n```\n\n```mermaid\neventmodeling\n\ntf 01 ui CartUI\ntf 02 cmd AddItem\ntf 03 evt ItemAdded\n```\n\n### State View\n\n```mermaid-example\neventmodeling\n\ntf 03 evt ItemAdded\ntf 02 rmo CartItems\ntf 04 ui CartUI\n```\n\n```mermaid\neventmodeling\n\ntf 03 evt ItemAdded\ntf 02 rmo CartItems\ntf 04 ui CartUI\n```\n\n### Translation\n\n```mermaid-example\neventmodeling\n\ntf 03 evt External.InventoryChanged\ntf 02 pcr InventoryProcessor\ntf 04 cmd ChangeInventory\ntf 05 evt Cart.InventoryChanged\n```\n\n```mermaid\neventmodeling\n\ntf 03 evt External.InventoryChanged\ntf 02 pcr InventoryProcessor\ntf 04 cmd ChangeInventory\ntf 05 evt Cart.InventoryChanged\n```\n\n## Details of the Syntax\n\n### Entity types\n\nEntity type is determined by the third column in the Time Frame grammar.\n\nCompact version:\n\n```md\ntf 01 pcr InventoryProcessor\n```\n\nRelaxed version:\n\n```md\ntimeframe 01 processor InventoryProcessor\n```\n\nEntities are assigned to default swimlanes unless a **Namespace** is specified in the Entity Identifier.\n\nThere are the following types available:\n\n- `ui`: UI - belongs to UI/Automation swimlane\n- `pcr` / `processor`: Processor - belongs to UI/Automation swimlane\n- `cmd` / `command`: Command - belongs to Command/Read Model swimlane\n- `rmo` / `readmodel`: Read Model - belongs to Command/Read Model swimlane\n- `evt` / `event`: Event - belongs to Events swimlane\n\n### Swimlanes and Namespaces\n\nThere are three basic **Swimlanes** inferred from the Entity Type.\n\n- UI/Automation\n- Command/Read Model\n- Events\n\nAs your diagram grows and you explore the depths of a particular software system, you want to categorize your Entities as well. In order to do that, you can use **Namespace** identifier as part of the Entity Identifier.\n\n```md\nInventory.InventoryChanged\n```\n\n**Namespace** is the first part before the `.` of the Entity Identifier. Each combination of the Namespace and Entity type forms new Swimlane. The order how they are specified in the text definition specifies the order of the Swimlanes in the diagram.\n\n```mermaid-example\neventmodeling\n\nrf 01 evt Inventory.InventoryChanged\nrf 02 evt External.InventoryChanged\n```\n\n```mermaid\neventmodeling\n\nrf 01 evt Inventory.InventoryChanged\nrf 02 evt External.InventoryChanged\n```\n\n### Data block data types\n\nA **Data** is always wrapped in curly brackets. It can be prepended by a data type in backticks. The pattern applies for **Inline Data** as well as for **Data Block**.\n\n```md\ntf 01 rmo UserAdded `json`{ \"name\": \"foo\" }\n```\n\nor for Data Block\n\n```md\ndata UserAdded01 `json`{\n\"name\": \"foo\"\n}\n```\n\n> **Warning**\n> There is no special treatment in the diagram renderer at the moment for a specific data type.\n\nSupported types are:\n\n- `json`\n- `jsobj`\n- `figma`\n- `salt`\n- `uri`\n- `md`\n- `html`\n- `text`\n";
-const __vite_glob_0_26 = '> **Warning**\n>\n> ## THIS IS AN AUTOGENERATED FILE. DO NOT EDIT.\n>\n> ## Please edit the corresponding file in [/packages/mermaid/src/docs/syntax/examples.md](../../packages/mermaid/src/docs/syntax/examples.md).\n\n# Examples\n\nThis page contains a collection of examples of diagrams and charts that can be created through mermaid and its myriad applications.\n\n**If you wish to learn how to support mermaid on your webpage, read the [Beginner\'s Guide](../config/usage.md?id=usage).**\n\n**If you wish to learn about mermaid\'s syntax, Read the [Diagram Syntax](../syntax/flowchart.md?id=flowcharts-basic-syntax) section.**\n\n## Basic Pie Chart\n\n```mermaid-example\npie title NETFLIX\n         "Time spent looking for movie" : 90\n         "Time spent watching it" : 10\n```\n\n```mermaid\npie title NETFLIX\n         "Time spent looking for movie" : 90\n         "Time spent watching it" : 10\n```\n\n```mermaid-example\npie title What Voldemort doesn\'t have?\n         "FRIENDS" : 2\n         "FAMILY" : 3\n         "NOSE" : 45\n```\n\n```mermaid\npie title What Voldemort doesn\'t have?\n         "FRIENDS" : 2\n         "FAMILY" : 3\n         "NOSE" : 45\n```\n\n## Basic sequence diagram\n\n```mermaid-example\nsequenceDiagram\n    Alice ->> Bob: Hello Bob, how are you?\n    Bob-->>John: How about you John?\n    Bob--x Alice: I am good thanks!\n    Bob-x John: I am good thanks!\n    Note right of John: Bob thinks a long<br/>long time, so long<br/>that the text does<br/>not fit on a row.\n\n    Bob-->Alice: Checking with John...\n    Alice->John: Yes... John, how are you?\n```\n\n```mermaid\nsequenceDiagram\n    Alice ->> Bob: Hello Bob, how are you?\n    Bob-->>John: How about you John?\n    Bob--x Alice: I am good thanks!\n    Bob-x John: I am good thanks!\n    Note right of John: Bob thinks a long<br/>long time, so long<br/>that the text does<br/>not fit on a row.\n\n    Bob-->Alice: Checking with John...\n    Alice->John: Yes... John, how are you?\n```\n\n## Basic flowchart\n\n```mermaid-example\ngraph LR\n    A[Square Rect] -- Link text --> B((Circle))\n    A --> C(Round Rect)\n    B --> D{Rhombus}\n    C --> D\n```\n\n```mermaid\ngraph LR\n    A[Square Rect] -- Link text --> B((Circle))\n    A --> C(Round Rect)\n    B --> D{Rhombus}\n    C --> D\n```\n\n## Larger flowchart with some styling\n\n```mermaid-example\ngraph TB\n    sq[Square shape] --> ci((Circle shape))\n\n    subgraph A\n        od>Odd shape]-- Two line<br/>edge comment --> ro\n        di{Diamond with <br/> line break} -.-> ro(Rounded<br>square<br>shape)\n        di==>ro2(Rounded square shape)\n    end\n\n    %% Notice that no text in shape are added here instead that is appended further down\n    e --> od3>Really long text with linebreak<br>in an Odd shape]\n\n    %% Comments after double percent signs\n    e((Inner / circle<br>and some odd <br>special characters)) --> f(,.?!+-*ز)\n\n    cyr[Cyrillic]-->cyr2((Circle shape Начало));\n\n     classDef green fill:#9f6,stroke:#333,stroke-width:2px;\n     classDef orange fill:#f96,stroke:#333,stroke-width:4px;\n     class sq,e green\n     class di orange\n```\n\n```mermaid\ngraph TB\n    sq[Square shape] --> ci((Circle shape))\n\n    subgraph A\n        od>Odd shape]-- Two line<br/>edge comment --> ro\n        di{Diamond with <br/> line break} -.-> ro(Rounded<br>square<br>shape)\n        di==>ro2(Rounded square shape)\n    end\n\n    %% Notice that no text in shape are added here instead that is appended further down\n    e --> od3>Really long text with linebreak<br>in an Odd shape]\n\n    %% Comments after double percent signs\n    e((Inner / circle<br>and some odd <br>special characters)) --> f(,.?!+-*ز)\n\n    cyr[Cyrillic]-->cyr2((Circle shape Начало));\n\n     classDef green fill:#9f6,stroke:#333,stroke-width:2px;\n     classDef orange fill:#f96,stroke:#333,stroke-width:4px;\n     class sq,e green\n     class di orange\n```\n\n## SequenceDiagram: Loops, alt and opt\n\n```mermaid-example\nsequenceDiagram\n    loop Daily query\n        Alice->>Bob: Hello Bob, how are you?\n        alt is sick\n            Bob->>Alice: Not so good :(\n        else is well\n            Bob->>Alice: Feeling fresh like a daisy\n        end\n\n        opt Extra response\n            Bob->>Alice: Thanks for asking\n        end\n    end\n```\n\n```mermaid\nsequenceDiagram\n    loop Daily query\n        Alice->>Bob: Hello Bob, how are you?\n        alt is sick\n            Bob->>Alice: Not so good :(\n        else is well\n            Bob->>Alice: Feeling fresh like a daisy\n        end\n\n        opt Extra response\n            Bob->>Alice: Thanks for asking\n        end\n    end\n```\n\n## SequenceDiagram: Message to self in loop\n\n```mermaid-example\nsequenceDiagram\n    participant Alice\n    participant Bob\n    Alice->>John: Hello John, how are you?\n    loop HealthCheck\n        John->>John: Fight against hypochondria\n    end\n    Note right of John: Rational thoughts<br/>prevail...\n    John-->>Alice: Great!\n    John->>Bob: How about you?\n    Bob-->>John: Jolly good!\n```\n\n```mermaid\nsequenceDiagram\n    participant Alice\n    participant Bob\n    Alice->>John: Hello John, how are you?\n    loop HealthCheck\n        John->>John: Fight against hypochondria\n    end\n    Note right of John: Rational thoughts<br/>prevail...\n    John-->>Alice: Great!\n    John->>Bob: How about you?\n    Bob-->>John: Jolly good!\n```\n\n## Sequence Diagram: Blogging app service communication\n\n```mermaid-example\nsequenceDiagram\n    participant web as Web Browser\n    participant blog as Blog Service\n    participant account as Account Service\n    participant mail as Mail Service\n    participant db as Storage\n\n    Note over web,db: The user must be logged in to submit blog posts\n    web->>+account: Logs in using credentials\n    account->>db: Query stored accounts\n    db->>account: Respond with query result\n\n    alt Credentials not found\n        account->>web: Invalid credentials\n    else Credentials found\n        account->>-web: Successfully logged in\n\n        Note over web,db: When the user is authenticated, they can now submit new posts\n        web->>+blog: Submit new post\n        blog->>db: Store post data\n\n        par Notifications\n            blog--)mail: Send mail to blog subscribers\n            blog--)db: Store in-site notifications\n        and Response\n            blog-->>-web: Successfully posted\n        end\n    end\n\n```\n\n```mermaid\nsequenceDiagram\n    participant web as Web Browser\n    participant blog as Blog Service\n    participant account as Account Service\n    participant mail as Mail Service\n    participant db as Storage\n\n    Note over web,db: The user must be logged in to submit blog posts\n    web->>+account: Logs in using credentials\n    account->>db: Query stored accounts\n    db->>account: Respond with query result\n\n    alt Credentials not found\n        account->>web: Invalid credentials\n    else Credentials found\n        account->>-web: Successfully logged in\n\n        Note over web,db: When the user is authenticated, they can now submit new posts\n        web->>+blog: Submit new post\n        blog->>db: Store post data\n\n        par Notifications\n            blog--)mail: Send mail to blog subscribers\n            blog--)db: Store in-site notifications\n        and Response\n            blog-->>-web: Successfully posted\n        end\n    end\n\n```\n\n## A commit flow diagram.\n\n```mermaid-example\ngitGraph:\n    commit "Ashish"\n    branch newbranch\n    checkout newbranch\n    commit id:"1111"\n    commit tag:"test"\n    checkout main\n    commit type: HIGHLIGHT\n    commit\n    merge newbranch\n    commit\n    branch b2\n    commit\n```\n\n```mermaid\ngitGraph:\n    commit "Ashish"\n    branch newbranch\n    checkout newbranch\n    commit id:"1111"\n    commit tag:"test"\n    checkout main\n    commit type: HIGHLIGHT\n    commit\n    merge newbranch\n    commit\n    branch b2\n    commit\n```\n\n<!--- cspell:ignore Ashish newbranch --->\n';
-const __vite_glob_0_27 = '> **Warning**\n>\n> ## THIS IS AN AUTOGENERATED FILE. DO NOT EDIT.\n>\n> ## Please edit the corresponding file in [/packages/mermaid/src/docs/syntax/flowchart.md](../../packages/mermaid/src/docs/syntax/flowchart.md).\n\n# Flowcharts - Basic Syntax\n\nFlowcharts are composed of **nodes** (geometric shapes) and **edges** (arrows or lines). The Mermaid code defines how nodes and edges are made and accommodates different arrow types, multi-directional arrows, and any linking to and from subgraphs.\n\n> **Warning**\n> If you are using the word "end" in a Flowchart node, capitalize the entire word or any of the letters (e.g., "End" or "END"), or apply this [workaround](https://github.com/mermaid-js/mermaid/issues/1444#issuecomment-639528897). Typing "end" in all lowercase letters will break the Flowchart.\n\n> **Warning**\n> If you are using the letter "o" or "x" as the first letter in a connecting Flowchart node, add a space before the letter or capitalize the letter (e.g., "dev--- ops", "dev---Ops").\n>\n> Typing "A---oB" will create a [circle edge](#circle-edge-example).\n>\n> Typing "A---xB" will create a [cross edge](#cross-edge-example).\n\n### A node (default)\n\n```mermaid-example\n---\ntitle: Node\n---\nflowchart LR\n    id\n```\n\n```mermaid\n---\ntitle: Node\n---\nflowchart LR\n    id\n```\n\n> **Note**\n> The id is what is displayed in the box.\n\n> **💡 Tip**\n> Instead of `flowchart` one can also use `graph`.\n\n### A node with text\n\nIt is also possible to set text in the box that differs from the id. If this is done several times, it is the last text\nfound for the node that will be used. Also if you define edges for the node later on, you can omit text definitions. The\none previously defined will be used when rendering the box.\n\n```mermaid-example\n---\ntitle: Node with text\n---\nflowchart LR\n    id1[This is the text in the box]\n```\n\n```mermaid\n---\ntitle: Node with text\n---\nflowchart LR\n    id1[This is the text in the box]\n```\n\n#### Unicode text\n\nUse `"` to enclose the unicode text.\n\n```mermaid-example\nflowchart LR\n    id["This ❤ Unicode"]\n```\n\n```mermaid\nflowchart LR\n    id["This ❤ Unicode"]\n```\n\n#### Markdown formatting\n\nUse double quotes and backticks "\\` text \\`" to enclose the markdown text.\n\n```mermaid-example\n---\nconfig:\n  htmlLabels: false\n---\nflowchart LR\n    markdown["`This **is** _Markdown_`"]\n    newLines["`Line1\n    Line 2\n    Line 3`"]\n    markdown --> newLines\n```\n\n```mermaid\n---\nconfig:\n  htmlLabels: false\n---\nflowchart LR\n    markdown["`This **is** _Markdown_`"]\n    newLines["`Line1\n    Line 2\n    Line 3`"]\n    markdown --> newLines\n```\n\n### Direction\n\nThis statement declares the direction of the Flowchart.\n\nThis declares the flowchart is oriented from top to bottom (`TD` or `TB`).\n\n```mermaid-example\nflowchart TD\n    Start --> Stop\n```\n\n```mermaid\nflowchart TD\n    Start --> Stop\n```\n\nThis declares the flowchart is oriented from left to right (`LR`).\n\n```mermaid-example\nflowchart LR\n    Start --> Stop\n```\n\n```mermaid\nflowchart LR\n    Start --> Stop\n```\n\nPossible FlowChart orientations are:\n\n- TB - Top to bottom\n- TD - Top-down/ same as top to bottom\n- BT - Bottom to top\n- RL - Right to left\n- LR - Left to right\n\n## Node shapes\n\n### A node with round edges\n\n```mermaid-example\nflowchart LR\n    id1(This is the text in the box)\n```\n\n```mermaid\nflowchart LR\n    id1(This is the text in the box)\n```\n\n### A stadium-shaped node\n\n```mermaid-example\nflowchart LR\n    id1([This is the text in the box])\n```\n\n```mermaid\nflowchart LR\n    id1([This is the text in the box])\n```\n\n### A node in a subroutine shape\n\n```mermaid-example\nflowchart LR\n    id1[[This is the text in the box]]\n```\n\n```mermaid\nflowchart LR\n    id1[[This is the text in the box]]\n```\n\n### A node in a cylindrical shape\n\n```mermaid-example\nflowchart LR\n    id1[(Database)]\n```\n\n```mermaid\nflowchart LR\n    id1[(Database)]\n```\n\n### A node in the form of a circle\n\n```mermaid-example\nflowchart LR\n    id1((This is the text in the circle))\n```\n\n```mermaid\nflowchart LR\n    id1((This is the text in the circle))\n```\n\n### A node in an asymmetric shape\n\n```mermaid-example\nflowchart LR\n    id1>This is the text in the box]\n```\n\n```mermaid\nflowchart LR\n    id1>This is the text in the box]\n```\n\nCurrently only the shape above is possible and not its mirror. _This might change with future releases._\n\n### A node (rhombus)\n\n```mermaid-example\nflowchart LR\n    id1{This is the text in the box}\n```\n\n```mermaid\nflowchart LR\n    id1{This is the text in the box}\n```\n\n### A hexagon node\n\n```mermaid-example\nflowchart LR\n    id1{{This is the text in the box}}\n```\n\n```mermaid\nflowchart LR\n    id1{{This is the text in the box}}\n```\n\n### Parallelogram\n\n```mermaid-example\nflowchart TD\n    id1[/This is the text in the box/]\n```\n\n```mermaid\nflowchart TD\n    id1[/This is the text in the box/]\n```\n\n### Parallelogram alt\n\n```mermaid-example\nflowchart TD\n    id1[\\This is the text in the box\\]\n```\n\n```mermaid\nflowchart TD\n    id1[\\This is the text in the box\\]\n```\n\n### Trapezoid\n\n```mermaid-example\nflowchart TD\n    A[/Christmas\\]\n```\n\n```mermaid\nflowchart TD\n    A[/Christmas\\]\n```\n\n### Trapezoid alt\n\n```mermaid-example\nflowchart TD\n    B[\\Go shopping/]\n```\n\n```mermaid\nflowchart TD\n    B[\\Go shopping/]\n```\n\n### Double circle\n\n```mermaid-example\nflowchart TD\n    id1(((This is the text in the circle)))\n```\n\n```mermaid\nflowchart TD\n    id1(((This is the text in the circle)))\n```\n\n## Expanded Node Shapes in Mermaid Flowcharts (v11.3.0+)\n\nMermaid introduces 30 new shapes to enhance the flexibility and precision of flowchart creation. These new shapes provide more options to represent processes, decisions, events, data storage visually, and other elements within your flowcharts, improving clarity and semantic meaning.\n\nNew Syntax for Shape Definition\n\nMermaid now supports a general syntax for defining shape types to accommodate the growing number of shapes. This syntax allows you to assign specific shapes to nodes using a clear and flexible format:\n\n```\nA@{ shape: rect }\n```\n\nThis syntax creates a node A as a rectangle. It renders in the same way as `A["A"]`, or `A`.\n\n### Complete List of New Shapes\n\nBelow is a comprehensive list of the newly introduced shapes and their corresponding semantic meanings, short names, and aliases:\n\n| **Semantic Name**                 | **Shape Name**         | **Short Name** | **Description**                | **Alias Supported**                                              |\n| --------------------------------- | ---------------------- | -------------- | ------------------------------ | ---------------------------------------------------------------- |\n| Bang                              | Bang                   | `bang`         | Bang                           | `bang`                                                           |\n| Card                              | Notched Rectangle      | `notch-rect`   | Represents a card              | `card`, `notched-rectangle`                                      |\n| Cloud                             | Cloud                  | `cloud`        | cloud                          | `cloud`                                                          |\n| Collate                           | Hourglass              | `hourglass`    | Represents a collate operation | `collate`, `hourglass`                                           |\n| Com Link                          | Lightning Bolt         | `bolt`         | Communication link             | `com-link`, `lightning-bolt`                                     |\n| Comment                           | Curly Brace            | `brace`        | Adds a comment                 | `brace-l`, `comment`                                             |\n| Comment Right                     | Curly Brace            | `brace-r`      | Adds a comment                 |                                                                  |\n| Comment with braces on both sides | Curly Braces           | `braces`       | Adds a comment                 |                                                                  |\n| Data Input/Output                 | Lean Right             | `lean-r`       | Represents input or output     | `in-out`, `lean-right`                                           |\n| Data Input/Output                 | Lean Left              | `lean-l`       | Represents output or input     | `lean-left`, `out-in`                                            |\n| Data Store                        | Data Store             | `datastore`    | Data flow diagram data store   | `data-store`                                                     |\n| Database                          | Cylinder               | `cyl`          | Database storage               | `cylinder`, `database`, `db`                                     |\n| Decision                          | Diamond                | `diam`         | Decision-making step           | `decision`, `diamond`, `question`                                |\n| Delay                             | Half-Rounded Rectangle | `delay`        | Represents a delay             | `half-rounded-rectangle`                                         |\n| Direct Access Storage             | Horizontal Cylinder    | `h-cyl`        | Direct access storage          | `das`, `horizontal-cylinder`                                     |\n| Disk Storage                      | Lined Cylinder         | `lin-cyl`      | Disk storage                   | `disk`, `lined-cylinder`                                         |\n| Display                           | Curved Trapezoid       | `curv-trap`    | Represents a display           | `curved-trapezoid`, `display`                                    |\n| Divided Process                   | Divided Rectangle      | `div-rect`     | Divided process shape          | `div-proc`, `divided-process`, `divided-rectangle`               |\n| Document                          | Document               | `doc`          | Represents a document          | `doc`, `document`                                                |\n| Event                             | Rounded Rectangle      | `rounded`      | Represents an event            | `event`                                                          |\n| Extract                           | Triangle               | `tri`          | Extraction process             | `extract`, `triangle`                                            |\n| Fork/Join                         | Filled Rectangle       | `fork`         | Fork or join in process flow   | `join`                                                           |\n| Internal Storage                  | Window Pane            | `win-pane`     | Internal storage               | `internal-storage`, `window-pane`                                |\n| Junction                          | Filled Circle          | `f-circ`       | Junction point                 | `filled-circle`, `junction`                                      |\n| Lined Document                    | Lined Document         | `lin-doc`      | Lined document                 | `lined-document`                                                 |\n| Lined/Shaded Process              | Lined Rectangle        | `lin-rect`     | Lined process shape            | `lin-proc`, `lined-process`, `lined-rectangle`, `shaded-process` |\n| Loop Limit                        | Trapezoidal Pentagon   | `notch-pent`   | Loop limit step                | `loop-limit`, `notched-pentagon`                                 |\n| Manual File                       | Flipped Triangle       | `flip-tri`     | Manual file operation          | `flipped-triangle`, `manual-file`                                |\n| Manual Input                      | Sloped Rectangle       | `sl-rect`      | Manual input step              | `manual-input`, `sloped-rectangle`                               |\n| Manual Operation                  | Trapezoid Base Top     | `trap-t`       | Represents a manual task       | `inv-trapezoid`, `manual`, `trapezoid-top`                       |\n| Multi-Document                    | Stacked Document       | `docs`         | Multiple documents             | `documents`, `st-doc`, `stacked-document`                        |\n| Multi-Process                     | Stacked Rectangle      | `st-rect`      | Multiple processes             | `processes`, `procs`, `stacked-rectangle`                        |\n| Odd                               | Odd                    | `odd`          | Odd shape                      |                                                                  |\n| Paper Tape                        | Flag                   | `flag`         | Paper tape                     | `paper-tape`                                                     |\n| Prepare Conditional               | Hexagon                | `hex`          | Preparation or condition step  | `hexagon`, `prepare`                                             |\n| Priority Action                   | Trapezoid Base Bottom  | `trap-b`       | Priority action                | `priority`, `trapezoid`, `trapezoid-bottom`                      |\n| Process                           | Rectangle              | `rect`         | Standard process shape         | `proc`, `process`, `rectangle`                                   |\n| Start                             | Circle                 | `circle`       | Starting point                 | `circ`                                                           |\n| Start                             | Small Circle           | `sm-circ`      | Small starting point           | `small-circle`, `start`                                          |\n| Stop                              | Double Circle          | `dbl-circ`     | Represents a stop point        | `double-circle`                                                  |\n| Stop                              | Framed Circle          | `fr-circ`      | Stop point                     | `framed-circle`, `stop`                                          |\n| Stored Data                       | Bow Tie Rectangle      | `bow-rect`     | Stored data                    | `bow-tie-rectangle`, `stored-data`                               |\n| Subprocess                        | Framed Rectangle       | `fr-rect`      | Subprocess                     | `framed-rectangle`, `subproc`, `subprocess`, `subroutine`        |\n| Summary                           | Crossed Circle         | `cross-circ`   | Summary                        | `crossed-circle`, `summary`                                      |\n| Tagged Document                   | Tagged Document        | `tag-doc`      | Tagged document                | `tag-doc`, `tagged-document`                                     |\n| Tagged Process                    | Tagged Rectangle       | `tag-rect`     | Tagged process                 | `tag-proc`, `tagged-process`, `tagged-rectangle`                 |\n| Terminal Point                    | Stadium                | `stadium`      | Terminal point                 | `pill`, `terminal`                                               |\n| Text Block                        | Text Block             | `text`         | Text block                     |                                                                  |\n\n### Example Flowchart with New Shapes\n\nHere’s an example flowchart that utilizes some of the newly introduced shapes:\n\n```mermaid-example\nflowchart RL\n    A@{ shape: manual-file, label: "File Handling"}\n    B@{ shape: manual-input, label: "User Input"}\n    C@{ shape: docs, label: "Multiple Documents"}\n    D@{ shape: procs, label: "Process Automation"}\n    E@{ shape: paper-tape, label: "Paper Records"}\n```\n\n```mermaid\nflowchart RL\n    A@{ shape: manual-file, label: "File Handling"}\n    B@{ shape: manual-input, label: "User Input"}\n    C@{ shape: docs, label: "Multiple Documents"}\n    D@{ shape: procs, label: "Process Automation"}\n    E@{ shape: paper-tape, label: "Paper Records"}\n```\n\n### Process\n\n```mermaid-example\nflowchart TD\n    A@{ shape: rect, label: "This is a process" }\n```\n\n```mermaid\nflowchart TD\n    A@{ shape: rect, label: "This is a process" }\n```\n\n### Event\n\n```mermaid-example\nflowchart TD\n    A@{ shape: rounded, label: "This is an event" }\n```\n\n```mermaid\nflowchart TD\n    A@{ shape: rounded, label: "This is an event" }\n```\n\n### Terminal Point (Stadium)\n\n```mermaid-example\nflowchart TD\n    A@{ shape: stadium, label: "Terminal point" }\n```\n\n```mermaid\nflowchart TD\n    A@{ shape: stadium, label: "Terminal point" }\n```\n\n### Subprocess\n\n```mermaid-example\nflowchart TD\n    A@{ shape: subproc, label: "This is a subprocess" }\n```\n\n```mermaid\nflowchart TD\n    A@{ shape: subproc, label: "This is a subprocess" }\n```\n\n### Database (Cylinder)\n\n```mermaid-example\nflowchart TD\n    A@{ shape: cyl, label: "Database" }\n```\n\n```mermaid\nflowchart TD\n    A@{ shape: cyl, label: "Database" }\n```\n\n### Start (Circle)\n\n```mermaid-example\nflowchart TD\n    A@{ shape: circle, label: "Start" }\n```\n\n```mermaid\nflowchart TD\n    A@{ shape: circle, label: "Start" }\n```\n\n### Odd\n\n```mermaid-example\nflowchart TD\n    A@{ shape: odd, label: "Odd shape" }\n```\n\n```mermaid\nflowchart TD\n    A@{ shape: odd, label: "Odd shape" }\n```\n\n### Decision (Diamond)\n\n```mermaid-example\nflowchart TD\n    A@{ shape: diamond, label: "Decision" }\n```\n\n```mermaid\nflowchart TD\n    A@{ shape: diamond, label: "Decision" }\n```\n\n### Prepare Conditional (Hexagon)\n\n```mermaid-example\nflowchart TD\n    A@{ shape: hex, label: "Prepare conditional" }\n```\n\n```mermaid\nflowchart TD\n    A@{ shape: hex, label: "Prepare conditional" }\n```\n\n### Data Input/Output (Lean Right)\n\n```mermaid-example\nflowchart TD\n    A@{ shape: lean-r, label: "Input/Output" }\n```\n\n```mermaid\nflowchart TD\n    A@{ shape: lean-r, label: "Input/Output" }\n```\n\n### Data Input/Output (Lean Left)\n\n```mermaid-example\nflowchart TD\n    A@{ shape: lean-l, label: "Output/Input" }\n```\n\n```mermaid\nflowchart TD\n    A@{ shape: lean-l, label: "Output/Input" }\n```\n\n### Datastore (Top and bottom border)\n\n```mermaid-example\nflowchart TD\n    A@{ shape: datastore, label: "Datastore" }\n```\n\n```mermaid\nflowchart TD\n    A@{ shape: datastore, label: "Datastore" }\n```\n\n### Priority Action (Trapezoid Base Bottom)\n\n```mermaid-example\nflowchart TD\n    A@{ shape: trap-b, label: "Priority action" }\n```\n\n```mermaid\nflowchart TD\n    A@{ shape: trap-b, label: "Priority action" }\n```\n\n### Manual Operation (Trapezoid Base Top)\n\n```mermaid-example\nflowchart TD\n    A@{ shape: trap-t, label: "Manual operation" }\n```\n\n```mermaid\nflowchart TD\n    A@{ shape: trap-t, label: "Manual operation" }\n```\n\n### Stop (Double Circle)\n\n```mermaid-example\nflowchart TD\n    A@{ shape: dbl-circ, label: "Stop" }\n```\n\n```mermaid\nflowchart TD\n    A@{ shape: dbl-circ, label: "Stop" }\n```\n\n### Text Block\n\n```mermaid-example\nflowchart TD\n    A@{ shape: text, label: "This is a text block" }\n```\n\n```mermaid\nflowchart TD\n    A@{ shape: text, label: "This is a text block" }\n```\n\n### Card (Notched Rectangle)\n\n```mermaid-example\nflowchart TD\n    A@{ shape: notch-rect, label: "Card" }\n```\n\n```mermaid\nflowchart TD\n    A@{ shape: notch-rect, label: "Card" }\n```\n\n### Lined/Shaded Process\n\n```mermaid-example\nflowchart TD\n    A@{ shape: lin-rect, label: "Lined process" }\n```\n\n```mermaid\nflowchart TD\n    A@{ shape: lin-rect, label: "Lined process" }\n```\n\n### Start (Small Circle)\n\n```mermaid-example\nflowchart TD\n    A@{ shape: sm-circ, label: "Small start" }\n```\n\n```mermaid\nflowchart TD\n    A@{ shape: sm-circ, label: "Small start" }\n```\n\n### Stop (Framed Circle)\n\n```mermaid-example\nflowchart TD\n    A@{ shape: framed-circle, label: "Stop" }\n```\n\n```mermaid\nflowchart TD\n    A@{ shape: framed-circle, label: "Stop" }\n```\n\n### Fork/Join (Long Rectangle)\n\n```mermaid-example\nflowchart TD\n    A@{ shape: fork, label: "Fork or Join" }\n```\n\n```mermaid\nflowchart TD\n    A@{ shape: fork, label: "Fork or Join" }\n```\n\n### Collate (Hourglass)\n\n```mermaid-example\nflowchart TD\n    A@{ shape: hourglass, label: "Collate" }\n```\n\n```mermaid\nflowchart TD\n    A@{ shape: hourglass, label: "Collate" }\n```\n\n### Comment (Curly Brace)\n\n```mermaid-example\nflowchart TD\n    A@{ shape: comment, label: "Comment" }\n```\n\n```mermaid\nflowchart TD\n    A@{ shape: comment, label: "Comment" }\n```\n\n### Comment Right (Curly Brace Right)\n\n```mermaid-example\nflowchart TD\n    A@{ shape: brace-r, label: "Comment" }\n```\n\n```mermaid\nflowchart TD\n    A@{ shape: brace-r, label: "Comment" }\n```\n\n### Comment with braces on both sides\n\n```mermaid-example\nflowchart TD\n    A@{ shape: braces, label: "Comment" }\n```\n\n```mermaid\nflowchart TD\n    A@{ shape: braces, label: "Comment" }\n```\n\n### Com Link (Lightning Bolt)\n\n```mermaid-example\nflowchart TD\n    A@{ shape: bolt, label: "Communication link" }\n```\n\n```mermaid\nflowchart TD\n    A@{ shape: bolt, label: "Communication link" }\n```\n\n### Document\n\n```mermaid-example\nflowchart TD\n    A@{ shape: doc, label: "Document" }\n```\n\n```mermaid\nflowchart TD\n    A@{ shape: doc, label: "Document" }\n```\n\n### Delay (Half-Rounded Rectangle)\n\n```mermaid-example\nflowchart TD\n    A@{ shape: delay, label: "Delay" }\n```\n\n```mermaid\nflowchart TD\n    A@{ shape: delay, label: "Delay" }\n```\n\n### Direct Access Storage (Horizontal Cylinder)\n\n```mermaid-example\nflowchart TD\n    A@{ shape: das, label: "Direct access storage" }\n```\n\n```mermaid\nflowchart TD\n    A@{ shape: das, label: "Direct access storage" }\n```\n\n### Disk Storage (Lined Cylinder)\n\n```mermaid-example\nflowchart TD\n    A@{ shape: lin-cyl, label: "Disk storage" }\n```\n\n```mermaid\nflowchart TD\n    A@{ shape: lin-cyl, label: "Disk storage" }\n```\n\n### Display (Curved Trapezoid)\n\n```mermaid-example\nflowchart TD\n    A@{ shape: curv-trap, label: "Display" }\n```\n\n```mermaid\nflowchart TD\n    A@{ shape: curv-trap, label: "Display" }\n```\n\n### Divided Process (Divided Rectangle)\n\n```mermaid-example\nflowchart TD\n    A@{ shape: div-rect, label: "Divided process" }\n```\n\n```mermaid\nflowchart TD\n    A@{ shape: div-rect, label: "Divided process" }\n```\n\n### Extract (Small Triangle)\n\n```mermaid-example\nflowchart TD\n    A@{ shape: tri, label: "Extract" }\n```\n\n```mermaid\nflowchart TD\n    A@{ shape: tri, label: "Extract" }\n```\n\n### Internal Storage (Window Pane)\n\n```mermaid-example\nflowchart TD\n    A@{ shape: win-pane, label: "Internal storage" }\n```\n\n```mermaid\nflowchart TD\n    A@{ shape: win-pane, label: "Internal storage" }\n```\n\n### Junction (Filled Circle)\n\n```mermaid-example\nflowchart TD\n    A@{ shape: f-circ, label: "Junction" }\n```\n\n```mermaid\nflowchart TD\n    A@{ shape: f-circ, label: "Junction" }\n```\n\n### Lined Document\n\n```mermaid-example\nflowchart TD\n    A@{ shape: lin-doc, label: "Lined document" }\n```\n\n```mermaid\nflowchart TD\n    A@{ shape: lin-doc, label: "Lined document" }\n```\n\n### Loop Limit (Notched Pentagon)\n\n```mermaid-example\nflowchart TD\n    A@{ shape: notch-pent, label: "Loop limit" }\n```\n\n```mermaid\nflowchart TD\n    A@{ shape: notch-pent, label: "Loop limit" }\n```\n\n### Manual File (Flipped Triangle)\n\n```mermaid-example\nflowchart TD\n    A@{ shape: flip-tri, label: "Manual file" }\n```\n\n```mermaid\nflowchart TD\n    A@{ shape: flip-tri, label: "Manual file" }\n```\n\n### Manual Input (Sloped Rectangle)\n\n```mermaid-example\nflowchart TD\n    A@{ shape: sl-rect, label: "Manual input" }\n```\n\n```mermaid\nflowchart TD\n    A@{ shape: sl-rect, label: "Manual input" }\n```\n\n### Multi-Document (Stacked Document)\n\n```mermaid-example\nflowchart TD\n    A@{ shape: docs, label: "Multiple documents" }\n```\n\n```mermaid\nflowchart TD\n    A@{ shape: docs, label: "Multiple documents" }\n```\n\n### Multi-Process (Stacked Rectangle)\n\n```mermaid-example\nflowchart TD\n    A@{ shape: processes, label: "Multiple processes" }\n```\n\n```mermaid\nflowchart TD\n    A@{ shape: processes, label: "Multiple processes" }\n```\n\n### Paper Tape (Flag)\n\n```mermaid-example\nflowchart TD\n    A@{ shape: flag, label: "Paper tape" }\n```\n\n```mermaid\nflowchart TD\n    A@{ shape: flag, label: "Paper tape" }\n```\n\n### Stored Data (Bow Tie Rectangle)\n\n```mermaid-example\nflowchart TD\n    A@{ shape: bow-rect, label: "Stored data" }\n```\n\n```mermaid\nflowchart TD\n    A@{ shape: bow-rect, label: "Stored data" }\n```\n\n### Summary (Crossed Circle)\n\n```mermaid-example\nflowchart TD\n    A@{ shape: cross-circ, label: "Summary" }\n```\n\n```mermaid\nflowchart TD\n    A@{ shape: cross-circ, label: "Summary" }\n```\n\n### Tagged Document\n\n```mermaid-example\nflowchart TD\n    A@{ shape: tag-doc, label: "Tagged document" }\n```\n\n```mermaid\nflowchart TD\n    A@{ shape: tag-doc, label: "Tagged document" }\n```\n\n### Tagged Process (Tagged Rectangle)\n\n```mermaid-example\nflowchart TD\n    A@{ shape: tag-rect, label: "Tagged process" }\n```\n\n```mermaid\nflowchart TD\n    A@{ shape: tag-rect, label: "Tagged process" }\n```\n\n## Special shapes in Mermaid Flowcharts (v11.3.0+)\n\nMermaid also introduces 2 special shapes to enhance your flowcharts: **icon** and **image**. These shapes allow you to include icons and images directly within your flowcharts, providing more visual context and clarity.\n\n### Icon Shape\n\nYou can use the `icon` shape to include an icon in your flowchart. To use icons, you need to register the icon pack first. Follow the instructions to [add custom icons](../config/icons.md). The syntax for defining an icon shape is as follows:\n\n```mermaid-example\nflowchart TD\n    A@{ icon: "fa:user", form: "square", label: "User Icon", pos: "t", h: 60 }\n```\n\n```mermaid\nflowchart TD\n    A@{ icon: "fa:user", form: "square", label: "User Icon", pos: "t", h: 60 }\n```\n\n#### Parameters\n\n- **icon**: The name of the icon from the registered icon pack.\n- **form**: Specifies the background shape of the icon. If not defined there will be no background to icon. Options include:\n  - `square`\n  - `circle`\n  - `rounded`\n- **label**: The text label associated with the icon. This can be any string. If not defined, no label will be displayed.\n- **pos**: The position of the label. If not defined label will default to bottom of icon. Possible values are:\n  - `t`\n  - `b`\n- **h**: The height of the icon. If not defined this will default to 48 which is minimum.\n\n### Image Shape\n\nYou can use the `image` shape to include an image in your flowchart. The syntax for defining an image shape is as follows:\n\n```\nflowchart TD\n    A@{ img: "https://example.com/image.png", label: "Image Label", pos: "t", w: 60, h: 60, constraint: "off" }\n```\n\n#### Parameters\n\n- **img**: The URL of the image to be displayed.\n- **label**: The text label associated with the image. This can be any string. If not defined, no label will be displayed.\n- **pos**: The position of the label. If not defined, the label will default to the bottom of the image. Possible values are:\n  - `t`\n  - `b`\n- **w**: The width of the image. If not defined, this will default to the natural width of the image.\n- **h**: The height of the image. If not defined, this will default to the natural height of the image.\n- **constraint**: Determines if the image should constrain the node size. This setting also ensures the image maintains its original aspect ratio, adjusting the width (`w`) accordingly to the height (`h`). If not defined, this will default to `off` Possible values are:\n  - `on`\n  - `off`\n\nIf you want to resize an image, but keep the same aspect ratio, set `h`, and set `constraint: on` to constrain the aspect ratio. E.g.\n\n```mermaid-example\nflowchart TD\n  %% My image with a constrained aspect ratio\n  A@{ img: "https://mermaid.js.org/favicon.svg", label: "My example image label", pos: "t", h: 60, constraint: "on" }\n```\n\n```mermaid\nflowchart TD\n  %% My image with a constrained aspect ratio\n  A@{ img: "https://mermaid.js.org/favicon.svg", label: "My example image label", pos: "t", h: 60, constraint: "on" }\n```\n\n## Links between nodes\n\nNodes can be connected with links/edges. It is possible to have different types of links or attach a text string to a link.\n\n### A link with arrow head\n\n```mermaid-example\nflowchart LR\n    A-->B\n```\n\n```mermaid\nflowchart LR\n    A-->B\n```\n\n### An open link\n\n```mermaid-example\nflowchart LR\n    A --- B\n```\n\n```mermaid\nflowchart LR\n    A --- B\n```\n\n### Text on links\n\n```mermaid-example\nflowchart LR\n    A-- This is the text! ---B\n```\n\n```mermaid\nflowchart LR\n    A-- This is the text! ---B\n```\n\nor\n\n```mermaid-example\nflowchart LR\n    A---|This is the text|B\n```\n\n```mermaid\nflowchart LR\n    A---|This is the text|B\n```\n\n### A link with arrow head and text\n\n```mermaid-example\nflowchart LR\n    A-->|text|B\n```\n\n```mermaid\nflowchart LR\n    A-->|text|B\n```\n\nor\n\n```mermaid-example\nflowchart LR\n    A-- text -->B\n```\n\n```mermaid\nflowchart LR\n    A-- text -->B\n```\n\n### Dotted link\n\n```mermaid-example\nflowchart LR\n   A-.->B;\n```\n\n```mermaid\nflowchart LR\n   A-.->B;\n```\n\n### Dotted link with text\n\n```mermaid-example\nflowchart LR\n   A-. text .-> B\n```\n\n```mermaid\nflowchart LR\n   A-. text .-> B\n```\n\n### Thick link\n\n```mermaid-example\nflowchart LR\n   A ==> B\n```\n\n```mermaid\nflowchart LR\n   A ==> B\n```\n\n### Thick link with text\n\n```mermaid-example\nflowchart LR\n   A == text ==> B\n```\n\n```mermaid\nflowchart LR\n   A == text ==> B\n```\n\n### An invisible link\n\nThis can be a useful tool in some instances where you want to alter the default positioning of a node.\n\n```mermaid-example\nflowchart LR\n    A ~~~ B\n```\n\n```mermaid\nflowchart LR\n    A ~~~ B\n```\n\n### Chaining of links\n\nIt is possible declare many links in the same line as per below:\n\n```mermaid-example\nflowchart LR\n   A -- text --> B -- text2 --> C\n```\n\n```mermaid\nflowchart LR\n   A -- text --> B -- text2 --> C\n```\n\nIt is also possible to declare multiple nodes links in the same line as per below:\n\n```mermaid-example\nflowchart LR\n   a --> b & c--> d\n```\n\n```mermaid\nflowchart LR\n   a --> b & c--> d\n```\n\nYou can then describe dependencies in a very expressive way. Like the one-liner below:\n\n```mermaid-example\nflowchart TB\n    A & B--> C & D\n```\n\n```mermaid\nflowchart TB\n    A & B--> C & D\n```\n\nIf you describe the same diagram using the basic syntax, it will take four lines. A\nword of warning, one could go overboard with this making the flowchart harder to read in\nmarkdown form. The Swedish word `lagom` comes to mind. It means, not too much and not too little.\nThis goes for expressive syntaxes as well.\n\n```mermaid-example\nflowchart TB\n    A --> C\n    A --> D\n    B --> C\n    B --> D\n```\n\n```mermaid\nflowchart TB\n    A --> C\n    A --> D\n    B --> C\n    B --> D\n```\n\n### Attaching an ID to Edges\n\nMermaid now supports assigning IDs to edges, similar to how IDs and metadata can be attached to nodes. This feature lays the groundwork for more advanced styling, classes, and animation capabilities on edges.\n\n**Syntax:**\n\nTo give an edge an ID, prepend the edge syntax with the ID followed by an `@` character. For example:\n\n```mermaid-example\nflowchart LR\n  A e1@--> B\n```\n\n```mermaid\nflowchart LR\n  A e1@--> B\n```\n\nIn this example, `e1` is the ID of the edge connecting `A` to `B`. You can then use this ID in later definitions or style statements, just like with nodes.\n\n### Turning an Animation On\n\nOnce you have assigned an ID to an edge, you can turn on animations for that edge by defining the edge’s properties:\n\n```mermaid-example\nflowchart LR\n  A e1@==> B\n  e1@{ animate: true }\n```\n\n```mermaid\nflowchart LR\n  A e1@==> B\n  e1@{ animate: true }\n```\n\nThis tells Mermaid that the edge `e1` should be animated.\n\n### Selecting Type of Animation\n\nIn the initial version, two animation speeds are supported: `fast` and `slow`. Selecting a specific animation type is a shorthand for enabling animation and setting the animation speed in one go.\n\n**Examples:**\n\n```mermaid-example\nflowchart LR\n  A e1@--> B\n  e1@{ animation: fast }\n```\n\n```mermaid\nflowchart LR\n  A e1@--> B\n  e1@{ animation: fast }\n```\n\nThis is equivalent to `{ animate: true, animation: fast }`.\n\n### Using classDef Statements for Animations\n\nYou can also animate edges by assigning a class to them and then defining animation properties in a `classDef` statement. For example:\n\n```mermaid-example\nflowchart LR\n  A e1@--> B\n  classDef animate stroke-dasharray: 9,5,stroke-dashoffset: 900,animation: dash 25s linear infinite;\n  class e1 animate\n```\n\n```mermaid\nflowchart LR\n  A e1@--> B\n  classDef animate stroke-dasharray: 9,5,stroke-dashoffset: 900,animation: dash 25s linear infinite;\n  class e1 animate\n```\n\nIn this snippet:\n\n- `e1@-->` creates an edge with ID `e1`.\n- `classDef animate` defines a class named `animate` with styling and animation properties.\n- `class e1 animate` applies the `animate` class to the edge `e1`.\n\n**Note on Escaping Commas:**\nWhen setting the `stroke-dasharray` property, remember to escape commas as `\\,` since commas are used as delimiters in Mermaid’s style definitions.\n\n## New arrow types\n\nThere are new types of arrows supported:\n\n- circle edge\n- cross edge\n\n### Circle edge example\n\n```mermaid-example\nflowchart LR\n    A --o B\n```\n\n```mermaid\nflowchart LR\n    A --o B\n```\n\n### Cross edge example\n\n```mermaid-example\nflowchart LR\n    A --x B\n```\n\n```mermaid\nflowchart LR\n    A --x B\n```\n\n## Multi directional arrows\n\nThere is the possibility to use multidirectional arrows.\n\n```mermaid-example\nflowchart LR\n    A o--o B\n    B <--> C\n    C x--x D\n```\n\n```mermaid\nflowchart LR\n    A o--o B\n    B <--> C\n    C x--x D\n```\n\n### Minimum length of a link\n\nEach node in the flowchart is ultimately assigned to a rank in the rendered\ngraph, i.e. to a vertical or horizontal level (depending on the flowchart\norientation), based on the nodes to which it is linked. By default, links\ncan span any number of ranks, but you can ask for any link to be longer\nthan the others by adding extra dashes in the link definition.\n\nIn the following example, two extra dashes are added in the link from node _B_\nto node _E_, so that it spans two more ranks than regular links:\n\n```mermaid-example\nflowchart TD\n    A[Start] --> B{Is it?}\n    B -->|Yes| C[OK]\n    C --> D[Rethink]\n    D --> B\n    B ---->|No| E[End]\n```\n\n```mermaid\nflowchart TD\n    A[Start] --> B{Is it?}\n    B -->|Yes| C[OK]\n    C --> D[Rethink]\n    D --> B\n    B ---->|No| E[End]\n```\n\n> **Note** Links may still be made longer than the requested number of ranks\n> by the rendering engine to accommodate other requests.\n\nWhen the link label is written in the middle of the link, the extra dashes must\nbe added on the right side of the link. The following example is equivalent to\nthe previous one:\n\n```mermaid-example\nflowchart TD\n    A[Start] --> B{Is it?}\n    B -- Yes --> C[OK]\n    C --> D[Rethink]\n    D --> B\n    B -- No ----> E[End]\n```\n\n```mermaid\nflowchart TD\n    A[Start] --> B{Is it?}\n    B -- Yes --> C[OK]\n    C --> D[Rethink]\n    D --> B\n    B -- No ----> E[End]\n```\n\nFor dotted or thick links, the characters to add are equals signs or dots,\nas summed up in the following table:\n\n| Length            |   1    |    2    |    3     |\n| ----------------- | :----: | :-----: | :------: |\n| Normal            | `---`  | `----`  | `-----`  |\n| Normal with arrow | `-->`  | `--->`  | `---->`  |\n| Thick             | `===`  | `====`  | `=====`  |\n| Thick with arrow  | `==>`  | `===>`  | `====>`  |\n| Dotted            | `-.-`  | `-..-`  | `-...-`  |\n| Dotted with arrow | `-.->` | `-..->` | `-...->` |\n\n## Special characters that break syntax\n\nIt is possible to put text within quotes in order to render more troublesome characters. As in the example below:\n\n```mermaid-example\nflowchart LR\n    id1["This is the (text) in the box"]\n```\n\n```mermaid\nflowchart LR\n    id1["This is the (text) in the box"]\n```\n\n### Entity codes to escape characters\n\nIt is possible to escape characters using the syntax exemplified here.\n\n```mermaid-example\n    flowchart LR\n        A["A double quote:#quot;"] --> B["A dec char:#9829;"]\n```\n\n```mermaid\n    flowchart LR\n        A["A double quote:#quot;"] --> B["A dec char:#9829;"]\n```\n\nNumbers given are base 10, so `#` can be encoded as `#35;`. It is also supported to use HTML character names.\n\n## Subgraphs\n\n```\nsubgraph title\n    graph definition\nend\n```\n\nAn example below:\n\n```mermaid-example\nflowchart TB\n    c1-->a2\n    subgraph one\n    a1-->a2\n    end\n    subgraph two\n    b1-->b2\n    end\n    subgraph three\n    c1-->c2\n    end\n```\n\n```mermaid\nflowchart TB\n    c1-->a2\n    subgraph one\n    a1-->a2\n    end\n    subgraph two\n    b1-->b2\n    end\n    subgraph three\n    c1-->c2\n    end\n```\n\nYou can also set an explicit id for the subgraph.\n\n```mermaid-example\nflowchart TB\n    c1-->a2\n    subgraph ide1 [one]\n    a1-->a2\n    end\n```\n\n```mermaid\nflowchart TB\n    c1-->a2\n    subgraph ide1 [one]\n    a1-->a2\n    end\n```\n\n### flowcharts\n\nWith the graphtype flowchart it is also possible to set edges to and from subgraphs as in the flowchart below.\n\n```mermaid-example\nflowchart TB\n    c1-->a2\n    subgraph one\n    a1-->a2\n    end\n    subgraph two\n    b1-->b2\n    end\n    subgraph three\n    c1-->c2\n    end\n    one --> two\n    three --> two\n    two --> c2\n```\n\n```mermaid\nflowchart TB\n    c1-->a2\n    subgraph one\n    a1-->a2\n    end\n    subgraph two\n    b1-->b2\n    end\n    subgraph three\n    c1-->c2\n    end\n    one --> two\n    three --> two\n    two --> c2\n```\n\n### Direction in subgraphs\n\nWith the graphtype flowcharts you can use the direction statement to set the direction which the subgraph will render like in this example.\n\n```mermaid-example\nflowchart LR\n  subgraph TOP\n    direction TB\n    subgraph B1\n        direction RL\n        i1 -->f1\n    end\n    subgraph B2\n        direction BT\n        i2 -->f2\n    end\n  end\n  A --> TOP --> B\n  B1 --> B2\n```\n\n```mermaid\nflowchart LR\n  subgraph TOP\n    direction TB\n    subgraph B1\n        direction RL\n        i1 -->f1\n    end\n    subgraph B2\n        direction BT\n        i2 -->f2\n    end\n  end\n  A --> TOP --> B\n  B1 --> B2\n```\n\n#### Limitation\n\nIf any of a subgraph\'s nodes are linked to the outside, subgraph direction will be ignored. Instead the subgraph will inherit the direction of the parent graph:\n\n```mermaid-example\nflowchart LR\n    subgraph subgraph1\n        direction TB\n        top1[top] --> bottom1[bottom]\n    end\n    subgraph subgraph2\n        direction TB\n        top2[top] --> bottom2[bottom]\n    end\n    %% ^ These subgraphs are identical, except for the links to them:\n\n    %% Link *to* subgraph1: subgraph1 direction is maintained\n    outside --> subgraph1\n    %% Link *within* subgraph2:\n    %% subgraph2 inherits the direction of the top-level graph (LR)\n    outside ---> top2\n```\n\n```mermaid\nflowchart LR\n    subgraph subgraph1\n        direction TB\n        top1[top] --> bottom1[bottom]\n    end\n    subgraph subgraph2\n        direction TB\n        top2[top] --> bottom2[bottom]\n    end\n    %% ^ These subgraphs are identical, except for the links to them:\n\n    %% Link *to* subgraph1: subgraph1 direction is maintained\n    outside --> subgraph1\n    %% Link *within* subgraph2:\n    %% subgraph2 inherits the direction of the top-level graph (LR)\n    outside ---> top2\n```\n\n## Markdown Strings\n\nThe "Markdown Strings" feature enhances flowcharts and mind maps by offering a more versatile string type, which supports text formatting options such as bold and italics, and automatically wraps text within labels.\n\n```mermaid-example\n---\nconfig:\n  htmlLabels: false\n---\nflowchart LR\nsubgraph "One"\n  a("`The **cat**\n  in the hat`") -- "edge label" --> b{{"`The **dog** in the hog`"}}\nend\nsubgraph "`**Two**`"\n  c("`The **cat**\n  in the hat`") -- "`Bold **edge label**`" --> d("The dog in the hog")\nend\n```\n\n```mermaid\n---\nconfig:\n  htmlLabels: false\n---\nflowchart LR\nsubgraph "One"\n  a("`The **cat**\n  in the hat`") -- "edge label" --> b{{"`The **dog** in the hog`"}}\nend\nsubgraph "`**Two**`"\n  c("`The **cat**\n  in the hat`") -- "`Bold **edge label**`" --> d("The dog in the hog")\nend\n```\n\nFormatting:\n\n- For bold text, use double asterisks (`**`) before and after the text.\n- For italics, use single asterisks (`*`) before and after the text.\n- With traditional strings, you needed to add `<br>` tags for text to wrap in nodes. However, markdown strings automatically wrap text when it becomes too long and allows you to start a new line by simply using a newline character instead of a `<br>` tag.\n\nThis feature is applicable to node labels, edge labels, and subgraph labels.\n\nThe auto wrapping can be disabled by using\n\n```\n---\nconfig:\n  markdownAutoWrap: false\n---\ngraph LR\n```\n\n## Interaction\n\nIt is possible to bind a click event to a node, the click can lead to either a javascript callback or to a link which will be opened in a new browser tab.\n\n> **Note**\n> This functionality is disabled when using `securityLevel=\'strict\'` and enabled when using `securityLevel=\'loose\'`.\n\n```\nclick nodeId callback\nclick nodeId call callback()\n```\n\n- nodeId is the id of the node\n- callback is the name of a javascript function defined on the page displaying the graph, the function will be called with the nodeId as parameter.\n\nExamples of tooltip usage below:\n\n```html\n<script>\n  window.callback = function () {\n    alert(\'A callback was triggered\');\n  };\n<\/script>\n```\n\nThe tooltip text is surrounded in double quotes. The styles of the tooltip are set by the class `.mermaidTooltip`.\n\n```mermaid-example\nflowchart LR\n    A-->B\n    B-->C\n    C-->D\n    click A callback "Tooltip for a callback"\n    click B "https://www.github.com" "This is a tooltip for a link"\n    click C call callback() "Tooltip for a callback"\n    click D href "https://www.github.com" "This is a tooltip for a link"\n```\n\n```mermaid\nflowchart LR\n    A-->B\n    B-->C\n    C-->D\n    click A callback "Tooltip for a callback"\n    click B "https://www.github.com" "This is a tooltip for a link"\n    click C call callback() "Tooltip for a callback"\n    click D href "https://www.github.com" "This is a tooltip for a link"\n```\n\n> **Success** The tooltip functionality and the ability to link to urls are available from version 0.5.2.\n\n?> Due to limitations with how Docsify handles JavaScript callback functions, an alternate working demo for the above code can be viewed at [this jsfiddle](https://jsfiddle.net/yk4h7qou/2/).\n\nLinks are opened in the same browser tab/window by default. It is possible to change this by adding a link target to the click definition (`_self`, `_blank`, `_parent` and `_top` are supported):\n\n```mermaid-example\nflowchart LR\n    A-->B\n    B-->C\n    C-->D\n    D-->E\n    click A "https://www.github.com" _blank\n    click B "https://www.github.com" "Open this in a new tab" _blank\n    click C href "https://www.github.com" _blank\n    click D href "https://www.github.com" "Open this in a new tab" _blank\n```\n\n```mermaid\nflowchart LR\n    A-->B\n    B-->C\n    C-->D\n    D-->E\n    click A "https://www.github.com" _blank\n    click B "https://www.github.com" "Open this in a new tab" _blank\n    click C href "https://www.github.com" _blank\n    click D href "https://www.github.com" "Open this in a new tab" _blank\n```\n\nBeginner\'s tip—a full example using interactive links in a html context:\n\n```html\n<body>\n  <pre class="mermaid">\n    flowchart LR\n        A-->B\n        B-->C\n        C-->D\n        click A callback "Tooltip"\n        click B "https://www.github.com" "This is a link"\n        click C call callback() "Tooltip"\n        click D href "https://www.github.com" "This is a link"\n  </pre>\n\n  <script>\n    window.callback = function () {\n      alert(\'A callback was triggered\');\n    };\n    const config = {\n      startOnLoad: true,\n      htmlLabels: true,\n      flowchart: { useMaxWidth: true, curve: \'cardinal\' },\n      securityLevel: \'loose\',\n    };\n    mermaid.initialize(config);\n  <\/script>\n</body>\n```\n\n### Comments\n\nComments can be entered within a flow diagram, which will be ignored by the parser. Comments need to be on their own line, and must be prefaced with `%%` (double percent signs). Any text after the start of the comment to the next newline will be treated as a comment, including any flow syntax\n\n```mermaid-example\nflowchart LR\n%% this is a comment A -- text --> B{node}\n   A -- text --> B -- text2 --> C\n```\n\n```mermaid\nflowchart LR\n%% this is a comment A -- text --> B{node}\n   A -- text --> B -- text2 --> C\n```\n\n## Styling and classes\n\n### Styling links\n\nIt is possible to style links. For instance, you might want to style a link that is going backwards in the flow. As links\nhave no ids in the same way as nodes, some other way of deciding what style the links should be attached to is required.\nInstead of ids, the order number of when the link was defined in the graph is used, or use default to apply to all links.\nIn the example below the style defined in the linkStyle statement will belong to the fourth link in the graph:\n\n```\nlinkStyle 3 stroke:#ff3,stroke-width:4px,color:red;\n```\n\nIt is also possible to add style to multiple links in a single statement, by separating link numbers with commas:\n\n```\nlinkStyle 1,2,7 color:blue;\n```\n\n### Styling line curves\n\nIt is possible to style the type of curve used for lines between items, if the default method does not meet your needs.\nAvailable curve styles include `basis`, `bumpX`, `bumpY`, `cardinal`, `catmullRom`, `linear`, `monotoneX`, `monotoneY`,\n`natural`, `step`, `stepAfter`, and `stepBefore`.\n\nFor a full list of available curves, including an explanation of custom curves, refer to\nthe [Shapes](https://d3js.org/d3-shape/curve) documentation in the [d3-shape](https://github.com/d3/d3-shape/) project.\n\nLine styling can be achieved in two ways:\n\n1. Change the curve style of all the lines\n2. Change the curve style of a particular line\n\n#### Diagram level curve style\n\nIn this example, a left-to-right graph uses the `stepBefore` curve style:\n\n```\n---\nconfig:\n  flowchart:\n    curve: stepBefore\n---\ngraph LR\n```\n\n#### Edge level curve style using Edge IDs (v11.10.0+)\n\nYou can assign IDs to [edges](#attaching-an-id-to-edges). After assigning an ID you can modify the line style by modifying the edge\'s `curve` property using the following syntax:\n\n```mermaid-example\nflowchart LR\n    A e1@==> B\n    A e2@--> C\n    e1@{ curve: linear }\n    e2@{ curve: natural }\n```\n\n```mermaid\nflowchart LR\n    A e1@==> B\n    A e2@--> C\n    e1@{ curve: linear }\n    e2@{ curve: natural }\n```\n\n```info\nAny edge curve style modified at the edge level overrides the diagram level style.\n```\n\n```info\nIf the same edge is modified multiple times the last modification will be rendered.\n```\n\n### Styling a node\n\nIt is possible to apply specific styles such as a thicker border or a different background color to a node.\n\n```mermaid-example\nflowchart LR\n    id1(Start)-->id2(Stop)\n    style id1 fill:#f9f,stroke:#333,stroke-width:4px\n    style id2 fill:#bbf,stroke:#f66,stroke-width:2px,color:#fff,stroke-dasharray: 5 5\n```\n\n```mermaid\nflowchart LR\n    id1(Start)-->id2(Stop)\n    style id1 fill:#f9f,stroke:#333,stroke-width:4px\n    style id2 fill:#bbf,stroke:#f66,stroke-width:2px,color:#fff,stroke-dasharray: 5 5\n```\n\n#### Classes\n\nMore convenient than defining the style every time is to define a class of styles and attach this class to the nodes that\nshould have a different look.\n\nA class definition looks like the example below:\n\n```\n    classDef className fill:#f9f,stroke:#333,stroke-width:4px;\n```\n\nAlso, it is possible to define style to multiple classes in one statement:\n\n```\n    classDef firstClassName,secondClassName font-size:12pt;\n```\n\nAttachment of a class to a node is done as per below:\n\n```\n    class nodeId1 className;\n```\n\nIt is also possible to attach a class to a list of nodes in one statement:\n\n```\n    class nodeId1,nodeId2 className;\n```\n\nA shorter form of adding a class is to attach the classname to the node using the `:::`operator as per below:\n\n```mermaid-example\nflowchart LR\n    A:::someclass --> B\n    classDef someclass fill:#f96\n```\n\n```mermaid\nflowchart LR\n    A:::someclass --> B\n    classDef someclass fill:#f96\n```\n\nThis form can be used when declaring multiple links between nodes:\n\n```mermaid-example\nflowchart LR\n    A:::foo & B:::bar --> C:::foobar\n    classDef foo stroke:#f00\n    classDef bar stroke:#0f0\n    classDef foobar stroke:#00f\n```\n\n```mermaid\nflowchart LR\n    A:::foo & B:::bar --> C:::foobar\n    classDef foo stroke:#f00\n    classDef bar stroke:#0f0\n    classDef foobar stroke:#00f\n```\n\n### CSS classes\n\n> **Note:** Applying styles to Mermaid nodes via external CSS (e.g., `.cssClass > rect { fill: ... }`) does **not** work reliably. Mermaid\'s internal styles are injected with `!important` and scoped to the SVG element ID, giving them higher specificity than external CSS rules. External CSS will be silently overridden.\n>\n> The recommended approach is to use the `classDef` syntax shown in the [Classes](#classes) section above, which works correctly and is the intended styling mechanism.\n>\n> If external CSS is strictly required, every property must use `!important` to override Mermaid\'s styles — but this is not recommended.\n\n**Working approach — use `classDef` instead:**\n\n```mermaid-example\nflowchart LR\n    A:::myStyle --> B\n    classDef myStyle fill:#ff0000,stroke:#ffff00,stroke-width:4px\n```\n\n```mermaid\nflowchart LR\n    A:::myStyle --> B\n    classDef myStyle fill:#ff0000,stroke:#ffff00,stroke-width:4px\n```\n\n### Default class\n\nIf a class is named default it will be assigned to all classes without specific class definitions.\n\n```\n    classDef default fill:#f9f,stroke:#333,stroke-width:4px;\n```\n\n## Basic support for fontawesome\n\nIt is possible to add icons from fontawesome.\n\nThe icons are accessed via the syntax fa:#icon class name#.\n\n```mermaid-example\nflowchart TD\n    B["fa:fa-twitter for peace"]\n    B-->C[fa:fa-ban forbidden]\n    B-->D(fa:fa-spinner)\n    B-->E(A fa:fa-camera-retro perhaps?)\n```\n\n```mermaid\nflowchart TD\n    B["fa:fa-twitter for peace"]\n    B-->C[fa:fa-ban forbidden]\n    B-->D(fa:fa-spinner)\n    B-->E(A fa:fa-camera-retro perhaps?)\n```\n\nThere are two ways to display these FontAwesome icons:\n\n### Register FontAwesome icon packs (v11.7.0+)\n\nYou can register your own FontAwesome icon pack following the ["Registering icon packs" instructions](../config/icons.md).\n\nSupported prefixes: `fa`, `fab`, `fas`, `far`, `fal`, `fad`.\n\n> **Note**\n> Note that it will fall back to FontAwesome CSS if FontAwesome packs are not registered.\n\n### Register FontAwesome CSS\n\nMermaid supports Font Awesome if the CSS is included on the website.\nMermaid does not have any restriction on the version of Font Awesome that can be used.\n\nPlease refer the [Official Font Awesome Documentation](https://fontawesome.com/start) on how to include it in your website.\n\nAdding this snippet in the `<head>` would add support for Font Awesome v6.5.1\n\n```html\n<link\n  href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css"\n  rel="stylesheet"\n/>\n```\n\n### Custom icons\n\nIt is possible to use custom icons served from Font Awesome as long as the website imports the corresponding kit.\n\nNote that this is currently a paid feature from Font Awesome.\n\nFor custom icons, you need to use the `fak` prefix.\n\n**Example**\n\n```\nflowchart TD\n    B[fa:fa-twitter] %% standard icon\n    B-->E(fak:fa-custom-icon-name) %% custom icon\n```\n\nAnd trying to render it\n\n```mermaid-example\nflowchart TD\n    B["fa:fa-twitter for peace"]\n    B-->C["fab:fa-truck-bold a custom icon"]\n```\n\n```mermaid\nflowchart TD\n    B["fa:fa-twitter for peace"]\n    B-->C["fab:fa-truck-bold a custom icon"]\n```\n\n## Graph declarations with spaces between vertices and link and without semicolon\n\n- In graph declarations, the statements also can now end without a semicolon. After release 0.2.16, ending a graph statement with semicolon is just optional. So the below graph declaration is also valid along with the old declarations of the graph.\n\n- A single space is allowed between vertices and the link. However there should not be any space between a vertex and its text and a link and its text. The old syntax of graph declaration will also work and hence this new feature is optional and is introduced to improve readability.\n\nBelow is the new declaration of the graph edges which is also valid along with the old declaration of the graph edges.\n\n```mermaid-example\nflowchart LR\n    A[Hard edge] -->|Link text| B(Round edge)\n    B --> C{Decision}\n    C -->|One| D[Result one]\n    C -->|Two| E[Result two]\n```\n\n```mermaid\nflowchart LR\n    A[Hard edge] -->|Link text| B(Round edge)\n    B --> C{Decision}\n    C -->|One| D[Result one]\n    C -->|Two| E[Result two]\n```\n\n## Configuration\n\n### Renderer\n\nThe layout of the diagram is done with the renderer. The default renderer is dagre.\n\nStarting with Mermaid version 9.4, you can use an alternate renderer named elk. The elk renderer is better for larger and/or more complex diagrams.\n\nThe _elk_ renderer is an experimental feature.\nYou can change the renderer to elk by adding this directive:\n\n```\nconfig:\n  flowchart:\n    defaultRenderer: "elk"\n```\n\n> **Note**\n> Note that the site needs to use mermaid version 9.4+ for this to work and have this featured enabled in the lazy-loading configuration.\n\n### Width\n\nIt is possible to adjust the width of the rendered flowchart.\n\nThis is done by defining **mermaid.flowchartConfig** or by the CLI to use a JSON file with the configuration. How to use the CLI is described in the mermaidCLI page.\nmermaid.flowchartConfig can be set to a JSON string with config parameters or the corresponding object.\n\n```javascript\nmermaid.flowchartConfig = {\n    width: 100%\n}\n```\n\n<!--- cspell:ignore lagom --->\n';
-const __vite_glob_0_28 = '> **Warning**\n>\n> ## THIS IS AN AUTOGENERATED FILE. DO NOT EDIT.\n>\n> ## Please edit the corresponding file in [/packages/mermaid/src/docs/syntax/gantt.md](../../packages/mermaid/src/docs/syntax/gantt.md).\n\n# Gantt diagrams\n\n> A Gantt chart is a type of bar chart, first developed by Karol Adamiecki in 1896, and independently by Henry Gantt in the 1910s, that illustrates a project schedule and the amount of time it would take for any one project to finish. Gantt charts illustrate number of days between the start and finish dates of the terminal elements and summary elements of a project.\n\n## A note to users\n\nGantt Charts will record each scheduled task as one continuous bar that extends from the left to the right. The x axis represents time and the y records the different tasks and the order in which they are to be completed.\n\nIt is important to remember that when a date, day, or collection of dates specific to a task are "excluded", the Gantt Chart will accommodate those changes by extending an equal number of days, towards the right, not by creating a gap inside the task.\nAs shown here ![](./img/Gantt-excluded-days-within.png)\n\nHowever, if the excluded dates are between two tasks that are set to start consecutively, the excluded dates will be skipped graphically and left blank, and the following task will begin after the end of the excluded dates.\nAs shown here ![](./img/Gantt-long-weekend-look.png)\n\nA Gantt chart is useful for tracking the amount of time it would take before a project is finished, but it can also be used to graphically represent "non-working days", with a few tweaks.\n\nMermaid can render Gantt diagrams as SVG, PNG or a MarkDown link that can be pasted into docs.\n\n```mermaid-example\ngantt\n    title A Gantt Diagram\n    dateFormat YYYY-MM-DD\n    section Section\n        A task          :a1, 2014-01-01, 30d\n        Another task    :after a1, 20d\n    section Another\n        Task in Another :2014-01-12, 12d\n        another task    :24d\n```\n\n```mermaid\ngantt\n    title A Gantt Diagram\n    dateFormat YYYY-MM-DD\n    section Section\n        A task          :a1, 2014-01-01, 30d\n        Another task    :after a1, 20d\n    section Another\n        Task in Another :2014-01-12, 12d\n        another task    :24d\n```\n\n## Syntax\n\n```mermaid-example\ngantt\n    dateFormat  YYYY-MM-DD\n    title       Adding GANTT diagram functionality to mermaid\n    excludes    weekends\n    %% (`excludes` accepts specific dates in YYYY-MM-DD format, days of the week ("sunday") or "weekends", but not the word "weekdays".)\n\n    section A section\n    Completed task            :done,    des1, 2014-01-06,2014-01-08\n    Active task               :active,  des2, 2014-01-09, 3d\n    Future task               :         des3, after des2, 5d\n    Future task2              :         des4, after des3, 5d\n\n    section Critical tasks\n    Completed task in the critical line :crit, done, 2014-01-06,24h\n    Implement parser and jison          :crit, done, after des1, 2d\n    Create tests for parser             :crit, active, 3d\n    Future task in critical line        :crit, 5d\n    Create tests for renderer           :2d\n    Add to mermaid                      :until isadded\n    Functionality added                 :milestone, isadded, 2014-01-25, 0d\n\n    section Documentation\n    Describe gantt syntax               :active, a1, after des1, 3d\n    Add gantt diagram to demo page      :after a1  , 20h\n    Add another diagram to demo page    :doc1, after a1  , 48h\n\n    section Last section\n    Describe gantt syntax               :after doc1, 3d\n    Add gantt diagram to demo page      :20h\n    Add another diagram to demo page    :48h\n```\n\n```mermaid\ngantt\n    dateFormat  YYYY-MM-DD\n    title       Adding GANTT diagram functionality to mermaid\n    excludes    weekends\n    %% (`excludes` accepts specific dates in YYYY-MM-DD format, days of the week ("sunday") or "weekends", but not the word "weekdays".)\n\n    section A section\n    Completed task            :done,    des1, 2014-01-06,2014-01-08\n    Active task               :active,  des2, 2014-01-09, 3d\n    Future task               :         des3, after des2, 5d\n    Future task2              :         des4, after des3, 5d\n\n    section Critical tasks\n    Completed task in the critical line :crit, done, 2014-01-06,24h\n    Implement parser and jison          :crit, done, after des1, 2d\n    Create tests for parser             :crit, active, 3d\n    Future task in critical line        :crit, 5d\n    Create tests for renderer           :2d\n    Add to mermaid                      :until isadded\n    Functionality added                 :milestone, isadded, 2014-01-25, 0d\n\n    section Documentation\n    Describe gantt syntax               :active, a1, after des1, 3d\n    Add gantt diagram to demo page      :after a1  , 20h\n    Add another diagram to demo page    :doc1, after a1  , 48h\n\n    section Last section\n    Describe gantt syntax               :after doc1, 3d\n    Add gantt diagram to demo page      :20h\n    Add another diagram to demo page    :48h\n```\n\nTasks are by default sequential. A task start date defaults to the end date of the preceding task.\n\nA colon, `:`, separates the task title from its metadata.\nMetadata items are separated by a comma, `,`. Valid tags are `active`, `done`, `crit`, and `milestone`. Tags are optional, but if used, they must be specified first.\nAfter processing the tags, the remaining metadata items are interpreted as follows:\n\n1. If a single item is specified, it determines when the task ends. It can either be a specific date/time or a duration. If a duration is specified, it is added to the start date of the task to determine the end date of the task, taking into account any exclusions.\n2. If two items are specified, the last item is interpreted as in the previous case. The first item can either specify an explicit start date/time (in the format specified by `dateFormat`) or reference another task using `after <otherTaskID> [[otherTaskID2 [otherTaskID3]]...]`. In the latter case, the start date of the task will be set according to the latest end date of any referenced task.\n3. If three items are specified, the last two will be interpreted as in the previous case. The first item will denote the ID of the task, which can be referenced using the `later <taskID>` syntax.\n\n| Metadata syntax                                      | Start date                                          | End date                                              | ID       |\n| ---------------------------------------------------- | --------------------------------------------------- | ----------------------------------------------------- | -------- |\n| `<taskID>, <startDate>, <endDate>`                   | `startdate` as interpreted using `dateformat`       | `endDate` as interpreted using `dateformat`           | `taskID` |\n| `<taskID>, <startDate>, <length>`                    | `startdate` as interpreted using `dateformat`       | Start date + `length`                                 | `taskID` |\n| `<taskID>, after <otherTaskId>, <endDate>`           | End date of previously specified task `otherTaskID` | `endDate` as interpreted using `dateformat`           | `taskID` |\n| `<taskID>, after <otherTaskId>, <length>`            | End date of previously specified task `otherTaskID` | Start date + `length`                                 | `taskID` |\n| `<taskID>, <startDate>, until <otherTaskId>`         | `startdate` as interpreted using `dateformat`       | Start date of previously specified task `otherTaskID` | `taskID` |\n| `<taskID>, after <otherTaskId>, until <otherTaskId>` | End date of previously specified task `otherTaskID` | Start date of previously specified task `otherTaskID` | `taskID` |\n| `<startDate>, <endDate>`                             | `startdate` as interpreted using `dateformat`       | `enddate` as interpreted using `dateformat`           | n/a      |\n| `<startDate>, <length>`                              | `startdate` as interpreted using `dateformat`       | Start date + `length`                                 | n/a      |\n| `after <otherTaskID>, <endDate>`                     | End date of previously specified task `otherTaskID` | `enddate` as interpreted using `dateformat`           | n/a      |\n| `after <otherTaskID>, <length>`                      | End date of previously specified task `otherTaskID` | Start date + `length`                                 | n/a      |\n| `<startDate>, until <otherTaskId>`                   | `startdate` as interpreted using `dateformat`       | Start date of previously specified task `otherTaskID` | n/a      |\n| `after <otherTaskId>, until <otherTaskId>`           | End date of previously specified task `otherTaskID` | Start date of previously specified task `otherTaskID` | n/a      |\n| `<endDate>`                                          | End date of preceding task                          | `enddate` as interpreted using `dateformat`           | n/a      |\n| `<length>`                                           | End date of preceding task                          | Start date + `length`                                 | n/a      |\n| `until <otherTaskId>`                                | End date of preceding task                          | Start date of previously specified task `otherTaskID` | n/a      |\n\n> **Note**\n> Support for keyword `until` was added in (v10.9.0+). This can be used to define a task which is running until some other specific task or milestone starts.\n\n#### Duration format\n\nWhen specifying a `<length>`, use a number followed by one of these unit suffixes:\n\n| Unit         | Suffix | Example |\n| ------------ | ------ | ------- |\n| Milliseconds | `ms`   | `500ms` |\n| Seconds      | `s`    | `30s`   |\n| Minutes      | `m`    | `30m`   |\n| Hours        | `h`    | `4h`    |\n| Days         | `d`    | `3d`    |\n| Weeks        | `w`    | `2w`    |\n| Months       | `M`    | `1M`    |\n| Years        | `y`    | `1y`    |\n\nDecimal values are also supported (e.g., `1.5d`). Invalid duration tokens (e.g., `3dX`) will be ignored and the task will default to zero duration.\n\nFor simplicity, the table does not show the use of multiple tasks listed with the `after` keyword. Here is an example of how to use it and how it\'s interpreted:\n\n```mermaid-example\ngantt\n    apple :a, 2017-07-20, 1w\n    banana :crit, b, 2017-07-23, 1d\n    cherry :active, c, after b a, 1d\n    kiwi   :d, 2017-07-20, until b c\n```\n\n```mermaid\ngantt\n    apple :a, 2017-07-20, 1w\n    banana :crit, b, 2017-07-23, 1d\n    cherry :active, c, after b a, 1d\n    kiwi   :d, 2017-07-20, until b c\n```\n\n### Title\n\nThe `title` is an _optional_ string to be displayed at the top of the Gantt chart to describe the chart as a whole.\n\n### Excludes\n\nThe `excludes` is an _optional_ attribute that accepts specific dates in YYYY-MM-DD format, days of the week ("sunday") or "weekends", but not the word "weekdays".\nThese date will be marked on the graph, and be excluded from the duration calculation of tasks. Meaning that if there are excluded dates during a task interval, the number of \'skipped\' days will be added to the end of the task to ensure the duration is as specified in the code.\n\nMultiple `excludes` lines are supported and their tokens are concatenated, so long exclusion lists can be split across grouped lines with comments:\n\n```\ngantt\n    dateFormat DD-MM-YYYY\n    excludes weekends\n    %% week 7 is winter break\n    excludes 10-02-2025 11-02-2025 12-02-2025 13-02-2025 14-02-2025\n    %% workers holiday 1 maj\n    excludes 01-05-2025\n```\n\n#### Weekend (v\\11.0.0+)\n\nWhen excluding weekends, it is possible to configure the weekends to be either Friday and Saturday or Saturday and Sunday. By default weekends are Saturday and Sunday.\nTo define the weekend start day, there is an _optional_ attribute `weekend` that can be added in a new line followed by either `friday` or `saturday`.\n\n```mermaid-example\ngantt\n    title A Gantt Diagram Excluding Fri - Sat weekends\n    dateFormat YYYY-MM-DD\n    excludes weekends\n    weekend friday\n    section Section\n        A task          :a1, 2024-01-01, 30d\n        Another task    :after a1, 20d\n```\n\n```mermaid\ngantt\n    title A Gantt Diagram Excluding Fri - Sat weekends\n    dateFormat YYYY-MM-DD\n    excludes weekends\n    weekend friday\n    section Section\n        A task          :a1, 2024-01-01, 30d\n        Another task    :after a1, 20d\n```\n\n### Section statements\n\nYou can divide the chart into various sections, for example to separate different parts of a project like development and documentation.\n\nTo do so, start a line with the `section` keyword and give it a name. (Note that unlike with the [title for the entire chart](#title), this name is _required_.\n\n### Milestones\n\nYou can add milestones to the diagrams. Milestones differ from tasks as they represent a single instant in time and are identified by the keyword `milestone`. Below is an example on how to use milestones. As you may notice, the exact location of the milestone is determined by the initial date for the milestone and the "duration" of the task this way: _initial date_+_duration_/2.\n\n```mermaid-example\ngantt\n    dateFormat HH:mm\n    axisFormat %H:%M\n    Initial milestone : milestone, m1, 17:49, 2m\n    Task A : 10m\n    Task B : 5m\n    Final milestone : milestone, m2, 18:08, 4m\n```\n\n```mermaid\ngantt\n    dateFormat HH:mm\n    axisFormat %H:%M\n    Initial milestone : milestone, m1, 17:49, 2m\n    Task A : 10m\n    Task B : 5m\n    Final milestone : milestone, m2, 18:08, 4m\n```\n\n### Vertical Markers\n\nThe `vert` keyword lets you add vertical lines to your Gantt chart, making it easy to highlight important dates like deadlines, events, or checkpoints. These markers extend across the entire chart and are positioned based on the date you provide. Unlike milestones, vertical markers don’t take up a row. They’re purely visual reference points that help break up the timeline and make important moments easier to spot.\n\n```mermaid-example\ngantt\n    dateFormat HH:mm\n    axisFormat %H:%M\n    Initial vert : vert, v1, 17:30, 2m\n    Task A : 3m\n    Task B : 8m\n    Final vert : vert, v2, 17:58, 4m\n```\n\n```mermaid\ngantt\n    dateFormat HH:mm\n    axisFormat %H:%M\n    Initial vert : vert, v1, 17:30, 2m\n    Task A : 3m\n    Task B : 8m\n    Final vert : vert, v2, 17:58, 4m\n```\n\n## Setting dates\n\n`dateFormat` defines the format of the date **input** of your gantt elements. How these dates are represented in the rendered chart **output** are defined by `axisFormat`.\n\n### Input date format\n\nThe default input date format is `YYYY-MM-DD`. You can define your custom `dateFormat`.\n\n```markdown\ndateFormat YYYY-MM-DD\n```\n\nThe following formatting options are supported:\n\n| Input      | Example        | Description                                            |\n| ---------- | -------------- | ------------------------------------------------------ |\n| `YYYY`     | 2014           | 4 digit year                                           |\n| `YY`       | 14             | 2 digit year                                           |\n| `Q`        | 1..4           | Quarter of year. Sets month to first month in quarter. |\n| `M MM`     | 1..12          | Month number                                           |\n| `MMM MMMM` | January..Dec   | Month name in locale set by `dayjs.locale()`           |\n| `D DD`     | 1..31          | Day of month                                           |\n| `Do`       | 1st..31st      | Day of month with ordinal                              |\n| `DDD DDDD` | 1..365         | Day of year                                            |\n| `X`        | 1410715640.579 | Unix timestamp                                         |\n| `x`        | 1410715640579  | Unix ms timestamp                                      |\n| `H HH`     | 0..23          | 24 hour time                                           |\n| `h hh`     | 1..12          | 12 hour time used with `a A`.                          |\n| `a A`      | am pm          | Post or ante meridiem                                  |\n| `m mm`     | 0..59          | Minutes                                                |\n| `s ss`     | 0..59          | Seconds                                                |\n| `S`        | 0..9           | Tenths of a second                                     |\n| `SS`       | 0..99          | Hundreds of a second                                   |\n| `SSS`      | 0..999         | Thousandths of a second                                |\n| `Z ZZ`     | +12:00         | Offset from UTC as +-HH:mm, +-HHmm, or Z               |\n\nMore info in: <https://day.js.org/docs/en/parse/string-format/>\n\n### Output date format on the axis\n\nThe default output date format is `YYYY-MM-DD`. You can define your custom `axisFormat`, like `2020-Q1` for the first quarter of the year 2020.\n\n```markdown\naxisFormat %Y-%m-%d\n```\n\nThe following formatting strings are supported:\n\n| Format | Definition                                                                                 |\n| ------ | ------------------------------------------------------------------------------------------ |\n| %a     | abbreviated weekday name                                                                   |\n| %A     | full weekday name                                                                          |\n| %b     | abbreviated month name                                                                     |\n| %B     | full month name                                                                            |\n| %c     | date and time, as "%a %b %e %H:%M:%S %Y"                                                   |\n| %d     | zero-padded day of the month as a decimal number \\[01,31]                                  |\n| %e     | space-padded day of the month as a decimal number \\[ 1,31]; equivalent to %\\_d             |\n| %H     | hour (24-hour clock) as a decimal number \\[00,23]                                          |\n| %I     | hour (12-hour clock) as a decimal number \\[01,12]                                          |\n| %j     | day of the year as a decimal number \\[001,366]                                             |\n| %m     | month as a decimal number \\[01,12]                                                         |\n| %M     | minute as a decimal number \\[00,59]                                                        |\n| %L     | milliseconds as a decimal number \\[000, 999]                                               |\n| %p     | either AM or PM                                                                            |\n| %S     | second as a decimal number \\[00,61]                                                        |\n| %U     | week number of the year (Sunday as the first day of the week) as a decimal number \\[00,53] |\n| %w     | weekday as a decimal number \\[0(Sunday),6]                                                 |\n| %W     | week number of the year (Monday as the first day of the week) as a decimal number \\[00,53] |\n| %x     | date, as "%m/%d/%Y"                                                                        |\n| %X     | time, as "%H:%M:%S"                                                                        |\n| %y     | year without century as a decimal number \\[00,99]                                          |\n| %Y     | year with century as a decimal number                                                      |\n| %Z     | time zone offset, such as "-0700"                                                          |\n| %%     | a literal "%" character                                                                    |\n\nMore info in: <https://github.com/d3/d3-time-format/tree/v4.0.0#locale_format>\n\n### Axis ticks (v10.3.0+)\n\nThe default output ticks are auto. You can custom your `tickInterval`, like `1day` or `1week`.\n\n```markdown\ntickInterval 1day\n```\n\nThe pattern is:\n\n```javascript\n/^([1-9][0-9]*)(millisecond|second|minute|hour|day|week|month)$/;\n```\n\nMore info in: <https://github.com/d3/d3-time#interval_every>\n\nWeek-based `tickInterval`s start the week on sunday by default. If you wish to specify another weekday on which the `tickInterval` should start, use the `weekday` option:\n\n```mermaid-example\ngantt\n  tickInterval 1week\n  weekday monday\n```\n\n```mermaid\ngantt\n  tickInterval 1week\n  weekday monday\n```\n\n> **Warning**\n> `millisecond` and `second` support was added in v10.3.0\n\n## Output in compact mode\n\nThe compact mode allows you to display multiple tasks in the same row. Compact mode can be enabled for a gantt chart by setting the display mode of the graph via preceding YAML settings.\n\n```mermaid-example\n---\ndisplayMode: compact\n---\ngantt\n    title A Gantt Diagram\n    dateFormat  YYYY-MM-DD\n\n    section Section\n    A task           :a1, 2014-01-01, 30d\n    Another task     :a2, 2014-01-20, 25d\n    Another one      :a3, 2014-02-10, 20d\n```\n\n```mermaid\n---\ndisplayMode: compact\n---\ngantt\n    title A Gantt Diagram\n    dateFormat  YYYY-MM-DD\n\n    section Section\n    A task           :a1, 2014-01-01, 30d\n    Another task     :a2, 2014-01-20, 25d\n    Another one      :a3, 2014-02-10, 20d\n```\n\n## Comments\n\nComments can be entered within a gantt chart, which will be ignored by the parser. Comments need to be on their own line and must be prefaced with `%%` (double percent signs). Any text after the start of the comment to the next newline will be treated as a comment, including any diagram syntax.\n\n```mermaid-example\ngantt\n    title A Gantt Diagram\n    %% This is a comment\n    dateFormat YYYY-MM-DD\n    section Section\n        A task          :a1, 2014-01-01, 30d\n        Another task    :after a1, 20d\n    section Another\n        Task in Another :2014-01-12, 12d\n        another task    :24d\n```\n\n```mermaid\ngantt\n    title A Gantt Diagram\n    %% This is a comment\n    dateFormat YYYY-MM-DD\n    section Section\n        A task          :a1, 2014-01-01, 30d\n        Another task    :after a1, 20d\n    section Another\n        Task in Another :2014-01-12, 12d\n        another task    :24d\n```\n\n## Styling\n\nStyling of the Gantt diagram is done by defining a number of CSS classes. During rendering, these classes are extracted from the file located at src/diagrams/gantt/styles.js\n\n### Classes used\n\n| Class                 | Description                                                            |\n| --------------------- | ---------------------------------------------------------------------- |\n| grid.tick             | Styling for the Grid Lines                                             |\n| grid.path             | Styling for the Grid\'s borders                                         |\n| .taskText             | Task Text Styling                                                      |\n| .taskTextOutsideRight | Styling for Task Text that exceeds the activity bar towards the right. |\n| .taskTextOutsideLeft  | Styling for Task Text that exceeds the activity bar, towards the left. |\n| todayMarker           | Toggle and Styling for the "Today Marker"                              |\n\n### Sample stylesheet\n\n```css\n.grid .tick {\n  stroke: lightgrey;\n  opacity: 0.3;\n  shape-rendering: crispEdges;\n}\n.grid path {\n  stroke-width: 0;\n}\n\n#tag {\n  color: white;\n  background: #fa283d;\n  width: 150px;\n  position: absolute;\n  display: none;\n  padding: 3px 6px;\n  margin-left: -80px;\n  font-size: 11px;\n}\n\n#tag:before {\n  border: solid transparent;\n  content: \' \';\n  height: 0;\n  left: 50%;\n  margin-left: -5px;\n  position: absolute;\n  width: 0;\n  border-width: 10px;\n  border-bottom-color: #fa283d;\n  top: -20px;\n}\n.taskText {\n  fill: white;\n  text-anchor: middle;\n}\n.taskTextOutsideRight {\n  fill: black;\n  text-anchor: start;\n}\n.taskTextOutsideLeft {\n  fill: black;\n  text-anchor: end;\n}\n```\n\n## Today marker\n\nYou can style or hide the marker for the current date. To style it, add a value for the `todayMarker` key.\n\n```\ntodayMarker stroke-width:5px,stroke:#0f0,opacity:0.5\n```\n\nTo hide the marker, set `todayMarker` to `off`.\n\n```\ntodayMarker off\n```\n\n## Configuration\n\nIt is possible to adjust the margins for rendering the gantt diagram.\n\nThis is done by defining the `ganttConfig` part of the configuration object.\nHow to use the CLI is described in the [mermaidCLI](../config/mermaidCLI.md) page.\n\nmermaid.ganttConfig can be set to a JSON string with config parameters or the corresponding object.\n\n```javascript\nmermaid.ganttConfig = {\n  titleTopMargin: 25, // Margin top for the text over the diagram\n  barHeight: 20, // The height of the bars in the graph\n  barGap: 4, // The margin between the different activities in the gantt diagram\n  topPadding: 75, // Margin between title and gantt diagram and between axis and gantt diagram.\n  rightPadding: 75, // The space allocated for the section name to the right of the activities\n  leftPadding: 75, // The space allocated for the section name to the left of the activities\n  gridLineStartPadding: 10, // Vertical starting position of the grid lines\n  fontSize: 12, // Font size\n  sectionFontSize: 24, // Font size for sections\n  numberSectionStyles: 1, // The number of alternating section styles\n  axisFormat: \'%d/%m\', // Date/time format of the axis\n  tickInterval: \'1week\', // Axis ticks\n  topAxis: true, // When this flag is set, date labels will be added to the top of the chart\n  displayMode: \'compact\', // Turns compact mode on\n  weekday: \'sunday\', // On which day a week-based interval should start\n};\n```\n\n### Possible configuration params:\n\n| Param           | Description                                                                                                                                | Default value |\n| --------------- | ------------------------------------------------------------------------------------------------------------------------------------------ | ------------- |\n| mirrorActor     | Turns on/off the rendering of actors below the diagram as well as above it                                                                 | false         |\n| bottomMarginAdj | Adjusts how far down the graph ended. Wide borders styles with css could generate unwanted clipping which is why this config param exists. | 1             |\n\n## Interaction\n\nIt is possible to bind a click event to a task. The click can lead to either a javascript callback or to a link which will be opened in the current browser tab. **Note**: This functionality is disabled when using `securityLevel=\'strict\'` and enabled when using `securityLevel=\'loose\'`.\n\n```\nclick taskId call callback(arguments)\nclick taskId href URL\n```\n\n- taskId is the id of the task\n- callback is the name of a javascript function defined on the page displaying the graph, the function will be called with the taskId as the parameter if no other arguments are specified.\n\nBeginner\'s tip—a full example using interactive links in an HTML context:\n\n```html\n<body>\n  <pre class="mermaid">\n    gantt\n      dateFormat  YYYY-MM-DD\n\n      section Clickable\n      Visit mermaidjs         :active, cl1, 2014-01-07, 3d\n      Print arguments         :cl2, after cl1, 3d\n      Print task              :cl3, after cl2, 3d\n\n      click cl1 href "https://mermaidjs.github.io/"\n      click cl2 call printArguments("test1", "test2", test3)\n      click cl3 call printTask()\n  </pre>\n\n  <script>\n    const printArguments = function (arg1, arg2, arg3) {\n      alert(\'printArguments called with arguments: \' + arg1 + \', \' + arg2 + \', \' + arg3);\n    };\n    const printTask = function (taskId) {\n      alert(\'taskId: \' + taskId);\n    };\n    const config = {\n      startOnLoad: true,\n      securityLevel: \'loose\',\n    };\n    mermaid.initialize(config);\n  <\/script>\n</body>\n```\n\n## Examples\n\n### Bar chart (using gantt chart)\n\n```mermaid-example\ngantt\n    title Git Issues - days since last update\n    dateFormat X\n    axisFormat %s\n    section Issue19062\n    71   : 0, 71\n    section Issue19401\n    36   : 0, 36\n    section Issue193\n    34   : 0, 34\n    section Issue7441\n    9    : 0, 9\n    section Issue1300\n    5    : 0, 5\n```\n\n```mermaid\ngantt\n    title Git Issues - days since last update\n    dateFormat X\n    axisFormat %s\n    section Issue19062\n    71   : 0, 71\n    section Issue19401\n    36   : 0, 36\n    section Issue193\n    34   : 0, 34\n    section Issue7441\n    9    : 0, 9\n    section Issue1300\n    5    : 0, 5\n```\n\n### Timeline (with comments, CSS, config in frontmatter)\n\n```mermaid-example\n---\n    # Frontmatter config, YAML comments\n    title: Ignored if specified in chart\n    displayMode: compact     #gantt specific setting but works at this level too\n    config:\n#        theme: forest\n#        themeCSS: " #item36 { fill: CadetBlue } "\n        themeCSS: " // YAML supports multiline strings using a newline markers: \\n\n            #item36 { fill: CadetBlue }       \\n\n\n            // Custom marker workaround CSS from forum (below)    \\n\n            rect[id^=workaround] { height: calc(100% - 50px) ; transform: translate(9px, 25px); y: 0; width: 1.5px; stroke: none; fill: red; }   \\n\n            text[id^=workaround] { fill: red; y: 100%; font-size: 15px;}\n        "\n        gantt:\n            useWidth: 400\n            rightPadding: 0\n            topAxis: true  #false\n            numberSectionStyles: 2\n---\ngantt\n    title Timeline - Gantt Sampler\n    dateFormat YYYY\n    axisFormat %y\n    %% this next line doesn\'t recognise \'decade\' or \'year\', but will silently ignore\n    tickInterval 1decade\n\n    section Issue19062\n    71   :            item71, 1900, 1930\n    section Issue19401\n    36   :            item36, 1913, 1935\n    section Issue1300\n    94   :            item94, 1910, 1915\n    5    :            item5,  1920, 1925\n    0    : milestone, item0,  1918, 1s\n    9    : vert,              1906, 1s   %% not yet official\n    64   : workaround,        1923, 1s   %% custom CSS object https://github.com/mermaid-js/mermaid/issues/3250\n```\n\n```mermaid\n---\n    # Frontmatter config, YAML comments\n    title: Ignored if specified in chart\n    displayMode: compact     #gantt specific setting but works at this level too\n    config:\n#        theme: forest\n#        themeCSS: " #item36 { fill: CadetBlue } "\n        themeCSS: " // YAML supports multiline strings using a newline markers: \\n\n            #item36 { fill: CadetBlue }       \\n\n\n            // Custom marker workaround CSS from forum (below)    \\n\n            rect[id^=workaround] { height: calc(100% - 50px) ; transform: translate(9px, 25px); y: 0; width: 1.5px; stroke: none; fill: red; }   \\n\n            text[id^=workaround] { fill: red; y: 100%; font-size: 15px;}\n        "\n        gantt:\n            useWidth: 400\n            rightPadding: 0\n            topAxis: true  #false\n            numberSectionStyles: 2\n---\ngantt\n    title Timeline - Gantt Sampler\n    dateFormat YYYY\n    axisFormat %y\n    %% this next line doesn\'t recognise \'decade\' or \'year\', but will silently ignore\n    tickInterval 1decade\n\n    section Issue19062\n    71   :            item71, 1900, 1930\n    section Issue19401\n    36   :            item36, 1913, 1935\n    section Issue1300\n    94   :            item94, 1910, 1915\n    5    :            item5,  1920, 1925\n    0    : milestone, item0,  1918, 1s\n    9    : vert,              1906, 1s   %% not yet official\n    64   : workaround,        1923, 1s   %% custom CSS object https://github.com/mermaid-js/mermaid/issues/3250\n```\n\n<!--- cspell:ignore isadded --->\n';
-const __vite_glob_0_29 = "> **Warning**\n>\n> ## THIS IS AN AUTOGENERATED FILE. DO NOT EDIT.\n>\n> ## Please edit the corresponding file in [/packages/mermaid/src/docs/syntax/gitgraph.md](../../packages/mermaid/src/docs/syntax/gitgraph.md).\n\n# GitGraph Diagrams\n\n> A Git Graph is a pictorial representation of git commits and git actions(commands) on various branches.\n\nThese kind of diagram are particularly helpful to developers and devops teams to share their Git branching strategies. For example, it makes it easier to visualize how git flow works.\n\nMermaid can render Git diagrams\n\n```mermaid-example\n---\ntitle: Example Git diagram\n---\ngitGraph\n   commit\n   commit\n   branch develop\n   checkout develop\n   commit\n   commit\n   checkout main\n   merge develop\n   commit\n   commit\n```\n\n```mermaid\n---\ntitle: Example Git diagram\n---\ngitGraph\n   commit\n   commit\n   branch develop\n   checkout develop\n   commit\n   commit\n   checkout main\n   merge develop\n   commit\n   commit\n```\n\nIn Mermaid, we support the basic git operations like:\n\n- _commit_ : Representing a new commit on the current branch.\n- _branch_ : To create & switch to a new branch, setting it as the current branch.\n- _checkout_ : To checking out an existing branch and setting it as the current branch.\n- _merge_ : To merge an existing branch onto the current branch.\n\nWith the help of these key git commands, you will be able to draw a gitgraph in Mermaid very easily and quickly.\nEntity names are often capitalized, although there is no accepted standard on this, and it is not required in Mermaid.\n\n**NOTE**: `checkout` and `switch` can be used interchangeably.\n\n## Syntax\n\nMermaid syntax for a gitgraph is very straight-forward and simple. It follows a declarative-approach, where each commit is drawn on the timeline in the diagram, in order of its occurrences/presence in code. Basically, it follows the insertion order for each command.\n\nFirst thing you do is to declare your diagram type using the **gitgraph** keyword. This `gitgraph` keyword, tells Mermaid that you wish to draw a gitgraph, and parse the diagram code accordingly.\n\nEach gitgraph, is initialized with **_main_** branch. So unless you create a different branch, by-default the commits will go to the main branch. This is driven with how git works, where in the beginning you always start with the main branch (formerly called as **_master_** branch). And by-default, `main` branch is set as your **_current branch_**.\n\nYou make use of **_commit_** keyword to register a commit on the current branch. Let see how this works:\n\nA simple gitgraph showing three commits on the default (**_main_**) branch:\n\n```mermaid-example\n    gitGraph\n       commit\n       commit\n       commit\n```\n\n```mermaid\n    gitGraph\n       commit\n       commit\n       commit\n```\n\nIf you look closely at the previous example, you can see the default branch `main` along with three commits. Also, notice that by default each commit has been given a unique & random ID. What if you wanted to give your own custom ID to a commit? Yes, it is possible to do that with Mermaid.\n\n### Adding custom commit id\n\nFor a given commit you may specify a custom ID at the time of declaring it using the `id` attribute, followed by `:` and your custom value within a `\"\"` quote. For example: `commit id: \"your_custom_id\"`\n\nLet us see how this works with the help of the following diagram:\n\n```mermaid-example\n    gitGraph\n       commit id: \"Alpha\"\n       commit id: \"Beta\"\n       commit id: \"Gamma\"\n```\n\n```mermaid\n    gitGraph\n       commit id: \"Alpha\"\n       commit id: \"Beta\"\n       commit id: \"Gamma\"\n```\n\nIn this example, we have given our custom IDs to the commits.\n\n### Modifying commit type\n\nIn Mermaid, a commit can be of three type, which render a bit different in the diagram. These types are:\n\n- `NORMAL` : Default commit type. Represented by a solid circle in the diagram\n- `REVERSE` : To emphasize a commit as a reverse commit. Represented by a crossed solid circle in the diagram.\n- `HIGHLIGHT` : To highlight a particular commit in the diagram. Represented by a filled rectangle in the diagram.\n\nFor a given commit you may specify its type at the time of declaring it using the `type` attribute, followed by `:` and the required type option discussed above. For example: `commit type: HIGHLIGHT`\n\nNOTE: If no commit type is specified, `NORMAL` is picked as default.\n\nLet us see how these different commit type look with the help of the following diagram:\n\n```mermaid-example\n    gitGraph\n       commit id: \"Normal\"\n       commit\n       commit id: \"Reverse\" type: REVERSE\n       commit\n       commit id: \"Highlight\" type: HIGHLIGHT\n       commit\n```\n\n```mermaid\n    gitGraph\n       commit id: \"Normal\"\n       commit\n       commit id: \"Reverse\" type: REVERSE\n       commit\n       commit id: \"Highlight\" type: HIGHLIGHT\n       commit\n```\n\nIn this example, we have specified different types to each commit. Also, see how we have included both `id` and `type` together at the time of declaring our commits.\n\n### Adding Tags\n\nFor a given commit you may decorate it as a **tag**, similar to the concept of tags or release version in git world.\nYou can attach a custom tag at the time of declaring a commit using the `tag` attribute, followed by `:` and your custom value within `\"\"` quote. For example: `commit tag: \"your_custom_tag\"`\n\nLet us see how this works with the help of the following diagram:\n\n```mermaid-example\n    gitGraph\n       commit\n       commit id: \"Normal\" tag: \"v1.0.0\"\n       commit\n       commit id: \"Reverse\" type: REVERSE tag: \"RC_1\"\n       commit\n       commit id: \"Highlight\" type: HIGHLIGHT tag: \"8.8.4\"\n       commit\n```\n\n```mermaid\n    gitGraph\n       commit\n       commit id: \"Normal\" tag: \"v1.0.0\"\n       commit\n       commit id: \"Reverse\" type: REVERSE tag: \"RC_1\"\n       commit\n       commit id: \"Highlight\" type: HIGHLIGHT tag: \"8.8.4\"\n       commit\n```\n\nIn this example, we have given custom tags to the commits. Also, see how we have combined all these attributes in a single commit declaration. You can mix-match these attributes as you like.\n\n### Create a new branch\n\nIn Mermaid, in-order to create a new branch, you make use of the `branch` keyword. You also need to provide a name of the new branch. The name has to be unique and cannot be that of an existing branch. A branch name that could be confused for a keyword must be quoted within `\"\"`. Usage examples: `branch develop`, `branch \"cherry-pick\"`\n\nWhen Mermaid, reads the `branch` keyword, it creates a new branch and sets it as the current branch. Equivalent to you creating a new branch and checking it out in Git world.\n\nLet see this in an example:\n\n```mermaid-example\n    gitGraph\n       commit\n       commit\n       branch develop\n       commit\n       commit\n       commit\n```\n\n```mermaid\n    gitGraph\n       commit\n       commit\n       branch develop\n       commit\n       commit\n       commit\n```\n\nIn this example, see how we started with default `main` branch, and pushed two commits on that.\nThen we created the `develop` branch, and all commits afterwards are put on the `develop` branch as it became the current branch.\n\n### Checking out an existing branch\n\nIn Mermaid, in order to switch to an existing branch, you make use of the `checkout` keyword. You also need to provide a name of an existing branch. If no branch is found with the given name, it will result in console error. Usage example: `checkout develop`\n\nWhen Mermaid, reads the `checkout` keyword, it finds the given branch and sets it as the current branch. Equivalent to checking out a branch in the Git world.\n\nLet see modify our previous example:\n\n```mermaid-example\n    gitGraph\n       commit\n       commit\n       branch develop\n       commit\n       commit\n       commit\n       checkout main\n       commit\n       commit\n```\n\n```mermaid\n    gitGraph\n       commit\n       commit\n       branch develop\n       commit\n       commit\n       commit\n       checkout main\n       commit\n       commit\n```\n\nIn this example, see how we started with default `main` branch, and pushed two commits on that.\nThen we created the `develop` branch, and all three commits afterwards are put on the `develop` branch as it became the current branch.\nAfter this we made use of the `checkout` keyword to set the current branch as `main`, and all commit that follow are registered against the current branch, i.e. `main`.\n\n### Merging two branches\n\nIn Mermaid, in order to merge or join to an existing branch, you make use of the `merge` keyword. You also need to provide the name of an existing branch to merge from. If no branch is found with the given name, it will result in console error. Also, you can only merge two separate branches, and cannot merge a branch with itself. In such case an error is throw.\n\nUsage example: `merge develop`\n\nWhen Mermaid, reads the `merge` keyword, it finds the given branch and its head commit (the last commit on that branch), and joins it with the head commit on the **current branch**. Each merge results in a **_merge commit_**, represented in the diagram with **filled double circle**.\n\nLet us modify our previous example to merge our two branches:\n\n```mermaid-example\n    gitGraph\n       commit\n       commit\n       branch develop\n       commit\n       commit\n       commit\n       checkout main\n       commit\n       commit\n       merge develop\n       commit\n       commit\n```\n\n```mermaid\n    gitGraph\n       commit\n       commit\n       branch develop\n       commit\n       commit\n       commit\n       checkout main\n       commit\n       commit\n       merge develop\n       commit\n       commit\n```\n\nIn this example, see how we started with default `main` branch, and pushed two commits on that.\nThen we created the `develop` branch, and all three commits afterwards are put on the `develop` branch as it became the current branch.\nAfter this we made use of the `checkout` keyword to set the current branch as `main`, and all commits that follow are registered against the current branch, i.e. `main`.\nAfter this we merge the `develop` branch onto the current branch `main`, resulting in a merge commit.\nSince the current branch at this point is still `main`, the last two commits are registered against that.\n\nYou can also decorate your merge with similar attributes as you did for the commit using:\n\n- `id`--> To override the default ID with custom ID\n- `tag`--> To add a custom tag to your merge commit\n- `type`--> To override the default shape of merge commit. Here you can use other commit type mentioned earlier.\n\nAnd you can choose to use none, some or all of these attributes together.\nFor example: `merge develop id: \"my_custom_id\" tag: \"my_custom_tag\" type: REVERSE`\n\nLet us see how this works with the help of the following diagram:\n\n```mermaid-example\n    gitGraph\n       commit id: \"1\"\n       commit id: \"2\"\n       branch nice_feature\n       checkout nice_feature\n       commit id: \"3\"\n       checkout main\n       commit id: \"4\"\n       checkout nice_feature\n       branch very_nice_feature\n       checkout very_nice_feature\n       commit id: \"5\"\n       checkout main\n       commit id: \"6\"\n       checkout nice_feature\n       commit id: \"7\"\n       checkout main\n       merge nice_feature id: \"customID\" tag: \"customTag\" type: REVERSE\n       checkout very_nice_feature\n       commit id: \"8\"\n       checkout main\n       commit id: \"9\"\n```\n\n```mermaid\n    gitGraph\n       commit id: \"1\"\n       commit id: \"2\"\n       branch nice_feature\n       checkout nice_feature\n       commit id: \"3\"\n       checkout main\n       commit id: \"4\"\n       checkout nice_feature\n       branch very_nice_feature\n       checkout very_nice_feature\n       commit id: \"5\"\n       checkout main\n       commit id: \"6\"\n       checkout nice_feature\n       commit id: \"7\"\n       checkout main\n       merge nice_feature id: \"customID\" tag: \"customTag\" type: REVERSE\n       checkout very_nice_feature\n       commit id: \"8\"\n       checkout main\n       commit id: \"9\"\n```\n\n### Cherry Pick commit from another branch\n\nSimilar to how 'git' allows you to cherry-pick a commit from **another branch** onto the **current** branch, Mermaid also supports this functionality. You can also cherry-pick a commit from another branch using the `cherry-pick` keyword.\n\nTo use the `cherry-pick` keyword, you must specify the id using the `id` attribute, followed by `:` and your desired commit id within a `\"\"` quote. For example:\n\n`cherry-pick id: \"your_custom_id\"`\n\nHere, a new commit representing the cherry-pick is created on the current branch, and is visually highlighted in the diagram with a **cherry** and a tag depicting the commit id from which it is cherry-picked from.\n\nA few important rules to note here are:\n\n1. You need to provide the `id` for an existing commit to be cherry-picked. If given commit id does not exist it will result in an error. For this, make use of the `commit id:$value` format of declaring commits. See the examples from above.\n2. The given commit must not exist on the current branch. The cherry-picked commit must always be a different branch than the current branch.\n3. Current branch must have at least one commit, before you can cherry-pick, otherwise it will cause an error is throw.\n4. When cherry-picking a merge commit, providing a parent commit ID is mandatory. If the parent attribute is omitted or an invalid parent commit ID is provided, an error will be thrown.\n5. The specified parent commit must be an immediate parent of the merge commit being cherry-picked.\n\nLet see an example:\n\n```mermaid-example\n    gitGraph\n        commit id: \"ZERO\"\n        branch develop\n        branch release\n        commit id:\"A\"\n        checkout main\n        commit id:\"ONE\"\n        checkout develop\n        commit id:\"B\"\n        checkout main\n        merge develop id:\"MERGE\"\n        commit id:\"TWO\"\n        checkout release\n        cherry-pick id:\"MERGE\" parent:\"B\"\n        commit id:\"THREE\"\n        checkout develop\n        commit id:\"C\"\n```\n\n```mermaid\n    gitGraph\n        commit id: \"ZERO\"\n        branch develop\n        branch release\n        commit id:\"A\"\n        checkout main\n        commit id:\"ONE\"\n        checkout develop\n        commit id:\"B\"\n        checkout main\n        merge develop id:\"MERGE\"\n        commit id:\"TWO\"\n        checkout release\n        cherry-pick id:\"MERGE\" parent:\"B\"\n        commit id:\"THREE\"\n        checkout develop\n        commit id:\"C\"\n```\n\n## GitGraph specific configuration options\n\nIn Mermaid, you have the option to configure the gitgraph diagram. You can configure the following options:\n\n- `showBranches` : Boolean, default is `true`. If set to `false`, the branches are not shown in the diagram.\n- `showCommitLabel` : Boolean, default is `true`. If set to `false`, the commit labels are not shown in the diagram.\n- `mainBranchName` : String, default is `main`. The name of the default/root branch.\n- `mainBranchOrder` : Position of the main branch in the list of branches. default is `0`, meaning, by default `main` branch is the first in the order.\n- `parallelCommits`: Boolean, default is `false`. If set to `true`, commits x distance away from the parent are shown at the same level in the diagram.\n\nLet's look at them one by one.\n\n## Hiding Branch names and lines\n\nSometimes you may want to hide the branch names and lines from the diagram. You can do this by using the `showBranches` keyword. By default its value is `true`. You can set it to `false` using directives.\n\nUsage example:\n\n```mermaid-example\n---\nconfig:\n  logLevel: 'debug'\n  theme: 'base'\n  gitGraph:\n    showBranches: false\n---\n      gitGraph\n        commit\n        branch hotfix\n        checkout hotfix\n        commit\n        branch develop\n        checkout develop\n        commit id:\"ash\" tag:\"abc\"\n        branch featureB\n        checkout featureB\n        commit type:HIGHLIGHT\n        checkout main\n        checkout hotfix\n        commit type:NORMAL\n        checkout develop\n        commit type:REVERSE\n        checkout featureB\n        commit\n        checkout main\n        merge hotfix\n        checkout featureB\n        commit\n        checkout develop\n        branch featureA\n        commit\n        checkout develop\n        merge hotfix\n        checkout featureA\n        commit\n        checkout featureB\n        commit\n        checkout develop\n        merge featureA\n        branch release\n        checkout release\n        commit\n        checkout main\n        commit\n        checkout release\n        merge main\n        checkout develop\n        merge release\n```\n\n```mermaid\n---\nconfig:\n  logLevel: 'debug'\n  theme: 'base'\n  gitGraph:\n    showBranches: false\n---\n      gitGraph\n        commit\n        branch hotfix\n        checkout hotfix\n        commit\n        branch develop\n        checkout develop\n        commit id:\"ash\" tag:\"abc\"\n        branch featureB\n        checkout featureB\n        commit type:HIGHLIGHT\n        checkout main\n        checkout hotfix\n        commit type:NORMAL\n        checkout develop\n        commit type:REVERSE\n        checkout featureB\n        commit\n        checkout main\n        merge hotfix\n        checkout featureB\n        commit\n        checkout develop\n        branch featureA\n        commit\n        checkout develop\n        merge hotfix\n        checkout featureA\n        commit\n        checkout featureB\n        commit\n        checkout develop\n        merge featureA\n        branch release\n        checkout release\n        commit\n        checkout main\n        commit\n        checkout release\n        merge main\n        checkout develop\n        merge release\n```\n\n## Commit labels Layout: Rotated or Horizontal\n\nMermaid supports two types of commit labels layout. The default layout is **rotated**, which means the labels are placed below the commit circle, rotated at 45 degrees for better readability. This is particularly useful for commits with long labels.\n\nThe other option is **horizontal**, which means the labels are placed below the commit circle centred horizontally, and are not rotated. This is particularly useful for commits with short labels.\n\nYou can change the layout of the commit labels by using the `rotateCommitLabel` keyword in the directive. It defaults to `true`, which means the commit labels are rotated.\n\nUsage example: Rotated commit labels\n\n```mermaid-example\n---\nconfig:\n  logLevel: 'debug'\n  theme: 'base'\n  gitGraph:\n    rotateCommitLabel: true\n---\ngitGraph\n  commit id: \"feat(api): ...\"\n  commit id: \"a\"\n  commit id: \"b\"\n  commit id: \"fix(client): .extra long label..\"\n  branch c2\n  commit id: \"feat(modules): ...\"\n  commit id: \"test(client): ...\"\n  checkout main\n  commit id: \"fix(api): ...\"\n  commit id: \"ci: ...\"\n  branch b1\n  commit\n  branch b2\n  commit\n```\n\n```mermaid\n---\nconfig:\n  logLevel: 'debug'\n  theme: 'base'\n  gitGraph:\n    rotateCommitLabel: true\n---\ngitGraph\n  commit id: \"feat(api): ...\"\n  commit id: \"a\"\n  commit id: \"b\"\n  commit id: \"fix(client): .extra long label..\"\n  branch c2\n  commit id: \"feat(modules): ...\"\n  commit id: \"test(client): ...\"\n  checkout main\n  commit id: \"fix(api): ...\"\n  commit id: \"ci: ...\"\n  branch b1\n  commit\n  branch b2\n  commit\n```\n\nUsage example: Horizontal commit labels\n\n```mermaid-example\n---\nconfig:\n  logLevel: 'debug'\n  theme: 'base'\n  gitGraph:\n    rotateCommitLabel: false\n---\ngitGraph\n  commit id: \"feat(api): ...\"\n  commit id: \"a\"\n  commit id: \"b\"\n  commit id: \"fix(client): .extra long label..\"\n  branch c2\n  commit id: \"feat(modules): ...\"\n  commit id: \"test(client): ...\"\n  checkout main\n  commit id: \"fix(api): ...\"\n  commit id: \"ci: ...\"\n  branch b1\n  commit\n  branch b2\n  commit\n```\n\n```mermaid\n---\nconfig:\n  logLevel: 'debug'\n  theme: 'base'\n  gitGraph:\n    rotateCommitLabel: false\n---\ngitGraph\n  commit id: \"feat(api): ...\"\n  commit id: \"a\"\n  commit id: \"b\"\n  commit id: \"fix(client): .extra long label..\"\n  branch c2\n  commit id: \"feat(modules): ...\"\n  commit id: \"test(client): ...\"\n  checkout main\n  commit id: \"fix(api): ...\"\n  commit id: \"ci: ...\"\n  branch b1\n  commit\n  branch b2\n  commit\n```\n\n## Hiding commit labels\n\nSometimes you may want to hide the commit labels from the diagram. You can do this by using the `showCommitLabel` keyword. By default its value is `true`. You can set it to `false` using directives.\n\nUsage example:\n\n```mermaid-example\n---\nconfig:\n  logLevel: 'debug'\n  theme: 'base'\n  gitGraph:\n    showBranches: false\n    showCommitLabel: false\n---\n      gitGraph\n        commit\n        branch hotfix\n        checkout hotfix\n        commit\n        branch develop\n        checkout develop\n        commit id:\"ash\"\n        branch featureB\n        checkout featureB\n        commit type:HIGHLIGHT\n        checkout main\n        checkout hotfix\n        commit type:NORMAL\n        checkout develop\n        commit type:REVERSE\n        checkout featureB\n        commit\n        checkout main\n        merge hotfix\n        checkout featureB\n        commit\n        checkout develop\n        branch featureA\n        commit\n        checkout develop\n        merge hotfix\n        checkout featureA\n        commit\n        checkout featureB\n        commit\n        checkout develop\n        merge featureA\n        branch release\n        checkout release\n        commit\n        checkout main\n        commit\n        checkout release\n        merge main\n        checkout develop\n        merge release\n```\n\n```mermaid\n---\nconfig:\n  logLevel: 'debug'\n  theme: 'base'\n  gitGraph:\n    showBranches: false\n    showCommitLabel: false\n---\n      gitGraph\n        commit\n        branch hotfix\n        checkout hotfix\n        commit\n        branch develop\n        checkout develop\n        commit id:\"ash\"\n        branch featureB\n        checkout featureB\n        commit type:HIGHLIGHT\n        checkout main\n        checkout hotfix\n        commit type:NORMAL\n        checkout develop\n        commit type:REVERSE\n        checkout featureB\n        commit\n        checkout main\n        merge hotfix\n        checkout featureB\n        commit\n        checkout develop\n        branch featureA\n        commit\n        checkout develop\n        merge hotfix\n        checkout featureA\n        commit\n        checkout featureB\n        commit\n        checkout develop\n        merge featureA\n        branch release\n        checkout release\n        commit\n        checkout main\n        commit\n        checkout release\n        merge main\n        checkout develop\n        merge release\n```\n\n## Customizing main branch name\n\nSometimes you may want to customize the name of the main/default branch. You can do this by using the `mainBranchName` keyword. By default its value is `main`. You can set it to any string using directives.\n\nUsage example:\n\n```mermaid-example\n---\nconfig:\n  logLevel: 'debug'\n  theme: 'base'\n  gitGraph:\n    showBranches: true\n    showCommitLabel: true\n    mainBranchName: 'MetroLine1'\n---\n      gitGraph\n        commit id:\"NewYork\"\n        commit id:\"Dallas\"\n        branch MetroLine2\n        commit id:\"LosAngeles\"\n        commit id:\"Chicago\"\n        commit id:\"Houston\"\n        branch MetroLine3\n        commit id:\"Phoenix\"\n        commit type: HIGHLIGHT id:\"Denver\"\n        commit id:\"Boston\"\n        checkout MetroLine1\n        commit id:\"Atlanta\"\n        merge MetroLine3\n        commit id:\"Miami\"\n        commit id:\"Washington\"\n        merge MetroLine2 tag:\"MY JUNCTION\"\n        commit id:\"Boston\"\n        commit id:\"Detroit\"\n        commit type:REVERSE id:\"SanFrancisco\"\n```\n\n```mermaid\n---\nconfig:\n  logLevel: 'debug'\n  theme: 'base'\n  gitGraph:\n    showBranches: true\n    showCommitLabel: true\n    mainBranchName: 'MetroLine1'\n---\n      gitGraph\n        commit id:\"NewYork\"\n        commit id:\"Dallas\"\n        branch MetroLine2\n        commit id:\"LosAngeles\"\n        commit id:\"Chicago\"\n        commit id:\"Houston\"\n        branch MetroLine3\n        commit id:\"Phoenix\"\n        commit type: HIGHLIGHT id:\"Denver\"\n        commit id:\"Boston\"\n        checkout MetroLine1\n        commit id:\"Atlanta\"\n        merge MetroLine3\n        commit id:\"Miami\"\n        commit id:\"Washington\"\n        merge MetroLine2 tag:\"MY JUNCTION\"\n        commit id:\"Boston\"\n        commit id:\"Detroit\"\n        commit type:REVERSE id:\"SanFrancisco\"\n```\n\nLook at the imaginary railroad map created using Mermaid. Here, we have changed the default main branch name to `MetroLine1`.\n\n## Customizing branch ordering\n\nIn Mermaid, by default the branches are shown in the order of their definition or appearance in the diagram code.\n\nSometimes you may want to customize the order of the branches. You can do this by using the `order` keyword next the branch definition. You can set it to a positive number.\n\nMermaid follows the given precedence order of the `order` keyword.\n\n- Main branch is always shown first as it has default order value of `0`. (unless its order is modified and changed from `0` using the `mainBranchOrder` keyword in the config)\n- Next, All branches without an `order` are shown in the order of their appearance in the diagram code.\n- Next, All branches with an `order` are shown in the order of their `order` value.\n\nTo fully control the order of all the branches, you must define `order` for all the branches.\n\nUsage example:\n\n```mermaid-example\n---\nconfig:\n  logLevel: 'debug'\n  theme: 'base'\n  gitGraph:\n    showBranches: true\n    showCommitLabel: true\n---\n      gitGraph\n      commit\n      branch test1 order: 3\n      branch test2 order: 2\n      branch test3 order: 1\n\n```\n\n```mermaid\n---\nconfig:\n  logLevel: 'debug'\n  theme: 'base'\n  gitGraph:\n    showBranches: true\n    showCommitLabel: true\n---\n      gitGraph\n      commit\n      branch test1 order: 3\n      branch test2 order: 2\n      branch test3 order: 1\n\n```\n\nLook at the diagram, all the branches are following the order defined.\n\nUsage example:\n\n```mermaid-example\n---\nconfig:\n  logLevel: 'debug'\n  theme: 'base'\n  gitGraph:\n    showBranches: true\n    showCommitLabel: true\n    mainBranchOrder: 2\n---\n      gitGraph\n      commit\n      branch test1 order: 3\n      branch test2\n      branch test3\n      branch test4 order: 1\n\n```\n\n```mermaid\n---\nconfig:\n  logLevel: 'debug'\n  theme: 'base'\n  gitGraph:\n    showBranches: true\n    showCommitLabel: true\n    mainBranchOrder: 2\n---\n      gitGraph\n      commit\n      branch test1 order: 3\n      branch test2\n      branch test3\n      branch test4 order: 1\n\n```\n\nLook at the diagram, here, all the branches without a specified order are drawn in their order of definition.\nThen, `test4` branch is drawn because the order of `1`.\nThen, `main` branch is drawn because the order of `2`.\nAnd, lastly `test1`is drawn because the order of `3`.\n\nNOTE: Because we have overridden the `mainBranchOrder` to `2`, the `main` branch is not drawn in the beginning, instead follows the ordering.\n\nHere, we have changed the default main branch name to `MetroLine1`.\n\n## Orientation (v10.3.0+)\n\nMermaid supports three graph orientations: **Left-to-Right** (default), **Top-to-Bottom**, and **Bottom-to-Top**.\n\nYou can set this with either `LR:` (for [**Left-to-Right**](#left-to-right-default-lr)), `TB:` (for [**Top-to-Bottom**](#top-to-bottom-tb)) or `BT:` (for [**Bottom-to-Top**](#bottom-to-top-bt)) after `gitGraph`.\n\n### Left to Right (default, `LR:`)\n\nIn Mermaid, the default orientation is for commits to run from left to right and for branches to be stacked on top of one another.\n\nHowever, you can set this explicitly with `LR:` after `gitGraph`.\n\nUsage example:\n\n```mermaid-example\n    gitGraph LR:\n       commit\n       commit\n       branch develop\n       commit\n       commit\n       checkout main\n       commit\n       commit\n       merge develop\n       commit\n       commit\n```\n\n```mermaid\n    gitGraph LR:\n       commit\n       commit\n       branch develop\n       commit\n       commit\n       checkout main\n       commit\n       commit\n       merge develop\n       commit\n       commit\n```\n\n### Top to Bottom (`TB:`)\n\nIn `TB` (**Top-to-Bottom**) orientation, the commits run from top to bottom of the graph and branches are arranged side-by-side.\n\nTo orient the graph this way, you need to add `TB:` after gitGraph.\n\nUsage example:\n\n```mermaid-example\n    gitGraph TB:\n       commit\n       commit\n       branch develop\n       commit\n       commit\n       checkout main\n       commit\n       commit\n       merge develop\n       commit\n       commit\n```\n\n```mermaid\n    gitGraph TB:\n       commit\n       commit\n       branch develop\n       commit\n       commit\n       checkout main\n       commit\n       commit\n       merge develop\n       commit\n       commit\n```\n\n### Bottom to Top (`BT:`) (v11.0.0+)\n\nIn `BT` (**Bottom-to-Top**) orientation, the commits run from bottom to top of the graph and branches are arranged side-by-side.\n\nTo orient the graph this way, you need to add `BT:` after gitGraph.\n\nUsage example:\n\n```mermaid-example\n    gitGraph BT:\n       commit\n       commit\n       branch develop\n       commit\n       commit\n       checkout main\n       commit\n       commit\n       merge develop\n       commit\n       commit\n```\n\n```mermaid\n    gitGraph BT:\n       commit\n       commit\n       branch develop\n       commit\n       commit\n       checkout main\n       commit\n       commit\n       merge develop\n       commit\n       commit\n```\n\n## Parallel commits (v10.8.0+)\n\nCommits in Mermaid display temporal information in gitgraph by default. For example if two commits are one commit away from its parent, the commit that was made earlier is rendered closer to its parent. You can turn this off by enabling the `parallelCommits` flag.\n\n### Temporal Commits (default, `parallelCommits: false`)\n\n```mermaid-example\n---\nconfig:\n  gitGraph:\n    parallelCommits: false\n---\ngitGraph:\n  commit\n  branch develop\n  commit\n  commit\n  checkout main\n  commit\n  commit\n```\n\n```mermaid\n---\nconfig:\n  gitGraph:\n    parallelCommits: false\n---\ngitGraph:\n  commit\n  branch develop\n  commit\n  commit\n  checkout main\n  commit\n  commit\n```\n\n### Parallel commits (`parallelCommits: true`)\n\n```mermaid-example\n---\nconfig:\n  gitGraph:\n    parallelCommits: true\n---\ngitGraph:\n  commit\n  branch develop\n  commit\n  commit\n  checkout main\n  commit\n  commit\n```\n\n```mermaid\n---\nconfig:\n  gitGraph:\n    parallelCommits: true\n---\ngitGraph:\n  commit\n  branch develop\n  commit\n  commit\n  checkout main\n  commit\n  commit\n```\n\n## Themes\n\nMermaid supports a bunch of pre-defined themes which you can use to find the right one for you. PS: you can actually override an existing theme's variable to get your own custom theme going. Learn more about [theming your diagram](../config/theming.md).\n\nThe following are the different pre-defined theme options:\n\n- `base`\n- `forest`\n- `dark`\n- `default`\n- `neutral`\n\n**NOTE**: To change theme you can either use the `initialize` call or _directives_. Learn more about [directives](../config/directives.md)\nLet's put them to use, and see how our sample diagram looks in different themes:\n\n### Base Theme\n\n```mermaid-example\n---\nconfig:\n  logLevel: 'debug'\n  theme: 'base'\n---\n      gitGraph\n        commit\n        branch hotfix\n        checkout hotfix\n        commit\n        branch develop\n        checkout develop\n        commit id:\"ash\" tag:\"abc\"\n        branch featureB\n        checkout featureB\n        commit type:HIGHLIGHT\n        checkout main\n        checkout hotfix\n        commit type:NORMAL\n        checkout develop\n        commit type:REVERSE\n        checkout featureB\n        commit\n        checkout main\n        merge hotfix\n        checkout featureB\n        commit\n        checkout develop\n        branch featureA\n        commit\n        checkout develop\n        merge hotfix\n        checkout featureA\n        commit\n        checkout featureB\n        commit\n        checkout develop\n        merge featureA\n        branch release\n        checkout release\n        commit\n        checkout main\n        commit\n        checkout release\n        merge main\n        checkout develop\n        merge release\n```\n\n```mermaid\n---\nconfig:\n  logLevel: 'debug'\n  theme: 'base'\n---\n      gitGraph\n        commit\n        branch hotfix\n        checkout hotfix\n        commit\n        branch develop\n        checkout develop\n        commit id:\"ash\" tag:\"abc\"\n        branch featureB\n        checkout featureB\n        commit type:HIGHLIGHT\n        checkout main\n        checkout hotfix\n        commit type:NORMAL\n        checkout develop\n        commit type:REVERSE\n        checkout featureB\n        commit\n        checkout main\n        merge hotfix\n        checkout featureB\n        commit\n        checkout develop\n        branch featureA\n        commit\n        checkout develop\n        merge hotfix\n        checkout featureA\n        commit\n        checkout featureB\n        commit\n        checkout develop\n        merge featureA\n        branch release\n        checkout release\n        commit\n        checkout main\n        commit\n        checkout release\n        merge main\n        checkout develop\n        merge release\n```\n\n### Forest Theme\n\n```mermaid-example\n---\nconfig:\n  logLevel: 'debug'\n  theme: 'forest'\n---\n      gitGraph\n        commit\n        branch hotfix\n        checkout hotfix\n        commit\n        branch develop\n        checkout develop\n        commit id:\"ash\" tag:\"abc\"\n        branch featureB\n        checkout featureB\n        commit type:HIGHLIGHT\n        checkout main\n        checkout hotfix\n        commit type:NORMAL\n        checkout develop\n        commit type:REVERSE\n        checkout featureB\n        commit\n        checkout main\n        merge hotfix\n        checkout featureB\n        commit\n        checkout develop\n        branch featureA\n        commit\n        checkout develop\n        merge hotfix\n        checkout featureA\n        commit\n        checkout featureB\n        commit\n        checkout develop\n        merge featureA\n        branch release\n        checkout release\n        commit\n        checkout main\n        commit\n        checkout release\n        merge main\n        checkout develop\n        merge release\n```\n\n```mermaid\n---\nconfig:\n  logLevel: 'debug'\n  theme: 'forest'\n---\n      gitGraph\n        commit\n        branch hotfix\n        checkout hotfix\n        commit\n        branch develop\n        checkout develop\n        commit id:\"ash\" tag:\"abc\"\n        branch featureB\n        checkout featureB\n        commit type:HIGHLIGHT\n        checkout main\n        checkout hotfix\n        commit type:NORMAL\n        checkout develop\n        commit type:REVERSE\n        checkout featureB\n        commit\n        checkout main\n        merge hotfix\n        checkout featureB\n        commit\n        checkout develop\n        branch featureA\n        commit\n        checkout develop\n        merge hotfix\n        checkout featureA\n        commit\n        checkout featureB\n        commit\n        checkout develop\n        merge featureA\n        branch release\n        checkout release\n        commit\n        checkout main\n        commit\n        checkout release\n        merge main\n        checkout develop\n        merge release\n```\n\n### Default Theme\n\n```mermaid-example\n---\nconfig:\n  logLevel: 'debug'\n  theme: 'default'\n---\n      gitGraph\n        commit type:HIGHLIGHT\n        branch hotfix\n        checkout hotfix\n        commit\n        branch develop\n        checkout develop\n        commit id:\"ash\" tag:\"abc\"\n        branch featureB\n        checkout featureB\n        commit type:HIGHLIGHT\n        checkout main\n        checkout hotfix\n        commit type:NORMAL\n        checkout develop\n        commit type:REVERSE\n        checkout featureB\n        commit\n        checkout main\n        merge hotfix\n        checkout featureB\n        commit\n        checkout develop\n        branch featureA\n        commit\n        checkout develop\n        merge hotfix\n        checkout featureA\n        commit\n        checkout featureB\n        commit\n        checkout develop\n        merge featureA\n        branch release\n        checkout release\n        commit\n        checkout main\n        commit\n        checkout release\n        merge main\n        checkout develop\n        merge release\n```\n\n```mermaid\n---\nconfig:\n  logLevel: 'debug'\n  theme: 'default'\n---\n      gitGraph\n        commit type:HIGHLIGHT\n        branch hotfix\n        checkout hotfix\n        commit\n        branch develop\n        checkout develop\n        commit id:\"ash\" tag:\"abc\"\n        branch featureB\n        checkout featureB\n        commit type:HIGHLIGHT\n        checkout main\n        checkout hotfix\n        commit type:NORMAL\n        checkout develop\n        commit type:REVERSE\n        checkout featureB\n        commit\n        checkout main\n        merge hotfix\n        checkout featureB\n        commit\n        checkout develop\n        branch featureA\n        commit\n        checkout develop\n        merge hotfix\n        checkout featureA\n        commit\n        checkout featureB\n        commit\n        checkout develop\n        merge featureA\n        branch release\n        checkout release\n        commit\n        checkout main\n        commit\n        checkout release\n        merge main\n        checkout develop\n        merge release\n```\n\n### Dark Theme\n\n```mermaid-example\n---\nconfig:\n  logLevel: 'debug'\n  theme: 'dark'\n---\n      gitGraph\n        commit\n        branch hotfix\n        checkout hotfix\n        commit\n        branch develop\n        checkout develop\n        commit id:\"ash\" tag:\"abc\"\n        branch featureB\n        checkout featureB\n        commit type:HIGHLIGHT\n        checkout main\n        checkout hotfix\n        commit type:NORMAL\n        checkout develop\n        commit type:REVERSE\n        checkout featureB\n        commit\n        checkout main\n        merge hotfix\n        checkout featureB\n        commit\n        checkout develop\n        branch featureA\n        commit\n        checkout develop\n        merge hotfix\n        checkout featureA\n        commit\n        checkout featureB\n        commit\n        checkout develop\n        merge featureA\n        branch release\n        checkout release\n        commit\n        checkout main\n        commit\n        checkout release\n        merge main\n        checkout develop\n        merge release\n```\n\n```mermaid\n---\nconfig:\n  logLevel: 'debug'\n  theme: 'dark'\n---\n      gitGraph\n        commit\n        branch hotfix\n        checkout hotfix\n        commit\n        branch develop\n        checkout develop\n        commit id:\"ash\" tag:\"abc\"\n        branch featureB\n        checkout featureB\n        commit type:HIGHLIGHT\n        checkout main\n        checkout hotfix\n        commit type:NORMAL\n        checkout develop\n        commit type:REVERSE\n        checkout featureB\n        commit\n        checkout main\n        merge hotfix\n        checkout featureB\n        commit\n        checkout develop\n        branch featureA\n        commit\n        checkout develop\n        merge hotfix\n        checkout featureA\n        commit\n        checkout featureB\n        commit\n        checkout develop\n        merge featureA\n        branch release\n        checkout release\n        commit\n        checkout main\n        commit\n        checkout release\n        merge main\n        checkout develop\n        merge release\n```\n\n### Neutral Theme\n\n```mermaid-example\n---\nconfig:\n  logLevel: 'debug'\n  theme: 'neutral'\n---\n      gitGraph\n        commit\n        branch hotfix\n        checkout hotfix\n        commit\n        branch develop\n        checkout develop\n        commit id:\"ash\" tag:\"abc\"\n        branch featureB\n        checkout featureB\n        commit type:HIGHLIGHT\n        checkout main\n        checkout hotfix\n        commit type:NORMAL\n        checkout develop\n        commit type:REVERSE\n        checkout featureB\n        commit\n        checkout main\n        merge hotfix\n        checkout featureB\n        commit\n        checkout develop\n        branch featureA\n        commit\n        checkout develop\n        merge hotfix\n        checkout featureA\n        commit\n        checkout featureB\n        commit\n        checkout develop\n        merge featureA\n        branch release\n        checkout release\n        commit\n        checkout main\n        commit\n        checkout release\n        merge main\n        checkout develop\n        merge release\n```\n\n```mermaid\n---\nconfig:\n  logLevel: 'debug'\n  theme: 'neutral'\n---\n      gitGraph\n        commit\n        branch hotfix\n        checkout hotfix\n        commit\n        branch develop\n        checkout develop\n        commit id:\"ash\" tag:\"abc\"\n        branch featureB\n        checkout featureB\n        commit type:HIGHLIGHT\n        checkout main\n        checkout hotfix\n        commit type:NORMAL\n        checkout develop\n        commit type:REVERSE\n        checkout featureB\n        commit\n        checkout main\n        merge hotfix\n        checkout featureB\n        commit\n        checkout develop\n        branch featureA\n        commit\n        checkout develop\n        merge hotfix\n        checkout featureA\n        commit\n        checkout featureB\n        commit\n        checkout develop\n        merge featureA\n        branch release\n        checkout release\n        commit\n        checkout main\n        commit\n        checkout release\n        merge main\n        checkout develop\n        merge release\n```\n\n## Customize using Theme Variables\n\nMermaid allows you to customize your diagram using theme variables which govern the look and feel of various elements of the diagram.\n\nFor understanding let us take a sample diagram with theme `default`, the default values of the theme variables is picked automatically from the theme. Later on we will see how to override the default values of the theme variables.\n\nSee how the default theme is used to set the colors for the branches:\n\n```mermaid-example\n---\nconfig:\n  logLevel: 'debug'\n  theme: 'default'\n---\n       gitGraph\n       commit\n       branch develop\n       commit tag:\"v1.0.0\"\n       commit\n       checkout main\n       commit type: HIGHLIGHT\n       commit\n       merge develop\n       commit\n       branch featureA\n       commit\n```\n\n```mermaid\n---\nconfig:\n  logLevel: 'debug'\n  theme: 'default'\n---\n       gitGraph\n       commit\n       branch develop\n       commit tag:\"v1.0.0\"\n       commit\n       checkout main\n       commit type: HIGHLIGHT\n       commit\n       merge develop\n       commit\n       branch featureA\n       commit\n```\n\n> #### IMPORTANT:\n>\n> Mermaid supports the theme variables to override the default values for **up to 8 branches**, i.e., you can set the color/styling of up to 8 branches using theme variables. After this threshold of 8 branches, the theme variables are reused in the cyclic manner, i.e. the 9th branch will use the color/styling of the 1st branch, or the branch at index position '8' will use the color/styling of the branch at index position '0'.\n> _More on this in the next section. See examples on **Customizing branch label colors** below_\n\n### Customizing branch colors\n\nYou can customize the branch colors using the `git0` to `git7` theme variables. Mermaid allows you to set the colors for up-to 8 branches, where `git0` variable will drive the value of the first branch, `git1` will drive the value of the second branch and so on.\n\nNOTE: Default values for these theme variables are picked from the selected theme. If you want to override the default values, you can use the `initialize` call to add your custom theme variable values.\n\nExample:\n\nNow let's override the default values for the `git0` to `git3` variables:\n\n```mermaid-example\n---\nconfig:\n  logLevel: 'debug'\n  theme: 'default'\n  themeVariables:\n      'git0': '#ff0000'\n      'git1': '#00ff00'\n      'git2': '#0000ff'\n      'git3': '#ff00ff'\n      'git4': '#00ffff'\n      'git5': '#ffff00'\n      'git6': '#ff00ff'\n      'git7': '#00ffff'\n---\n       gitGraph\n       commit\n       branch develop\n       commit tag:\"v1.0.0\"\n       commit\n       checkout main\n       commit type: HIGHLIGHT\n       commit\n       merge develop\n       commit\n       branch featureA\n       commit\n\n```\n\n```mermaid\n---\nconfig:\n  logLevel: 'debug'\n  theme: 'default'\n  themeVariables:\n      'git0': '#ff0000'\n      'git1': '#00ff00'\n      'git2': '#0000ff'\n      'git3': '#ff00ff'\n      'git4': '#00ffff'\n      'git5': '#ffff00'\n      'git6': '#ff00ff'\n      'git7': '#00ffff'\n---\n       gitGraph\n       commit\n       branch develop\n       commit tag:\"v1.0.0\"\n       commit\n       checkout main\n       commit type: HIGHLIGHT\n       commit\n       merge develop\n       commit\n       branch featureA\n       commit\n\n```\n\nSee how the branch colors are changed to the values specified in the theme variables.\n\n### Customizing branch label colors\n\nYou can customize the branch label colors using the `gitBranchLabel0` to `gitBranchLabel7` theme variables. Mermaid allows you to set the colors for up-to 8 branches, where `gitBranchLabel0` variable will drive the value of the first branch label, `gitBranchLabel1` will drive the value of the second branch label and so on.\n\nLets see how the default theme is used to set the colors for the branch labels:\n\nNow let's override the default values for the `gitBranchLabel0` to `gitBranchLabel2` variables:\n\n```mermaid-example\n---\nconfig:\n  logLevel: 'debug'\n  theme: 'default'\n  themeVariables:\n    'gitBranchLabel0': '#ffffff'\n    'gitBranchLabel1': '#ffffff'\n    'gitBranchLabel2': '#ffffff'\n    'gitBranchLabel3': '#ffffff'\n    'gitBranchLabel4': '#ffffff'\n    'gitBranchLabel5': '#ffffff'\n    'gitBranchLabel6': '#ffffff'\n    'gitBranchLabel7': '#ffffff'\n    'gitBranchLabel8': '#ffffff'\n    'gitBranchLabel9': '#ffffff'\n---\n  gitGraph\n    checkout main\n    branch branch1\n    branch branch2\n    branch branch3\n    branch branch4\n    branch branch5\n    branch branch6\n    branch branch7\n    branch branch8\n    branch branch9\n    checkout branch1\n    commit\n```\n\n```mermaid\n---\nconfig:\n  logLevel: 'debug'\n  theme: 'default'\n  themeVariables:\n    'gitBranchLabel0': '#ffffff'\n    'gitBranchLabel1': '#ffffff'\n    'gitBranchLabel2': '#ffffff'\n    'gitBranchLabel3': '#ffffff'\n    'gitBranchLabel4': '#ffffff'\n    'gitBranchLabel5': '#ffffff'\n    'gitBranchLabel6': '#ffffff'\n    'gitBranchLabel7': '#ffffff'\n    'gitBranchLabel8': '#ffffff'\n    'gitBranchLabel9': '#ffffff'\n---\n  gitGraph\n    checkout main\n    branch branch1\n    branch branch2\n    branch branch3\n    branch branch4\n    branch branch5\n    branch branch6\n    branch branch7\n    branch branch8\n    branch branch9\n    checkout branch1\n    commit\n```\n\nHere, you can see that `branch8` and `branch9` colors and the styles are being picked from branch at index position `0` (`main`) and `1`(`branch1`) respectively, i.e., **branch themeVariables are repeated cyclically**.\n\n### Customizing Commit colors\n\nYou can customize commit using the `commitLabelColor` and `commitLabelBackground` theme variables for changes in the commit label color and background color respectively.\n\nExample:\nNow let's override the default values for the `commitLabelColor` to `commitLabelBackground` variables:\n\n```mermaid-example\n---\nconfig:\n  logLevel: 'debug'\n  theme: 'default'\n  themeVariables:\n    commitLabelColor: '#ff0000'\n    commitLabelBackground: '#00ff00'\n---\n       gitGraph\n       commit\n       branch develop\n       commit tag:\"v1.0.0\"\n       commit\n       checkout main\n       commit type: HIGHLIGHT\n       commit\n       merge develop\n       commit\n       branch featureA\n       commit\n\n```\n\n```mermaid\n---\nconfig:\n  logLevel: 'debug'\n  theme: 'default'\n  themeVariables:\n    commitLabelColor: '#ff0000'\n    commitLabelBackground: '#00ff00'\n---\n       gitGraph\n       commit\n       branch develop\n       commit tag:\"v1.0.0\"\n       commit\n       checkout main\n       commit type: HIGHLIGHT\n       commit\n       merge develop\n       commit\n       branch featureA\n       commit\n\n```\n\nSee how the commit label color and background color are changed to the values specified in the theme variables.\n\n### Customizing Commit Label Font Size\n\nYou can customize commit using the `commitLabelFontSize` theme variables for changing in the font size of the commit label .\n\nExample:\nNow let's override the default values for the `commitLabelFontSize` variable:\n\n```mermaid-example\n---\nconfig:\n  logLevel: 'debug'\n  theme: 'default'\n  themeVariables:\n    commitLabelColor: '#ff0000'\n    commitLabelBackground: '#00ff00'\n    commitLabelFontSize: '16px'\n---\n       gitGraph\n       commit\n       branch develop\n       commit tag:\"v1.0.0\"\n       commit\n       checkout main\n       commit type: HIGHLIGHT\n       commit\n       merge develop\n       commit\n       branch featureA\n       commit\n\n```\n\n```mermaid\n---\nconfig:\n  logLevel: 'debug'\n  theme: 'default'\n  themeVariables:\n    commitLabelColor: '#ff0000'\n    commitLabelBackground: '#00ff00'\n    commitLabelFontSize: '16px'\n---\n       gitGraph\n       commit\n       branch develop\n       commit tag:\"v1.0.0\"\n       commit\n       checkout main\n       commit type: HIGHLIGHT\n       commit\n       merge develop\n       commit\n       branch featureA\n       commit\n\n```\n\nSee how the commit label font size changed.\n\n### Customizing Tag Label Font Size\n\nYou can customize commit using the `tagLabelFontSize` theme variables for changing in the font size of the tag label .\n\nExample:\nNow let's override the default values for the `tagLabelFontSize` variable:\n\n```mermaid-example\n---\nconfig:\n  logLevel: 'debug'\n  theme: 'default'\n  themeVariables:\n    commitLabelColor: '#ff0000'\n    commitLabelBackground: '#00ff00'\n    tagLabelFontSize: '16px'\n---\n       gitGraph\n       commit\n       branch develop\n       commit tag:\"v1.0.0\"\n       commit\n       checkout main\n       commit type: HIGHLIGHT\n       commit\n       merge develop\n       commit\n       branch featureA\n       commit\n\n```\n\n```mermaid\n---\nconfig:\n  logLevel: 'debug'\n  theme: 'default'\n  themeVariables:\n    commitLabelColor: '#ff0000'\n    commitLabelBackground: '#00ff00'\n    tagLabelFontSize: '16px'\n---\n       gitGraph\n       commit\n       branch develop\n       commit tag:\"v1.0.0\"\n       commit\n       checkout main\n       commit type: HIGHLIGHT\n       commit\n       merge develop\n       commit\n       branch featureA\n       commit\n\n```\n\nSee how the tag label font size changed.\n\n### Customizing Tag colors\n\nYou can customize tag using the `tagLabelColor`,`tagLabelBackground` and `tagLabelBorder` theme variables for changes in the tag label color,tag label background color and tag label border respectively.\nExample:\nNow let's override the default values for the `tagLabelColor`, `tagLabelBackground` and to `tagLabelBorder` variables:\n\n```mermaid-example\n---\nconfig:\n  logLevel: 'debug'\n  theme: 'default'\n  themeVariables:\n    tagLabelColor: '#ff0000'\n    tagLabelBackground: '#00ff00'\n    tagLabelBorder: '#0000ff'\n---\n       gitGraph\n       commit\n       branch develop\n       commit tag:\"v1.0.0\"\n       commit\n       checkout main\n       commit type: HIGHLIGHT\n       commit\n       merge develop\n       commit\n       branch featureA\n       commit\n\n```\n\n```mermaid\n---\nconfig:\n  logLevel: 'debug'\n  theme: 'default'\n  themeVariables:\n    tagLabelColor: '#ff0000'\n    tagLabelBackground: '#00ff00'\n    tagLabelBorder: '#0000ff'\n---\n       gitGraph\n       commit\n       branch develop\n       commit tag:\"v1.0.0\"\n       commit\n       checkout main\n       commit type: HIGHLIGHT\n       commit\n       merge develop\n       commit\n       branch featureA\n       commit\n\n```\n\nSee how the tag colors are changed to the values specified in the theme variables.\n\n### Customizing Highlight commit colors\n\nYou can customize the highlight commit colors in relation to the branch it is on using the `gitInv0` to `gitInv7` theme variables. Mermaid allows you to set the colors for up-to 8 branches specific highlight commit, where `gitInv0` variable will drive the value of the first branch's highlight commits, `gitInv1` will drive the value of the second branch's highlight commit label and so on.\n\nExample:\n\nNow let's override the default values for the `git0` to `git3` variables:\n\n```mermaid-example\n---\nconfig:\n  logLevel: 'debug'\n  theme: 'default'\n  themeVariables:\n    'gitInv0': '#ff0000'\n---\n       gitGraph\n       commit\n       branch develop\n       commit tag:\"v1.0.0\"\n       commit\n       checkout main\n       commit type: HIGHLIGHT\n       commit\n       merge develop\n       commit\n       branch featureA\n       commit\n\n```\n\n```mermaid\n---\nconfig:\n  logLevel: 'debug'\n  theme: 'default'\n  themeVariables:\n    'gitInv0': '#ff0000'\n---\n       gitGraph\n       commit\n       branch develop\n       commit tag:\"v1.0.0\"\n       commit\n       checkout main\n       commit type: HIGHLIGHT\n       commit\n       merge develop\n       commit\n       branch featureA\n       commit\n\n```\n\nSee how the highlighted commit color on the first branch is changed to the value specified in the theme variable `gitInv0`.\n";
-const __vite_glob_0_30 = '> **Warning**\n>\n> ## THIS IS AN AUTOGENERATED FILE. DO NOT EDIT.\n>\n> ## Please edit the corresponding file in [/packages/mermaid/src/docs/syntax/mindmap.md](../../packages/mermaid/src/docs/syntax/mindmap.md).\n\n# Mindmap\n\n> Mindmap: This is an experimental diagram for now. The syntax and properties can change in future releases. The syntax is stable except for the icon integration which is the experimental part.\n\n"A mind map is a diagram used to visually organize information into a hierarchy, showing relationships among pieces of the whole. It is often created around a single concept, drawn as an image in the center of a blank page, to which associated representations of ideas such as images, words and parts of words are added. Major ideas are connected directly to the central concept, and other ideas branch out from those major ideas." Wikipedia\n\n### An example of a mindmap.\n\n```mermaid-example\nmindmap\n  root((mindmap))\n    Origins\n      Long history\n      ::icon(fa fa-book)\n      Popularisation\n        British popular psychology author Tony Buzan\n    Research\n      On effectiveness<br/>and features\n      On Automatic creation\n        Uses\n            Creative techniques\n            Strategic planning\n            Argument mapping\n    Tools\n      Pen and paper\n      Mermaid\n\n```\n\n```mermaid\nmindmap\n  root((mindmap))\n    Origins\n      Long history\n      ::icon(fa fa-book)\n      Popularisation\n        British popular psychology author Tony Buzan\n    Research\n      On effectiveness<br/>and features\n      On Automatic creation\n        Uses\n            Creative techniques\n            Strategic planning\n            Argument mapping\n    Tools\n      Pen and paper\n      Mermaid\n\n```\n\n## Syntax\n\nThe syntax for creating Mindmaps is simple and relies on indentation for setting the levels in the hierarchy.\n\nIn the following example you can see how there are 3 different levels. One with starting at the left of the text and another level with two rows starting at the same column, defining the node A. At the end there is one more level where the text is indented further than the previous lines defining the nodes B and C.\n\n```\nmindmap\n    Root\n        A\n            B\n            C\n```\n\nIn summary is a simple text outline where there is one node at the root level called `Root` which has one child `A`. `A` in turn has two children `B`and `C`. In the diagram below we can see this rendered as a mindmap.\n\n```mermaid-example\nmindmap\nRoot\n    A\n      B\n      C\n```\n\n```mermaid\nmindmap\nRoot\n    A\n      B\n      C\n```\n\nIn this way we can use a text outline to generate a hierarchical mindmap.\n\n## Different shapes\n\nMermaid mindmaps can show nodes using different shapes. When specifying a shape for a node the syntax is similar to flowchart nodes, with an id followed by the shape definition and with the text within the shape delimiters. Where possible we try/will try to keep the same shapes as for flowcharts, even though they are not all supported from the start.\n\nMindmap can show the following shapes:\n\n### Square\n\n```mermaid-example\nmindmap\n    id[I am a square]\n```\n\n```mermaid\nmindmap\n    id[I am a square]\n```\n\n### Rounded square\n\n```mermaid-example\nmindmap\n    id(I am a rounded square)\n```\n\n```mermaid\nmindmap\n    id(I am a rounded square)\n```\n\n### Circle\n\n```mermaid-example\nmindmap\n    id((I am a circle))\n```\n\n```mermaid\nmindmap\n    id((I am a circle))\n```\n\n### Bang\n\n```mermaid-example\nmindmap\n    id))I am a bang((\n```\n\n```mermaid\nmindmap\n    id))I am a bang((\n```\n\n### Cloud\n\n```mermaid-example\nmindmap\n    id)I am a cloud(\n```\n\n```mermaid\nmindmap\n    id)I am a cloud(\n```\n\n### Hexagon\n\n```mermaid-example\nmindmap\n    id{{I am a hexagon}}\n```\n\n```mermaid\nmindmap\n    id{{I am a hexagon}}\n```\n\n### Default\n\n```mermaid-example\nmindmap\n    I am the default shape\n```\n\n```mermaid\nmindmap\n    I am the default shape\n```\n\nMore shapes will be added, beginning with the shapes available in flowcharts.\n\n# Icons and classes\n\n## Icons\n\nAs with flowcharts you can add icons to your nodes but with an updated syntax. The styling for the font based icons are added during the integration so that they are available for the web page. _This is not something a diagram author can do but has to be done with the site administrator or the integrator_. Once the icon fonts are in place you add them to the mind map nodes using the `::icon()` syntax. You place the classes for the icon within the parenthesis like in the following example where icons for material design and [Font Awesome 5](https://fontawesome.com/v5/search?o=r&m=free) are displayed. The intention is that this approach should be used for all diagrams supporting icons. **Experimental feature:** This wider scope is also the reason Mindmaps are experimental as this syntax and approach could change.\n\n```mermaid-example\nmindmap\n    Root\n        A\n        ::icon(fa fa-book)\n        B(B)\n        ::icon(mdi mdi-skull-outline)\n```\n\n```mermaid\nmindmap\n    Root\n        A\n        ::icon(fa fa-book)\n        B(B)\n        ::icon(mdi mdi-skull-outline)\n```\n\n## Classes\n\nAgain the syntax for adding classes is similar to flowcharts. You can add classes using a triple colon following a number of css classes separated by space. In the following example one of the nodes has two custom classes attached urgent turning the background red and the text white and large increasing the font size:\n\n```mermaid-example\nmindmap\n    Root\n        A[A]\n        :::urgent large\n        B(B)\n        C\n```\n\n```mermaid\nmindmap\n    Root\n        A[A]\n        :::urgent large\n        B(B)\n        C\n```\n\n_These classes need to be supplied by the site administrator._\n\n## Unclear indentation\n\nThe actual indentation does not really matter only compared with the previous rows. If we take the previous example and disrupt it a little we can see how the calculations are performed. Let us start with placing C with a smaller indentation than `B` but larger then `A`.\n\n```\nmindmap\n    Root\n        A\n            B\n          C\n```\n\nThis outline is unclear as `B` clearly is a child of `A` but when we move on to `C` the clarity is lost. `C` is neither a child of `B` with a higher indentation nor does it have the same indentation as `B`. The only thing that is clear is that the first node with smaller indentation, indicating a parent, is A. Then Mermaid relies on this known truth and compensates for the unclear indentation and selects `A` as a parent of `C` leading till the same diagram with `B` and `C` as siblings.\n\n```mermaid-example\nmindmap\nRoot\n    A\n        B\n      C\n```\n\n```mermaid\nmindmap\nRoot\n    A\n        B\n      C\n```\n\n## Markdown Strings\n\nThe "Markdown Strings" feature enhances mind maps by offering a more versatile string type, which supports text formatting options such as bold and italics, and automatically wraps text within labels.\n\n```mermaid-example\nmindmap\n    id1["`**Root** with\na second line\nUnicode works too: 🤓`"]\n      id2["`The dog in **the** hog... a *very long text* that wraps to a new line`"]\n      id3[Regular labels still works]\n```\n\n```mermaid\nmindmap\n    id1["`**Root** with\na second line\nUnicode works too: 🤓`"]\n      id2["`The dog in **the** hog... a *very long text* that wraps to a new line`"]\n      id3[Regular labels still works]\n```\n\nFormatting:\n\n- For bold text, use double asterisks \\*\\* before and after the text.\n- For italics, use single asterisks \\* before and after the text.\n- With traditional strings, you needed to add <br> tags for text to wrap in nodes. However, markdown strings automatically wrap text when it becomes too long and allows you to start a new line by simply using a newline character instead of a <br> tag.\n\n## Integrating with your library/website.\n\nMindmap uses the experimental lazy loading & async rendering features which could change in the future. From version 9.4.0 this diagram is included in mermaid but use lazy loading in order to keep the size of mermaid down. This is important in order to be able to add additional diagrams going forward.\n\nYou can still use the pre 9.4.0 method to add mermaid with mindmaps to a web page:\n\n```html\n<script type="module">\n  import mermaid from \'https://cdn.jsdelivr.net/npm/mermaid@9.3.0/dist/mermaid.esm.min.mjs\';\n  import mindmap from \'https://cdn.jsdelivr.net/npm/@mermaid-js/mermaid-mindmap@9.3.0/dist/mermaid-mindmap.esm.min.mjs\';\n  await mermaid.registerExternalDiagrams([mindmap]);\n<\/script>\n```\n\nFrom version 9.4.0 you can simplify this code to:\n\n```html\n<script type="module">\n  import mermaid from \'https://cdn.jsdelivr.net/npm/mermaid@11/dist/mermaid.esm.min.mjs\';\n<\/script>\n```\n\nYou can also refer the [implementation in the live editor](https://github.com/mermaid-js/mermaid-live-editor/blob/develop/src/lib/util/mermaid.ts) to see how the async loading is done.\n\n<!---\ncspell:locale en,en-gb\ncspell:ignore Buzan\n--->\n\n## Layouts\n\nMermaid also supports a Tidy Tree layout for mindmaps.\n\n```\n---\nconfig:\n  layout: tidy-tree\n---\nmindmap\nroot((mindmap is a long thing))\n  A\n  B\n  C\n  D\n```\n\nInstructions to add and register tidy-tree layout are present in [Tidy Tree Configuration](/config/tidy-tree)\n';
-const __vite_glob_0_31 = '> **Warning**\n>\n> ## THIS IS AN AUTOGENERATED FILE. DO NOT EDIT.\n>\n> ## Please edit the corresponding file in [/packages/mermaid/src/docs/syntax/packet.md](../../packages/mermaid/src/docs/syntax/packet.md).\n\n# Packet Diagram (v11.0.0+)\n\n## Introduction\n\nA packet diagram is a visual representation used to illustrate the structure and contents of a network packet. Network packets are the fundamental units of data transferred over a network.\n\n## Usage\n\nThis diagram type is particularly useful for developers, network engineers, educators, and students who require a clear and concise way to represent the structure of network packets.\n\n## Syntax\n\n```\npacket\nstart: "Block name" %% Single-bit block\nstart-end: "Block name" %% Multi-bit blocks\n... More Fields ...\n```\n\n### Bits Syntax (v11.7.0+)\n\nUsing start and end bit counts can be difficult, especially when modifying a design. For this we add a bit count field, which starts from the end of the previous field automagically. Use `+<count>` to set the number of bits, thus:\n\n```\npacket\n+1: "Block name" %% Single-bit block\n+8: "Block name" %% 8-bit block\n9-15: "Manually set start and end, it\'s fine to mix and match"\n... More Fields ...\n```\n\n## Examples\n\n```mermaid-example\n---\ntitle: "TCP Packet"\n---\npacket\n0-15: "Source Port"\n16-31: "Destination Port"\n32-63: "Sequence Number"\n64-95: "Acknowledgment Number"\n96-99: "Data Offset"\n100-105: "Reserved"\n106: "URG"\n107: "ACK"\n108: "PSH"\n109: "RST"\n110: "SYN"\n111: "FIN"\n112-127: "Window"\n128-143: "Checksum"\n144-159: "Urgent Pointer"\n160-191: "(Options and Padding)"\n192-255: "Data (variable length)"\n```\n\n```mermaid\n---\ntitle: "TCP Packet"\n---\npacket\n0-15: "Source Port"\n16-31: "Destination Port"\n32-63: "Sequence Number"\n64-95: "Acknowledgment Number"\n96-99: "Data Offset"\n100-105: "Reserved"\n106: "URG"\n107: "ACK"\n108: "PSH"\n109: "RST"\n110: "SYN"\n111: "FIN"\n112-127: "Window"\n128-143: "Checksum"\n144-159: "Urgent Pointer"\n160-191: "(Options and Padding)"\n192-255: "Data (variable length)"\n```\n\n```mermaid-example\npacket\ntitle UDP Packet\n+16: "Source Port"\n+16: "Destination Port"\n32-47: "Length"\n48-63: "Checksum"\n64-95: "Data (variable length)"\n```\n\n```mermaid\npacket\ntitle UDP Packet\n+16: "Source Port"\n+16: "Destination Port"\n32-47: "Length"\n48-63: "Checksum"\n64-95: "Data (variable length)"\n```\n\n## Details of Syntax\n\n- **Ranges**: Each line after the title represents a different field in the packet. The range (e.g., `0-15`) indicates the bit positions in the packet.\n- **Field Description**: A brief description of what the field represents, enclosed in quotes.\n\n## Configuration\n\nPlease refer to the [configuration](/config/schema-docs/config-defs-packet-diagram-config.html) guide for details.\n\n<!--\n\nTheme variables are not currently working due to a mermaid bug. The passed values are not being propagated into styles function.\n\n## Theme Variables\n\n| Property         | Description                | Default Value |\n| ---------------- | -------------------------- | ------------- |\n| byteFontSize     | Font size of the bytes     | \'10px\'        |\n| startByteColor   | Color of the starting byte | \'black\'       |\n| endByteColor     | Color of the ending byte   | \'black\'       |\n| labelColor       | Color of the labels        | \'black\'       |\n| labelFontSize    | Font size of the labels    | \'12px\'        |\n| titleColor       | Color of the title         | \'black\'       |\n| titleFontSize    | Font size of the title     | \'14px\'        |\n| blockStrokeColor | Color of the block stroke  | \'black\'       |\n| blockStrokeWidth | Width of the block stroke  | \'1\'           |\n| blockFillColor   | Fill color of the block    | \'#efefef\'     |\n\n## Example on config and theme\n\n```mermaid-example\n---\nconfig:\n  packet:\n    showBits: true\n  themeVariables:\n    packet:\n      startByteColor: red\n---\npacket\n0-15: "Source Port"\n16-31: "Destination Port"\n32-63: "Sequence Number"\n```\n\n-->\n';
-const __vite_glob_0_32 = '> **Warning**\n>\n> ## THIS IS AN AUTOGENERATED FILE. DO NOT EDIT.\n>\n> ## Please edit the corresponding file in [/packages/mermaid/src/docs/syntax/quadrantChart.md](../../packages/mermaid/src/docs/syntax/quadrantChart.md).\n\n# Quadrant Chart\n\n> A quadrant chart is a visual representation of data that is divided into four quadrants. It is used to plot data points on a two-dimensional grid, with one variable represented on the x-axis and another variable represented on the y-axis. The quadrants are determined by dividing the chart into four equal parts based on a set of criteria that is specific to the data being analyzed. Quadrant charts are often used to identify patterns and trends in data, and to prioritize actions based on the position of data points within the chart. They are commonly used in business, marketing, and risk management, among other fields.\n\n## Example\n\n```mermaid-example\nquadrantChart\n    title Reach and engagement of campaigns\n    x-axis Low Reach --> High Reach\n    y-axis Low Engagement --> High Engagement\n    quadrant-1 We should expand\n    quadrant-2 Need to promote\n    quadrant-3 Re-evaluate\n    quadrant-4 May be improved\n    Campaign A: [0.3, 0.6]\n    Campaign B: [0.45, 0.23]\n    Campaign C: [0.57, 0.69]\n    Campaign D: [0.78, 0.34]\n    Campaign E: [0.40, 0.34]\n    Campaign F: [0.35, 0.78]\n```\n\n```mermaid\nquadrantChart\n    title Reach and engagement of campaigns\n    x-axis Low Reach --> High Reach\n    y-axis Low Engagement --> High Engagement\n    quadrant-1 We should expand\n    quadrant-2 Need to promote\n    quadrant-3 Re-evaluate\n    quadrant-4 May be improved\n    Campaign A: [0.3, 0.6]\n    Campaign B: [0.45, 0.23]\n    Campaign C: [0.57, 0.69]\n    Campaign D: [0.78, 0.34]\n    Campaign E: [0.40, 0.34]\n    Campaign F: [0.35, 0.78]\n```\n\n## Syntax\n\n> **Note**\n> If there are no points available in the chart both **axis** text and **quadrant** will be rendered in the center of the respective quadrant.\n> If there are points **x-axis** labels will rendered from the left of the respective quadrant also they will be displayed at the bottom of the chart, and **y-axis** labels will be rendered at the bottom of the respective quadrant, the quadrant text will render at the top of the respective quadrant.\n\n> **Note**\n> For points x and y value min value is 0 and max value is 1.\n\n### Title\n\nThe title is a short description of the chart and it will always render on top of the chart.\n\n#### Example\n\n```\nquadrantChart\n    title This is a sample example\n```\n\n### x-axis\n\nThe x-axis determines what text would be displayed in the x-axis. In x-axis there is two part **left** and **right** you can pass **both** or you can pass only **left**. The statement should start with `x-axis` then the `left axis text` followed by the delimiter `-->` then `right axis text`.\n\n#### Example\n\n1. `x-axis <text> --> <text>` both the left and right axis text will be rendered.\n2. `x-axis <text>` only the left axis text will be rendered.\n\n### y-axis\n\nThe y-axis determines what text would be displayed in the y-axis. In y-axis there is two part **top** and **bottom** you can pass **both** or you can pass only **bottom**. The statement should start with `y-axis` then the `bottom axis text` followed by the delimiter `-->` then `top axis text`.\n\n#### Example\n\n1. `y-axis <text> --> <text>` both the bottom and top axis text will be rendered.\n2. `y-axis <text>` only the bottom axis text will be rendered.\n\n### Quadrants text\n\nThe `quadrant-[1,2,3,4]` determine what text would be displayed inside the quadrants.\n\n#### Example\n\n1. `quadrant-1 <text>` determine what text will be rendered inside the top right quadrant.\n2. `quadrant-2 <text>` determine what text will be rendered inside the top left quadrant.\n3. `quadrant-3 <text>` determine what text will be rendered inside the bottom left quadrant.\n4. `quadrant-4 <text>` determine what text will be rendered inside the bottom right quadrant.\n\n### Points\n\nPoints are used to plot a circle inside the quadrantChart. The syntax is `<text>: [x, y]` here x and y value is in the range 0 - 1.\n\n#### Example\n\n1. `Point 1: [0.75, 0.80]` here the Point 1 will be drawn in the top right quadrant.\n2. `Point 2: [0.35, 0.24]` here the Point 2 will be drawn in the bottom left quadrant.\n\n## Chart Configurations\n\n| Parameter                         | Description                                                                                        | Default value |\n| --------------------------------- | -------------------------------------------------------------------------------------------------- | :-----------: |\n| chartWidth                        | Width of the chart                                                                                 |      500      |\n| chartHeight                       | Height of the chart                                                                                |      500      |\n| titlePadding                      | Top and Bottom padding of the title                                                                |      10       |\n| titleFontSize                     | Title font size                                                                                    |      20       |\n| quadrantPadding                   | Padding outside all the quadrants                                                                  |       5       |\n| quadrantTextTopPadding            | Quadrant text top padding when text is drawn on top ( not data points are there)                   |       5       |\n| quadrantLabelFontSize             | Quadrant text font size                                                                            |      16       |\n| quadrantInternalBorderStrokeWidth | Border stroke width inside the quadrants                                                           |       1       |\n| quadrantExternalBorderStrokeWidth | Quadrant external border stroke width                                                              |       2       |\n| xAxisLabelPadding                 | Top and bottom padding of x-axis text                                                              |       5       |\n| xAxisLabelFontSize                | X-axis texts font size                                                                             |      16       |\n| xAxisPosition                     | Position of x-axis (top , bottom) if there are points the x-axis will always be rendered in bottom |     \'top\'     |\n| yAxisLabelPadding                 | Left and Right padding of y-axis text                                                              |       5       |\n| yAxisLabelFontSize                | Y-axis texts font size                                                                             |      16       |\n| yAxisPosition                     | Position of y-axis (left , right)                                                                  |    \'left\'     |\n| pointTextPadding                  | Padding between point and the below text                                                           |       5       |\n| pointLabelFontSize                | Point text font size                                                                               |      12       |\n| pointRadius                       | Radius of the point to be drawn                                                                    |       5       |\n\n## Chart Theme Variables\n\n| Parameter                        | Description                             |\n| -------------------------------- | --------------------------------------- |\n| quadrant1Fill                    | Fill color of the top right quadrant    |\n| quadrant2Fill                    | Fill color of the top left quadrant     |\n| quadrant3Fill                    | Fill color of the bottom left quadrant  |\n| quadrant4Fill                    | Fill color of the bottom right quadrant |\n| quadrant1TextFill                | Text color of the top right quadrant    |\n| quadrant2TextFill                | Text color of the top left quadrant     |\n| quadrant3TextFill                | Text color of the bottom left quadrant  |\n| quadrant4TextFill                | Text color of the bottom right quadrant |\n| quadrantPointFill                | Points fill color                       |\n| quadrantPointTextFill            | Points text color                       |\n| quadrantXAxisTextFill            | X-axis text color                       |\n| quadrantYAxisTextFill            | Y-axis text color                       |\n| quadrantInternalBorderStrokeFill | Quadrants inner border color            |\n| quadrantExternalBorderStrokeFill | Quadrants outer border color            |\n| quadrantTitleFill                | Title color                             |\n\n## Example on config and theme\n\n```mermaid-example\n---\nconfig:\n  quadrantChart:\n    chartWidth: 400\n    chartHeight: 400\n  themeVariables:\n    quadrant1TextFill: "ff0000"\n---\nquadrantChart\n  x-axis Urgent --> Not Urgent\n  y-axis Not Important --> "Important ❤"\n  quadrant-1 Plan\n  quadrant-2 Do\n  quadrant-3 Delegate\n  quadrant-4 Delete\n```\n\n```mermaid\n---\nconfig:\n  quadrantChart:\n    chartWidth: 400\n    chartHeight: 400\n  themeVariables:\n    quadrant1TextFill: "ff0000"\n---\nquadrantChart\n  x-axis Urgent --> Not Urgent\n  y-axis Not Important --> "Important ❤"\n  quadrant-1 Plan\n  quadrant-2 Do\n  quadrant-3 Delegate\n  quadrant-4 Delete\n```\n\n### Point styling\n\nPoints can either be styled directly or with defined shared classes\n\n1. Direct styling\n\n```md\nPoint A: [0.9, 0.0] radius: 12\nPoint B: [0.8, 0.1] color: #ff3300, radius: 10\nPoint C: [0.7, 0.2] radius: 25, color: #00ff33, stroke-color: #10f0f0\nPoint D: [0.6, 0.3] radius: 15, stroke-color: #00ff0f, stroke-width: 5px ,color: #ff33f0\n```\n\n2. Classes styling\n\n```md\nPoint A:::class1: [0.9, 0.0]\nPoint B:::class2: [0.8, 0.1]\nPoint C:::class3: [0.7, 0.2]\nPoint D:::class3: [0.7, 0.2]\nclassDef class1 color: #109060\nclassDef class2 color: #908342, radius : 10, stroke-color: #310085, stroke-width: 10px\nclassDef class3 color: #f00fff, radius : 10\n```\n\n#### Available styles:\n\n| Parameter    | Description                                                            |\n| ------------ | ---------------------------------------------------------------------- |\n| color        | Fill color of the point                                                |\n| radius       | Radius of the point                                                    |\n| stroke-width | Border width of the point                                              |\n| stroke-color | Border color of the point (useless when stroke-width is not specified) |\n\n> **Note**\n> Order of preference:\n>\n> 1. Direct styles\n> 2. Class styles\n> 3. Theme styles\n\n## Example on styling\n\n```mermaid-example\nquadrantChart\n  title Reach and engagement of campaigns\n  x-axis Low Reach --> High Reach\n  y-axis Low Engagement --> High Engagement\n  quadrant-1 We should expand\n  quadrant-2 Need to promote\n  quadrant-3 Re-evaluate\n  quadrant-4 May be improved\n  Campaign A: [0.9, 0.0] radius: 12\n  Campaign B:::class1: [0.8, 0.1] color: #ff3300, radius: 10\n  Campaign C: [0.7, 0.2] radius: 25, color: #00ff33, stroke-color: #10f0f0\n  Campaign D: [0.6, 0.3] radius: 15, stroke-color: #00ff0f, stroke-width: 5px ,color: #ff33f0\n  Campaign E:::class2: [0.5, 0.4]\n  Campaign F:::class3: [0.4, 0.5] color: #0000ff\n  classDef class1 color: #109060\n  classDef class2 color: #908342, radius : 10, stroke-color: #310085, stroke-width: 10px\n  classDef class3 color: #f00fff, radius : 10\n```\n\n```mermaid\nquadrantChart\n  title Reach and engagement of campaigns\n  x-axis Low Reach --> High Reach\n  y-axis Low Engagement --> High Engagement\n  quadrant-1 We should expand\n  quadrant-2 Need to promote\n  quadrant-3 Re-evaluate\n  quadrant-4 May be improved\n  Campaign A: [0.9, 0.0] radius: 12\n  Campaign B:::class1: [0.8, 0.1] color: #ff3300, radius: 10\n  Campaign C: [0.7, 0.2] radius: 25, color: #00ff33, stroke-color: #10f0f0\n  Campaign D: [0.6, 0.3] radius: 15, stroke-color: #00ff0f, stroke-width: 5px ,color: #ff33f0\n  Campaign E:::class2: [0.5, 0.4]\n  Campaign F:::class3: [0.4, 0.5] color: #0000ff\n  classDef class1 color: #109060\n  classDef class2 color: #908342, radius : 10, stroke-color: #310085, stroke-width: 10px\n  classDef class3 color: #f00fff, radius : 10\n```\n';
-const __vite_glob_0_33 = '> **Warning**\n>\n> ## THIS IS AN AUTOGENERATED FILE. DO NOT EDIT.\n>\n> ## Please edit the corresponding file in [/packages/mermaid/src/docs/syntax/radar.md](../../packages/mermaid/src/docs/syntax/radar.md).\n\n# Radar Diagram (v11.6.0+)\n\n## Introduction\n\nA radar diagram is a simple way to plot low-dimensional data in a circular format.\n\nIt is also known as a **radar chart**, **spider chart**, **star chart**, **cobweb chart**, **polar chart**, or **Kiviat diagram**.\n\n## Usage\n\nThis diagram type is particularly useful for developers, data scientists, and engineers who require a clear and concise way to represent data in a circular format.\n\nIt is commonly used to graphically summarize and compare the performance of multiple entities across multiple dimensions.\n\n## Syntax\n\n```md\nradar-beta\naxis A, B, C, D, E\ncurve c1{1,2,3,4,5}\ncurve c2{5,4,3,2,1}\n... More Fields ...\n```\n\n## Examples\n\n```mermaid-example\n---\ntitle: "Grades"\n---\nradar-beta\n  axis m["Math"], s["Science"], e["English"]\n  axis h["History"], g["Geography"], a["Art"]\n  curve a["Alice"]{85, 90, 80, 70, 75, 90}\n  curve b["Bob"]{70, 75, 85, 80, 90, 85}\n\n  max 100\n  min 0\n```\n\n```mermaid\n---\ntitle: "Grades"\n---\nradar-beta\n  axis m["Math"], s["Science"], e["English"]\n  axis h["History"], g["Geography"], a["Art"]\n  curve a["Alice"]{85, 90, 80, 70, 75, 90}\n  curve b["Bob"]{70, 75, 85, 80, 90, 85}\n\n  max 100\n  min 0\n```\n\n```mermaid-example\nradar-beta\n  title Restaurant Comparison\n  axis food["Food Quality"], service["Service"], price["Price"]\n  axis ambiance["Ambiance"]\n\n  curve a["Restaurant A"]{4, 3, 2, 4}\n  curve b["Restaurant B"]{3, 4, 3, 3}\n  curve c["Restaurant C"]{2, 3, 4, 2}\n  curve d["Restaurant D"]{2, 2, 4, 3}\n\n  graticule polygon\n  max 5\n\n```\n\n```mermaid\nradar-beta\n  title Restaurant Comparison\n  axis food["Food Quality"], service["Service"], price["Price"]\n  axis ambiance["Ambiance"]\n\n  curve a["Restaurant A"]{4, 3, 2, 4}\n  curve b["Restaurant B"]{3, 4, 3, 3}\n  curve c["Restaurant C"]{2, 3, 4, 2}\n  curve d["Restaurant D"]{2, 2, 4, 3}\n\n  graticule polygon\n  max 5\n\n```\n\n## Details of Syntax\n\n### Title\n\n`title`: The title is an optional field that allows to render a title at the top of the radar diagram.\n\n```\nradar-beta\n  title Title of the Radar Diagram\n  ...\n```\n\n### Axis\n\n`axis`: The axis keyword is used to define the axes of the radar diagram.\n\nEach axis is represented by an ID and an optional label.\n\nMultiple axes can be defined in a single line.\n\n```\nradar-beta\n  axis id1["Label1"]\n  axis id2["Label2"], id3["Label3"]\n  ...\n```\n\n### Curve\n\n`curve`: The curve keyword is used to define the data points for a curve in the radar diagram.\n\nEach curve is represented by an ID, an optional label, and a list of values.\n\nValues can be defined by a list of numbers or a list of key-value pairs. If key-value pairs are used, the key represents the axis ID and the value represents the data point. Else, the data points are assumed to be in the order of the axes defined.\n\nMultiple curves can be defined in a single line.\n\n```\nradar-beta\n  axis axis1, axis2, axis3\n  curve id1["Label1"]{1, 2, 3}\n  curve id2["Label2"]{4, 5, 6}, id3{7, 8, 9}\n  curve id4{ axis3: 30, axis1: 20, axis2: 10 }\n  ...\n```\n\n### Options\n\n- `showLegend`: The showLegend keyword is used to show or hide the legend in the radar diagram. The legend is shown by default.\n- `max`: The maximum value for the radar diagram. This is used to scale the radar diagram. If not provided, the maximum value is calculated from the data points.\n- `min`: The minimum value for the radar diagram. This is used to scale the radar diagram. If not provided, the minimum value is `0`.\n- `graticule`: The graticule keyword is used to define the type of graticule to be rendered in the radar diagram. The graticule can be `circle` or `polygon`. If not provided, the default graticule is `circle`.\n- `ticks`: The ticks keyword is used to define the number of ticks on the graticule. It is the number of concentric circles or polygons drawn to indicate the scale of the radar diagram. If not provided, the default number of ticks is `5`.\n\n```\nradar-beta\n  ...\n  showLegend true\n  max 100\n  min 0\n  graticule circle\n  ticks 5\n  ...\n```\n\n## Configuration\n\nPlease refer to the [configuration](/config/schema-docs/config-defs-radar-diagram-config.html) guide for details.\n\n| Parameter       | Description                              | Default Value |\n| --------------- | ---------------------------------------- | ------------- |\n| width           | Width of the radar diagram               | `600`         |\n| height          | Height of the radar diagram              | `600`         |\n| marginTop       | Top margin of the radar diagram          | `50`          |\n| marginBottom    | Bottom margin of the radar diagram       | `50`          |\n| marginLeft      | Left margin of the radar diagram         | `50`          |\n| marginRight     | Right margin of the radar diagram        | `50`          |\n| axisScaleFactor | Scale factor for the axis                | `1`           |\n| axisLabelFactor | Factor to adjust the axis label position | `1.05`        |\n| curveTension    | Tension for the rounded curves           | `0.17`        |\n\n## Theme Variables\n\n### Global Theme Variables\n\n> **Note**\n> The default values for these variables depend on the theme used. To override the default values, set the desired values in the themeVariables section of the configuration:\n>\n> ---\n>\n> config:\n> themeVariables:\n> cScale0: "#FF0000"\n> cScale1: "#00FF00"\n>\n> ---\n\nRadar charts support the color scales `cScale${i}` where `i` is a number from `0` to the theme\'s maximum number of colors in its color scale. Usually, the maximum number of colors is `12`.\n\n| Property   | Description                    |\n| ---------- | ------------------------------ |\n| fontSize   | Font size of the title         |\n| titleColor | Color of the title             |\n| cScale${i} | Color scale for the i-th curve |\n\n### Radar Style Options\n\n> **Note**\n> Specific variables for radar resides inside the `radar` key. To set the radar style options, use this syntax.\n>\n> ---\n>\n> config:\n> themeVariables:\n> radar:\n> axisColor: "#FF0000"\n>\n> ---\n\n| Property             | Description                  | Default Value |\n| -------------------- | ---------------------------- | ------------- |\n| axisColor            | Color of the axis lines      | `black`       |\n| axisStrokeWidth      | Width of the axis lines      | `1`           |\n| axisLabelFontSize    | Font size of the axis labels | `12px`        |\n| curveOpacity         | Opacity of the curves        | `0.7`         |\n| curveStrokeWidth     | Width of the curves          | `2`           |\n| graticuleColor       | Color of the graticule       | `black`       |\n| graticuleOpacity     | Opacity of the graticule     | `0.5`         |\n| graticuleStrokeWidth | Width of the graticule       | `1`           |\n| legendBoxSize        | Size of the legend box       | `10`          |\n| legendFontSize       | Font size of the legend      | `14px`        |\n\n## Example on config and theme\n\n```mermaid-example\n---\nconfig:\n  radar:\n    axisScaleFactor: 0.25\n    curveTension: 0.1\n  theme: base\n  themeVariables:\n    cScale0: "#FF0000"\n    cScale1: "#00FF00"\n    cScale2: "#0000FF"\n    radar:\n      curveOpacity: 0\n---\nradar-beta\n  axis A, B, C, D, E\n  curve c1{1,2,3,4,5}\n  curve c2{5,4,3,2,1}\n  curve c3{3,3,3,3,3}\n```\n\n```mermaid\n---\nconfig:\n  radar:\n    axisScaleFactor: 0.25\n    curveTension: 0.1\n  theme: base\n  themeVariables:\n    cScale0: "#FF0000"\n    cScale1: "#00FF00"\n    cScale2: "#0000FF"\n    radar:\n      curveOpacity: 0\n---\nradar-beta\n  axis A, B, C, D, E\n  curve c1{1,2,3,4,5}\n  curve c2{5,4,3,2,1}\n  curve c3{3,3,3,3,3}\n```\n\n<!--- cspell:ignore Kiviat --->\n';
-const __vite_glob_0_34 = '> **Warning**\n>\n> ## THIS IS AN AUTOGENERATED FILE. DO NOT EDIT.\n>\n> ## Please edit the corresponding file in [/packages/mermaid/src/docs/syntax/sequenceDiagram.md](../../packages/mermaid/src/docs/syntax/sequenceDiagram.md).\n\n# Sequence diagrams\n\n> A Sequence diagram is an interaction diagram that shows how processes operate with one another and in what order.\n\nMermaid can render sequence diagrams.\n\n```mermaid-example\nsequenceDiagram\n    Alice->>John: Hello John, how are you?\n    John-->>Alice: Great!\n    Alice-)John: See you later!\n```\n\n```mermaid\nsequenceDiagram\n    Alice->>John: Hello John, how are you?\n    John-->>Alice: Great!\n    Alice-)John: See you later!\n```\n\n> **Note**\n> A note on nodes, the word "end" could potentially break the diagram, due to the way that the mermaid language is scripted.\n>\n> If unavoidable, one must use parentheses(), quotation marks "", or brackets {},\\[], to enclose the word "end". i.e : (end), \\[end], {end}.\n\n## Syntax\n\n### Participants\n\nThe participants can be defined implicitly as in the first example on this page. The participants or actors are\nrendered in order of appearance in the diagram source text. Sometimes you might want to show the participants in a\ndifferent order than how they appear in the first message. It is possible to specify the actor\'s order of\nappearance by doing the following:\n\n```mermaid-example\nsequenceDiagram\n    participant Alice\n    participant Bob\n    Bob->>Alice: Hi Alice\n    Alice->>Bob: Hi Bob\n```\n\n```mermaid\nsequenceDiagram\n    participant Alice\n    participant Bob\n    Bob->>Alice: Hi Alice\n    Alice->>Bob: Hi Bob\n```\n\n### Actors\n\nIf you specifically want to use the actor symbol instead of a rectangle with text you can do so by using actor statements as per below.\n\n```mermaid-example\nsequenceDiagram\n    actor Alice\n    actor Bob\n    Alice->>Bob: Hi Bob\n    Bob->>Alice: Hi Alice\n```\n\n```mermaid\nsequenceDiagram\n    actor Alice\n    actor Bob\n    Alice->>Bob: Hi Bob\n    Bob->>Alice: Hi Alice\n```\n\n### Boundary\n\nIf you want to use the boundary symbol for a participant, use the JSON configuration syntax as shown below.\n\n```mermaid-example\nsequenceDiagram\n    participant Alice@{ "type" : "boundary" }\n    participant Bob\n    Alice->>Bob: Request from boundary\n    Bob->>Alice: Response to boundary\n```\n\n```mermaid\nsequenceDiagram\n    participant Alice@{ "type" : "boundary" }\n    participant Bob\n    Alice->>Bob: Request from boundary\n    Bob->>Alice: Response to boundary\n```\n\n### Control\n\nIf you want to use the control symbol for a participant, use the JSON configuration syntax as shown below.\n\n```mermaid-example\nsequenceDiagram\n    participant Alice@{ "type" : "control" }\n    participant Bob\n    Alice->>Bob: Control request\n    Bob->>Alice: Control response\n```\n\n```mermaid\nsequenceDiagram\n    participant Alice@{ "type" : "control" }\n    participant Bob\n    Alice->>Bob: Control request\n    Bob->>Alice: Control response\n```\n\n### Entity\n\nIf you want to use the entity symbol for a participant, use the JSON configuration syntax as shown below.\n\n```mermaid-example\nsequenceDiagram\n    participant Alice@{ "type" : "entity" }\n    participant Bob\n    Alice->>Bob: Entity request\n    Bob->>Alice: Entity response\n```\n\n```mermaid\nsequenceDiagram\n    participant Alice@{ "type" : "entity" }\n    participant Bob\n    Alice->>Bob: Entity request\n    Bob->>Alice: Entity response\n```\n\n### Database\n\nIf you want to use the database symbol for a participant, use the JSON configuration syntax as shown below.\n\n```mermaid-example\nsequenceDiagram\n    participant Alice@{ "type" : "database" }\n    participant Bob\n    Alice->>Bob: DB query\n    Bob->>Alice: DB result\n```\n\n```mermaid\nsequenceDiagram\n    participant Alice@{ "type" : "database" }\n    participant Bob\n    Alice->>Bob: DB query\n    Bob->>Alice: DB result\n```\n\n### Collections\n\nIf you want to use the collections symbol for a participant, use the JSON configuration syntax as shown below.\n\n```mermaid-example\nsequenceDiagram\n    participant Alice@{ "type" : "collections" }\n    participant Bob\n    Alice->>Bob: Collections request\n    Bob->>Alice: Collections response\n```\n\n```mermaid\nsequenceDiagram\n    participant Alice@{ "type" : "collections" }\n    participant Bob\n    Alice->>Bob: Collections request\n    Bob->>Alice: Collections response\n```\n\n### Queue\n\nIf you want to use the queue symbol for a participant, use the JSON configuration syntax as shown below.\n\n```mermaid-example\nsequenceDiagram\n    participant Alice@{ "type" : "queue" }\n    participant Bob\n    Alice->>Bob: Queue message\n    Bob->>Alice: Queue response\n```\n\n```mermaid\nsequenceDiagram\n    participant Alice@{ "type" : "queue" }\n    participant Bob\n    Alice->>Bob: Queue message\n    Bob->>Alice: Queue response\n```\n\n### Aliases\n\nThe actor can have a convenient identifier and a descriptive label. Aliases can be defined in two ways: using external syntax with the `as` keyword, or inline within the configuration object.\n\n#### External Alias Syntax\n\nYou can define an alias using the `as` keyword after the participant declaration:\n\n```mermaid-example\nsequenceDiagram\n    participant A as Alice\n    participant J as John\n    A->>J: Hello John, how are you?\n    J->>A: Great!\n```\n\n```mermaid\nsequenceDiagram\n    participant A as Alice\n    participant J as John\n    A->>J: Hello John, how are you?\n    J->>A: Great!\n```\n\nThe external alias syntax also works with participant stereotype configurations, allowing you to combine type specification with aliases:\n\n```mermaid-example\nsequenceDiagram\n    participant API@{ "type": "boundary" } as Public API\n    actor DB@{ "type": "database" } as User Database\n    participant Svc@{ "type": "control" } as Auth Service\n    API->>Svc: Authenticate\n    Svc->>DB: Query user\n    DB-->>Svc: User data\n    Svc-->>API: Token\n```\n\n```mermaid\nsequenceDiagram\n    participant API@{ "type": "boundary" } as Public API\n    actor DB@{ "type": "database" } as User Database\n    participant Svc@{ "type": "control" } as Auth Service\n    API->>Svc: Authenticate\n    Svc->>DB: Query user\n    DB-->>Svc: User data\n    Svc-->>API: Token\n```\n\n#### Inline Alias Syntax\n\nAlternatively, you can define an alias directly inside the configuration object using the `"alias"` field. This works with both `participant` and `actor` keywords:\n\n```mermaid-example\nsequenceDiagram\n    participant API@{ "type": "boundary", "alias": "Public API" }\n    participant Auth@{ "type": "control", "alias": "Auth Service" }\n    participant DB@{ "type": "database", "alias": "User Database" }\n    API->>Auth: Login request\n    Auth->>DB: Query user\n    DB-->>Auth: User data\n    Auth-->>API: Access token\n```\n\n```mermaid\nsequenceDiagram\n    participant API@{ "type": "boundary", "alias": "Public API" }\n    participant Auth@{ "type": "control", "alias": "Auth Service" }\n    participant DB@{ "type": "database", "alias": "User Database" }\n    API->>Auth: Login request\n    Auth->>DB: Query user\n    DB-->>Auth: User data\n    Auth-->>API: Access token\n```\n\n#### Alias Precedence\n\nWhen both inline alias (in the configuration object) and external alias (using `as` keyword) are provided, the **external alias takes precedence**:\n\n```mermaid-example\nsequenceDiagram\n    participant API@{ "type": "boundary", "alias": "Internal Name" } as External Name\n    participant DB@{ "type": "database", "alias": "Internal DB" } as External DB\n    API->>DB: Query\n    DB-->>API: Result\n```\n\n```mermaid\nsequenceDiagram\n    participant API@{ "type": "boundary", "alias": "Internal Name" } as External Name\n    participant DB@{ "type": "database", "alias": "Internal DB" } as External DB\n    API->>DB: Query\n    DB-->>API: Result\n```\n\nIn the example above, "External Name" and "External DB" will be displayed, not "Internal Name" and "Internal DB".\n\n### Actor Creation and Destruction (v10.3.0+)\n\nIt is possible to create and destroy actors by messages. To do so, add a create or destroy directive before the message.\n\n```\ncreate participant B\nA --> B: Hello\n```\n\nCreate directives support actor/participant distinction and aliases. The sender or the recipient of a message can be destroyed but only the recipient can be created.\n\n```mermaid-example\nsequenceDiagram\n    Alice->>Bob: Hello Bob, how are you ?\n    Bob->>Alice: Fine, thank you. And you?\n    create participant Carl\n    Alice->>Carl: Hi Carl!\n    create actor D as Donald\n    Carl->>D: Hi!\n    destroy Carl\n    Alice-xCarl: We are too many\n    destroy Bob\n    Bob->>Alice: I agree\n```\n\n```mermaid\nsequenceDiagram\n    Alice->>Bob: Hello Bob, how are you ?\n    Bob->>Alice: Fine, thank you. And you?\n    create participant Carl\n    Alice->>Carl: Hi Carl!\n    create actor D as Donald\n    Carl->>D: Hi!\n    destroy Carl\n    Alice-xCarl: We are too many\n    destroy Bob\n    Bob->>Alice: I agree\n```\n\n#### Unfixable actor/participant creation/deletion error\n\nIf an error of the following type occurs when creating or deleting an actor/participant:\n\n> The destroyed participant **participant-name** does not have an associated destroying message after its declaration. Please check the sequence diagram.\n\nAnd fixing diagram code does not get rid of this error and rendering of all other diagrams results in the same error, then you need to update the mermaid version to (v10.7.0+).\n\n### Grouping / Box\n\nThe actor(s) can be grouped in vertical boxes. You can define a color (if not, it will be transparent) and/or a descriptive label using the following notation:\n\n> **Note**\n> For colored boxes, the color value must be placed **before** the optional description.\n\n```\nbox Aqua Group Description\n... actors ...\nend\nbox Group without description\n... actors ...\nend\nbox rgb(33,66,99)\n... actors ...\nend\nbox rgba(33,66,99,0.5)\n... actors ...\nend\nbox hsl(10, 40%, 90%)\n... actors ...\nend\nbox hsla(10, 40%, 90%, 0.5)\n... actors ...\nend\n```\n\n> **Warning**\n> **Hex colors** (e.g., `#ff0000`) are currently **not supported** as the `#` character is interpreted as comment syntax.\n\n> **Note**\n> If your group name is a color you can force the color to be transparent:\n\n```\nbox transparent Aqua\n... actors ...\nend\n```\n\n```mermaid-example\n    sequenceDiagram\n    box Purple Alice & John\n    participant A\n    participant J\n    end\n    box Another Group\n    participant B\n    participant C\n    end\n    A->>J: Hello John, how are you?\n    J->>A: Great!\n    A->>B: Hello Bob, how is Charley?\n    B->>C: Hello Charley, how are you?\n```\n\n```mermaid\n    sequenceDiagram\n    box Purple Alice & John\n    participant A\n    participant J\n    end\n    box Another Group\n    participant B\n    participant C\n    end\n    A->>J: Hello John, how are you?\n    J->>A: Great!\n    A->>B: Hello Bob, how is Charley?\n    B->>C: Hello Charley, how are you?\n```\n\n## Messages\n\nMessages can be of two displayed either solid or with a dotted line.\n\n```\n[Actor][Arrow][Actor]:Message text\n```\n\nLines can be solid or dotted, and can end with various types of arrowheads, crosses, or open arrows.\n\n#### Supported Arrow Types\n\n**Standard Arrow Types**\n\n| Type     | Description                                          |\n| -------- | ---------------------------------------------------- |\n| `->`     | Solid line without arrow                             |\n| `-->`    | Dotted line without arrow                            |\n| `->>`    | Solid line with arrowhead                            |\n| `-->>`   | Dotted line with arrowhead                           |\n| `<<->>`  | Solid line with bidirectional arrowheads (v11.0.0+)  |\n| `<<-->>` | Dotted line with bidirectional arrowheads (v11.0.0+) |\n| `-x`     | Solid line with a cross at the end                   |\n| `--x`    | Dotted line with a cross at the end                  |\n| `-)`     | Solid line with an open arrow at the end (async)     |\n| `--)`    | Dotted line with a open arrow at the end (async)     |\n\n**Half-Arrows (v11.12.3+)**\n\nThe following half-arrow types are supported for more expressive sequence diagrams. Both solid and dotted variants are available by increasing the number of dashes (`-` → `--`).\n\n---\n\n| Type    | Description                                          |\n| ------- | ---------------------------------------------------- |\n| `-\\|\\`  | Solid line with top half arrowhead                   |\n| `--\\|\\` | Dotted line with top half arrowhead                  |\n| `-\\|/`  | Solid line with bottom half arrowhead                |\n| `--\\|/` | Dotted line with bottom half arrowhead               |\n| `/\\|-`  | Solid line with reverse top half arrowhead           |\n| `/\\|--` | Dotted line with reverse top half arrowhead          |\n| `\\\\-`   | Solid line with reverse bottom half arrowhead        |\n| `\\\\--`  | Dotted line with reverse bottom half arrowhead       |\n| `-\\\\`   | Solid line with top stick half arrowhead             |\n| `--\\\\`  | Dotted line with top stick half arrowhead            |\n| `-//`   | Solid line with bottom stick half arrowhead          |\n| `--//`  | Dotted line with bottom stick half arrowhead         |\n| `//-`   | Solid line with reverse top stick half arrowhead     |\n| `//--`  | Dotted line with reverse top stick half arrowhead    |\n| `\\\\-`   | Solid line with reverse bottom stick half arrowhead  |\n| `\\\\--`  | Dotted line with reverse bottom stick half arrowhead |\n\n## Central Connections (v11.12.3+)\n\nMermaid sequence diagrams support **central lifeline connections** using a `()`.\nThis is useful to represent messages or signals that connect to a central point, rather than from one actor directly to another.\n\nTo indicate a central connection, append `()` to the arrow syntax.\n\n#### Basic Syntax\n\n```mermaid-example\nsequenceDiagram\n    participant Alice\n    participant John\n    Alice->>()John: Hello John\n    Alice()->>John: How are you?\n    John()->>()Alice: Great!\n```\n\n```mermaid\nsequenceDiagram\n    participant Alice\n    participant John\n    Alice->>()John: Hello John\n    Alice()->>John: How are you?\n    John()->>()Alice: Great!\n```\n\n## Activations\n\nIt is possible to activate and deactivate an actor. (de)activation can be dedicated declarations:\n\n```mermaid-example\nsequenceDiagram\n    Alice->>John: Hello John, how are you?\n    activate John\n    John-->>Alice: Great!\n    deactivate John\n```\n\n```mermaid\nsequenceDiagram\n    Alice->>John: Hello John, how are you?\n    activate John\n    John-->>Alice: Great!\n    deactivate John\n```\n\nThere is also a shortcut notation by appending `+`/`-` suffix to the message arrow:\n\n```mermaid-example\nsequenceDiagram\n    Alice->>+John: Hello John, how are you?\n    John-->>-Alice: Great!\n```\n\n```mermaid\nsequenceDiagram\n    Alice->>+John: Hello John, how are you?\n    John-->>-Alice: Great!\n```\n\nActivations can be stacked for same actor:\n\n```mermaid-example\nsequenceDiagram\n    Alice->>+John: Hello John, how are you?\n    Alice->>+John: John, can you hear me?\n    John-->>-Alice: Hi Alice, I can hear you!\n    John-->>-Alice: I feel great!\n```\n\n```mermaid\nsequenceDiagram\n    Alice->>+John: Hello John, how are you?\n    Alice->>+John: John, can you hear me?\n    John-->>-Alice: Hi Alice, I can hear you!\n    John-->>-Alice: I feel great!\n```\n\n## Notes\n\nIt is possible to add notes to a sequence diagram. This is done by the notation\nNote \\[ right of | left of | over ] \\[Actor]: Text in note content\n\nSee the example below:\n\n```mermaid-example\nsequenceDiagram\n    participant John\n    Note right of John: Text in note\n```\n\n```mermaid\nsequenceDiagram\n    participant John\n    Note right of John: Text in note\n```\n\nIt is also possible to create notes spanning two participants:\n\n```mermaid-example\nsequenceDiagram\n    Alice->John: Hello John, how are you?\n    Note over Alice,John: A typical interaction\n```\n\n```mermaid\nsequenceDiagram\n    Alice->John: Hello John, how are you?\n    Note over Alice,John: A typical interaction\n```\n\n## Line breaks\n\nLine break can be added to Note and Message:\n\n```mermaid-example\nsequenceDiagram\n    Alice->John: Hello John,<br/>how are you?\n    Note over Alice,John: A typical interaction<br/>But now in two lines\n```\n\n```mermaid\nsequenceDiagram\n    Alice->John: Hello John,<br/>how are you?\n    Note over Alice,John: A typical interaction<br/>But now in two lines\n```\n\nLine breaks in Actor names requires aliases:\n\n```mermaid-example\nsequenceDiagram\n    participant Alice as Alice<br/>Johnson\n    Alice->John: Hello John,<br/>how are you?\n    Note over Alice,John: A typical interaction<br/>But now in two lines\n```\n\n```mermaid\nsequenceDiagram\n    participant Alice as Alice<br/>Johnson\n    Alice->John: Hello John,<br/>how are you?\n    Note over Alice,John: A typical interaction<br/>But now in two lines\n```\n\n## Loops\n\nIt is possible to express loops in a sequence diagram. This is done by the notation\n\n```\nloop Loop text\n... statements ...\nend\n```\n\nSee the example below:\n\n```mermaid-example\nsequenceDiagram\n    Alice->John: Hello John, how are you?\n    loop Every minute\n        John-->Alice: Great!\n    end\n```\n\n```mermaid\nsequenceDiagram\n    Alice->John: Hello John, how are you?\n    loop Every minute\n        John-->Alice: Great!\n    end\n```\n\n## Alt\n\nIt is possible to express alternative paths in a sequence diagram. This is done by the notation\n\n```\nalt Describing text\n... statements ...\nelse\n... statements ...\nend\n```\n\nor if there is sequence that is optional (if without else).\n\n```\nopt Describing text\n... statements ...\nend\n```\n\nSee the example below:\n\n```mermaid-example\nsequenceDiagram\n    Alice->>Bob: Hello Bob, how are you?\n    alt is sick\n        Bob->>Alice: Not so good :(\n    else is well\n        Bob->>Alice: Feeling fresh like a daisy\n    end\n    opt Extra response\n        Bob->>Alice: Thanks for asking\n    end\n```\n\n```mermaid\nsequenceDiagram\n    Alice->>Bob: Hello Bob, how are you?\n    alt is sick\n        Bob->>Alice: Not so good :(\n    else is well\n        Bob->>Alice: Feeling fresh like a daisy\n    end\n    opt Extra response\n        Bob->>Alice: Thanks for asking\n    end\n```\n\n## Parallel\n\nIt is possible to show actions that are happening in parallel.\n\nThis is done by the notation\n\n```\npar [Action 1]\n... statements ...\nand [Action 2]\n... statements ...\nand [Action N]\n... statements ...\nend\n```\n\nSee the example below:\n\n```mermaid-example\nsequenceDiagram\n    par Alice to Bob\n        Alice->>Bob: Hello guys!\n    and Alice to John\n        Alice->>John: Hello guys!\n    end\n    Bob-->>Alice: Hi Alice!\n    John-->>Alice: Hi Alice!\n```\n\n```mermaid\nsequenceDiagram\n    par Alice to Bob\n        Alice->>Bob: Hello guys!\n    and Alice to John\n        Alice->>John: Hello guys!\n    end\n    Bob-->>Alice: Hi Alice!\n    John-->>Alice: Hi Alice!\n```\n\nIt is also possible to nest parallel blocks.\n\n```mermaid-example\nsequenceDiagram\n    par Alice to Bob\n        Alice->>Bob: Go help John\n    and Alice to John\n        Alice->>John: I want this done today\n        par John to Charlie\n            John->>Charlie: Can we do this today?\n        and John to Diana\n            John->>Diana: Can you help us today?\n        end\n    end\n```\n\n```mermaid\nsequenceDiagram\n    par Alice to Bob\n        Alice->>Bob: Go help John\n    and Alice to John\n        Alice->>John: I want this done today\n        par John to Charlie\n            John->>Charlie: Can we do this today?\n        and John to Diana\n            John->>Diana: Can you help us today?\n        end\n    end\n```\n\n## Critical Region\n\nIt is possible to show actions that must happen automatically with conditional handling of circumstances.\n\nThis is done by the notation\n\n```\ncritical [Action that must be performed]\n... statements ...\noption [Circumstance A]\n... statements ...\noption [Circumstance B]\n... statements ...\nend\n```\n\nSee the example below:\n\n```mermaid-example\nsequenceDiagram\n    critical Establish a connection to the DB\n        Service-->DB: connect\n    option Network timeout\n        Service-->Service: Log error\n    option Credentials rejected\n        Service-->Service: Log different error\n    end\n```\n\n```mermaid\nsequenceDiagram\n    critical Establish a connection to the DB\n        Service-->DB: connect\n    option Network timeout\n        Service-->Service: Log error\n    option Credentials rejected\n        Service-->Service: Log different error\n    end\n```\n\nIt is also possible to have no options at all\n\n```mermaid-example\nsequenceDiagram\n    critical Establish a connection to the DB\n        Service-->DB: connect\n    end\n```\n\n```mermaid\nsequenceDiagram\n    critical Establish a connection to the DB\n        Service-->DB: connect\n    end\n```\n\nThis critical block can also be nested, equivalently to the `par` statement as seen above.\n\n## Break\n\nIt is possible to indicate a stop of the sequence within the flow (usually used to model exceptions).\n\nThis is done by the notation\n\n```\nbreak [something happened]\n... statements ...\nend\n```\n\nSee the example below:\n\n```mermaid-example\nsequenceDiagram\n    Consumer-->API: Book something\n    API-->BookingService: Start booking process\n    break when the booking process fails\n        API-->Consumer: show failure\n    end\n    API-->BillingService: Start billing process\n```\n\n```mermaid\nsequenceDiagram\n    Consumer-->API: Book something\n    API-->BookingService: Start booking process\n    break when the booking process fails\n        API-->Consumer: show failure\n    end\n    API-->BillingService: Start billing process\n```\n\n## Background Highlighting\n\nIt is possible to highlight flows by providing colored background rects. This is done by the notation\n\n```\nrect COLOR\n... content ...\nend\n```\n\nThe colors are defined using rgb and rgba syntax.\n\n```\nrect rgb(0, 255, 0)\n... content ...\nend\n```\n\n```\nrect rgba(0, 0, 255, .1)\n... content ...\nend\n```\n\nSee the examples below:\n\n```mermaid-example\nsequenceDiagram\n    participant Alice\n    participant John\n\n    rect rgb(191, 223, 255)\n    note right of Alice: Alice calls John.\n    Alice->>+John: Hello John, how are you?\n    rect rgb(200, 150, 255)\n    Alice->>+John: John, can you hear me?\n    John-->>-Alice: Hi Alice, I can hear you!\n    end\n    John-->>-Alice: I feel great!\n    end\n    Alice ->>+ John: Did you want to go to the game tonight?\n    John -->>- Alice: Yeah! See you there.\n\n```\n\n```mermaid\nsequenceDiagram\n    participant Alice\n    participant John\n\n    rect rgb(191, 223, 255)\n    note right of Alice: Alice calls John.\n    Alice->>+John: Hello John, how are you?\n    rect rgb(200, 150, 255)\n    Alice->>+John: John, can you hear me?\n    John-->>-Alice: Hi Alice, I can hear you!\n    end\n    John-->>-Alice: I feel great!\n    end\n    Alice ->>+ John: Did you want to go to the game tonight?\n    John -->>- Alice: Yeah! See you there.\n\n```\n\n## Comments\n\nComments can be entered within a sequence diagram, which will be ignored by the parser. Comments need to be on their own line, and must be prefaced with `%%` (double percent signs). Any text after the start of the comment to the next newline will be treated as a comment, including any diagram syntax\n\n```mermaid-example\nsequenceDiagram\n    Alice->>John: Hello John, how are you?\n    %% this is a comment\n    John-->>Alice: Great!\n```\n\n```mermaid\nsequenceDiagram\n    Alice->>John: Hello John, how are you?\n    %% this is a comment\n    John-->>Alice: Great!\n```\n\n## Entity codes to escape characters\n\nIt is possible to escape characters using the syntax exemplified here.\n\n```mermaid-example\nsequenceDiagram\n    A->>B: I #9829; you!\n    B->>A: I #9829; you #infin; times more!\n```\n\n```mermaid\nsequenceDiagram\n    A->>B: I #9829; you!\n    B->>A: I #9829; you #infin; times more!\n```\n\nNumbers given are base 10, so `#` can be encoded as `#35;`. It is also supported to use HTML character names.\n\nBecause semicolons can be used instead of line breaks to define the markup, you need to use `#59;` to include a semicolon in message text.\n\n## sequenceNumbers\n\nIt is possible to get a sequence number attached to each arrow in a sequence diagram. This can be configured when adding mermaid to the website as shown below:\n\n```html\n<script>\n  mermaid.initialize({ sequence: { showSequenceNumbers: true } });\n<\/script>\n```\n\nIt can also be turned on via the diagram code as in the diagram:\n\n```mermaid-example\nsequenceDiagram\n    autonumber\n    Alice->>John: Hello John, how are you?\n    loop HealthCheck\n        John->>John: Fight against hypochondria\n    end\n    Note right of John: Rational thoughts!\n    John-->>Alice: Great!\n    John->>Bob: How about you?\n    Bob-->>John: Jolly good!\n```\n\n```mermaid\nsequenceDiagram\n    autonumber\n    Alice->>John: Hello John, how are you?\n    loop HealthCheck\n        John->>John: Fight against hypochondria\n    end\n    Note right of John: Rational thoughts!\n    John-->>Alice: Great!\n    John->>Bob: How about you?\n    Bob-->>John: Jolly good!\n```\n\n### Start and Increment values (v11.15.0+)\n\nIt is possible to specify a starting value and an increment value for automatic numbering. Both the starting value and increment value can include decimals up to the hundredths place.\n\nUse the following syntax in your diagram definition:\n\n```\nautonumber <start> <increment>\n```\n\n## Actor Menus\n\nActors can have popup-menus containing individualized links to external pages. For example, if an actor represented a web service, useful links might include a link to the service health dashboard, repo containing the code for the service, or a wiki page describing the service.\n\nThis can be configured by adding one or more link lines with the format:\n\n```\nlink <actor>: <link-label> @ <link-url>\n```\n\n```mermaid-example\nsequenceDiagram\n    participant Alice\n    participant John\n    link Alice: Dashboard @ https://dashboard.contoso.com/alice\n    link Alice: Wiki @ https://wiki.contoso.com/alice\n    link John: Dashboard @ https://dashboard.contoso.com/john\n    link John: Wiki @ https://wiki.contoso.com/john\n    Alice->>John: Hello John, how are you?\n    John-->>Alice: Great!\n    Alice-)John: See you later!\n```\n\n```mermaid\nsequenceDiagram\n    participant Alice\n    participant John\n    link Alice: Dashboard @ https://dashboard.contoso.com/alice\n    link Alice: Wiki @ https://wiki.contoso.com/alice\n    link John: Dashboard @ https://dashboard.contoso.com/john\n    link John: Wiki @ https://wiki.contoso.com/john\n    Alice->>John: Hello John, how are you?\n    John-->>Alice: Great!\n    Alice-)John: See you later!\n```\n\n#### Advanced Menu Syntax\n\nThere is an advanced syntax that relies on JSON formatting. If you are comfortable with JSON format, then this exists as well.\n\nThis can be configured by adding the links lines with the format:\n\n```\nlinks <actor>: <json-formatted link-name link-url pairs>\n```\n\nAn example is below:\n\n```mermaid-example\nsequenceDiagram\n    participant Alice\n    participant John\n    links Alice: {"Dashboard": "https://dashboard.contoso.com/alice", "Wiki": "https://wiki.contoso.com/alice"}\n    links John: {"Dashboard": "https://dashboard.contoso.com/john", "Wiki": "https://wiki.contoso.com/john"}\n    Alice->>John: Hello John, how are you?\n    John-->>Alice: Great!\n    Alice-)John: See you later!\n```\n\n```mermaid\nsequenceDiagram\n    participant Alice\n    participant John\n    links Alice: {"Dashboard": "https://dashboard.contoso.com/alice", "Wiki": "https://wiki.contoso.com/alice"}\n    links John: {"Dashboard": "https://dashboard.contoso.com/john", "Wiki": "https://wiki.contoso.com/john"}\n    Alice->>John: Hello John, how are you?\n    John-->>Alice: Great!\n    Alice-)John: See you later!\n```\n\n## Styling\n\nStyling of a sequence diagram is done by defining a number of css classes. During rendering these classes are extracted from the file located at src/themes/sequence.scss\n\n### Classes used\n\n| Class          | Description                                                    |\n| -------------- | -------------------------------------------------------------- |\n| actor          | Styles for the actor box.                                      |\n| actor-top      | Styles for the actor figure/ box at the top of the diagram.    |\n| actor-bottom   | Styles for the actor figure/ box at the bottom of the diagram. |\n| text.actor     | Styles for text of all of the actors.                          |\n| text.actor-box | Styles for text of the actor box.                              |\n| text.actor-man | Styles for text of the actor figure.                           |\n| actor-line     | The vertical line for an actor.                                |\n| messageLine0   | Styles for the solid message line.                             |\n| messageLine1   | Styles for the dotted message line.                            |\n| messageText    | Defines styles for the text on the message arrows.             |\n| labelBox       | Defines styles label to left in a loop.                        |\n| labelText      | Styles for the text in label for loops.                        |\n| loopText       | Styles for the text in the loop box.                           |\n| loopLine       | Defines styles for the lines in the loop box.                  |\n| note           | Styles for the note box.                                       |\n| noteText       | Styles for the text on in the note boxes.                      |\n\n### Sample stylesheet\n\n```css\nbody {\n  background: white;\n}\n\n.actor {\n  stroke: #ccccff;\n  fill: #ececff;\n}\ntext.actor {\n  fill: black;\n  stroke: none;\n  font-family: Helvetica;\n}\n\n.actor-line {\n  stroke: grey;\n}\n\n.messageLine0 {\n  stroke-width: 1.5;\n  stroke-dasharray: \'2 2\';\n  marker-end: \'url(#arrowhead)\';\n  stroke: black;\n}\n\n.messageLine1 {\n  stroke-width: 1.5;\n  stroke-dasharray: \'2 2\';\n  stroke: black;\n}\n\n#arrowhead {\n  fill: black;\n}\n\n.messageText {\n  fill: black;\n  stroke: none;\n  font-family: \'trebuchet ms\', verdana, arial;\n  font-size: 14px;\n}\n\n.labelBox {\n  stroke: #ccccff;\n  fill: #ececff;\n}\n\n.labelText {\n  fill: black;\n  stroke: none;\n  font-family: \'trebuchet ms\', verdana, arial;\n}\n\n.loopText {\n  fill: black;\n  stroke: none;\n  font-family: \'trebuchet ms\', verdana, arial;\n}\n\n.loopLine {\n  stroke-width: 2;\n  stroke-dasharray: \'2 2\';\n  marker-end: \'url(#arrowhead)\';\n  stroke: #ccccff;\n}\n\n.note {\n  stroke: #decc93;\n  fill: #fff5ad;\n}\n\n.noteText {\n  fill: black;\n  stroke: none;\n  font-family: \'trebuchet ms\', verdana, arial;\n  font-size: 14px;\n}\n```\n\n## Configuration\n\nIt is possible to adjust the margins for rendering the sequence diagram.\n\nThis is done by defining `mermaid.sequenceConfig` or by the CLI to use a json file with the configuration.\nHow to use the CLI is described in the [mermaidCLI](../config/mermaidCLI.md) page.\n`mermaid.sequenceConfig` can be set to a JSON string with config parameters or the corresponding object.\n\n```javascript\nmermaid.sequenceConfig = {\n  diagramMarginX: 50,\n  diagramMarginY: 10,\n  boxTextMargin: 5,\n  noteMargin: 10,\n  messageMargin: 35,\n  mirrorActors: true,\n};\n```\n\n### Possible configuration parameters:\n\n| Parameter         | Description                                                                                                                                | Default value                  |\n| ----------------- | ------------------------------------------------------------------------------------------------------------------------------------------ | ------------------------------ |\n| mirrorActors      | Turns on/off the rendering of actors below the diagram as well as above it                                                                 | false                          |\n| bottomMarginAdj   | Adjusts how far down the graph ended. Wide borders styles with css could generate unwanted clipping which is why this config param exists. | 1                              |\n| actorFontSize     | Sets the font size for the actor\'s description                                                                                             | 14                             |\n| actorFontFamily   | Sets the font family for the actor\'s description                                                                                           | "Open Sans", sans-serif        |\n| actorFontWeight   | Sets the font weight for the actor\'s description                                                                                           | "Open Sans", sans-serif        |\n| noteFontSize      | Sets the font size for actor-attached notes                                                                                                | 14                             |\n| noteFontFamily    | Sets the font family for actor-attached notes                                                                                              | "trebuchet ms", verdana, arial |\n| noteFontWeight    | Sets the font weight for actor-attached notes                                                                                              | "trebuchet ms", verdana, arial |\n| noteAlign         | Sets the text alignment for text in actor-attached notes                                                                                   | center                         |\n| messageFontSize   | Sets the font size for actor<->actor messages                                                                                              | 16                             |\n| messageFontFamily | Sets the font family for actor<->actor messages                                                                                            | "trebuchet ms", verdana, arial |\n| messageFontWeight | Sets the font weight for actor<->actor messages                                                                                            | "trebuchet ms", verdana, arial |\n';
-const __vite_glob_0_35 = '> **Warning**\n>\n> ## THIS IS AN AUTOGENERATED FILE. DO NOT EDIT.\n>\n> ## Please edit the corresponding file in [/packages/mermaid/src/docs/syntax/stateDiagram.md](../../packages/mermaid/src/docs/syntax/stateDiagram.md).\n\n# State diagrams\n\n> "A state diagram is a type of diagram used in computer science and related fields to describe the behavior of systems.\n> State diagrams require that the system described is composed of a finite number of states; sometimes, this is indeed the\n> case, while at other times this is a reasonable abstraction." Wikipedia\n\nMermaid can render state diagrams. The syntax tries to be compliant with the syntax used in plantUml as this will make\nit easier for users to share diagrams between mermaid and plantUml.\n\n```mermaid-example\n---\ntitle: Simple sample\n---\nstateDiagram-v2\n    [*] --> Still\n    Still --> [*]\n\n    Still --> Moving\n    Moving --> Still\n    Moving --> Crash\n    Crash --> [*]\n```\n\n```mermaid\n---\ntitle: Simple sample\n---\nstateDiagram-v2\n    [*] --> Still\n    Still --> [*]\n\n    Still --> Moving\n    Moving --> Still\n    Moving --> Crash\n    Crash --> [*]\n```\n\nOlder renderer:\n\n```mermaid-example\nstateDiagram\n    [*] --> Still\n    Still --> [*]\n\n    Still --> Moving\n    Moving --> Still\n    Moving --> Crash\n    Crash --> [*]\n```\n\n```mermaid\nstateDiagram\n    [*] --> Still\n    Still --> [*]\n\n    Still --> Moving\n    Moving --> Still\n    Moving --> Crash\n    Crash --> [*]\n```\n\nIn state diagrams systems are described in terms of _states_ and how one _state_ can change to another _state_ via\na _transition._ The example diagram above shows three states: **Still**, **Moving** and **Crash**. You start in the\n**Still** state. From **Still** you can change to the **Moving** state. From **Moving** you can change either back to the **Still** state or to\nthe **Crash** state. There is no transition from **Still** to **Crash**. (You can\'t crash if you\'re still.)\n\n## States\n\nA state can be declared in multiple ways. The simplest way is to define a state with just an id:\n\n```mermaid-example\nstateDiagram-v2\n    stateId\n```\n\n```mermaid\nstateDiagram-v2\n    stateId\n```\n\nAnother way is by using the state keyword with a description as per below:\n\n```mermaid-example\nstateDiagram-v2\n    state "This is a state description" as s2\n```\n\n```mermaid\nstateDiagram-v2\n    state "This is a state description" as s2\n```\n\nAnother way to define a state with a description is to define the state id followed by a colon and the description:\n\n```mermaid-example\nstateDiagram-v2\n    s2 : This is a state description\n```\n\n```mermaid\nstateDiagram-v2\n    s2 : This is a state description\n```\n\n## Transitions\n\nTransitions are path/edges when one state passes into another. This is represented using text arrow, "-->".\n\nWhen you define a transition between two states and the states are not already defined, the undefined states are defined\nwith the id from the transition. You can later add descriptions to states defined this way.\n\n```mermaid-example\nstateDiagram-v2\n    s1 --> s2\n```\n\n```mermaid\nstateDiagram-v2\n    s1 --> s2\n```\n\nIt is possible to add text to a transition to describe what it represents:\n\n```mermaid-example\nstateDiagram-v2\n    s1 --> s2: A transition\n```\n\n```mermaid\nstateDiagram-v2\n    s1 --> s2: A transition\n```\n\n## Start and End\n\nThere are two special states indicating the start and stop of the diagram. These are written with the \\[\\*] syntax and\nthe direction of the transition to it defines it either as a start or a stop state.\n\n```mermaid-example\nstateDiagram-v2\n    [*] --> s1\n    s1 --> [*]\n```\n\n```mermaid\nstateDiagram-v2\n    [*] --> s1\n    s1 --> [*]\n```\n\n## Composite states\n\nIn a real world use of state diagrams you often end up with diagrams that are multidimensional as one state can\nhave several internal states. These are called composite states in this terminology.\n\nIn order to define a composite state you need to use the state keyword followed by an id and the body of the composite\nstate between {}. You can name a composite state on a separate line just like a simple state. See the example below:\n\n```mermaid-example\nstateDiagram-v2\n    [*] --> First\n    state First {\n        [*] --> second\n        second --> [*]\n    }\n\n    [*] --> NamedComposite\n    NamedComposite: Another Composite\n    state NamedComposite {\n        [*] --> namedSimple\n        namedSimple --> [*]\n        namedSimple: Another simple\n    }\n```\n\n```mermaid\nstateDiagram-v2\n    [*] --> First\n    state First {\n        [*] --> second\n        second --> [*]\n    }\n\n    [*] --> NamedComposite\n    NamedComposite: Another Composite\n    state NamedComposite {\n        [*] --> namedSimple\n        namedSimple --> [*]\n        namedSimple: Another simple\n    }\n```\n\nYou can do this in several layers:\n\n```mermaid-example\nstateDiagram-v2\n    [*] --> First\n\n    state First {\n        [*] --> Second\n\n        state Second {\n            [*] --> second\n            second --> Third\n\n            state Third {\n                [*] --> third\n                third --> [*]\n            }\n        }\n    }\n```\n\n```mermaid\nstateDiagram-v2\n    [*] --> First\n\n    state First {\n        [*] --> Second\n\n        state Second {\n            [*] --> second\n            second --> Third\n\n            state Third {\n                [*] --> third\n                third --> [*]\n            }\n        }\n    }\n```\n\nYou can also define transitions also between composite states:\n\n```mermaid-example\nstateDiagram-v2\n    [*] --> First\n    First --> Second\n    First --> Third\n\n    state First {\n        [*] --> fir\n        fir --> [*]\n    }\n    state Second {\n        [*] --> sec\n        sec --> [*]\n    }\n    state Third {\n        [*] --> thi\n        thi --> [*]\n    }\n```\n\n```mermaid\nstateDiagram-v2\n    [*] --> First\n    First --> Second\n    First --> Third\n\n    state First {\n        [*] --> fir\n        fir --> [*]\n    }\n    state Second {\n        [*] --> sec\n        sec --> [*]\n    }\n    state Third {\n        [*] --> thi\n        thi --> [*]\n    }\n```\n\n_You cannot define transitions between internal states belonging to different composite states_\n\n## Choice\n\nSometimes you need to model a choice between two or more paths, you can do so using <\\<choice>>.\n\n```mermaid-example\nstateDiagram-v2\n    state if_state <<choice>>\n    [*] --> IsPositive\n    IsPositive --> if_state\n    if_state --> False: if n < 0\n    if_state --> True : if n >= 0\n```\n\n```mermaid\nstateDiagram-v2\n    state if_state <<choice>>\n    [*] --> IsPositive\n    IsPositive --> if_state\n    if_state --> False: if n < 0\n    if_state --> True : if n >= 0\n```\n\n## Forks\n\nIt is possible to specify a fork in the diagram using <\\<fork>> <\\<join>>.\n\n```mermaid-example\n   stateDiagram-v2\n    state fork_state <<fork>>\n      [*] --> fork_state\n      fork_state --> State2\n      fork_state --> State3\n\n      state join_state <<join>>\n      State2 --> join_state\n      State3 --> join_state\n      join_state --> State4\n      State4 --> [*]\n```\n\n```mermaid\n   stateDiagram-v2\n    state fork_state <<fork>>\n      [*] --> fork_state\n      fork_state --> State2\n      fork_state --> State3\n\n      state join_state <<join>>\n      State2 --> join_state\n      State3 --> join_state\n      join_state --> State4\n      State4 --> [*]\n```\n\n## Notes\n\nSometimes nothing says it better than a Post-it note. That is also the case in state diagrams.\n\nHere you can choose to put the note to the _right of_ or to the _left of_ a node.\n\n```mermaid-example\n    stateDiagram-v2\n        State1: The state with a note\n        note right of State1\n            Important information! You can write\n            notes.\n        end note\n        State1 --> State2\n        note left of State2 : This is the note to the left.\n```\n\n```mermaid\n    stateDiagram-v2\n        State1: The state with a note\n        note right of State1\n            Important information! You can write\n            notes.\n        end note\n        State1 --> State2\n        note left of State2 : This is the note to the left.\n```\n\n## Concurrency\n\nAs in plantUml you can specify concurrency using the -- symbol.\n\n```mermaid-example\nstateDiagram-v2\n    [*] --> Active\n\n    state Active {\n        [*] --> NumLockOff\n        NumLockOff --> NumLockOn : EvNumLockPressed\n        NumLockOn --> NumLockOff : EvNumLockPressed\n        --\n        [*] --> CapsLockOff\n        CapsLockOff --> CapsLockOn : EvCapsLockPressed\n        CapsLockOn --> CapsLockOff : EvCapsLockPressed\n        --\n        [*] --> ScrollLockOff\n        ScrollLockOff --> ScrollLockOn : EvScrollLockPressed\n        ScrollLockOn --> ScrollLockOff : EvScrollLockPressed\n    }\n```\n\n```mermaid\nstateDiagram-v2\n    [*] --> Active\n\n    state Active {\n        [*] --> NumLockOff\n        NumLockOff --> NumLockOn : EvNumLockPressed\n        NumLockOn --> NumLockOff : EvNumLockPressed\n        --\n        [*] --> CapsLockOff\n        CapsLockOff --> CapsLockOn : EvCapsLockPressed\n        CapsLockOn --> CapsLockOff : EvCapsLockPressed\n        --\n        [*] --> ScrollLockOff\n        ScrollLockOff --> ScrollLockOn : EvScrollLockPressed\n        ScrollLockOn --> ScrollLockOff : EvScrollLockPressed\n    }\n```\n\n## Setting the direction of the diagram\n\nWith state diagrams you can use the direction statement to set the direction which the diagram will render like in this\nexample.\n\n```mermaid-example\nstateDiagram\n    direction LR\n    [*] --> A\n    A --> B\n    B --> C\n    state B {\n      direction LR\n      a --> b\n    }\n    B --> D\n```\n\n```mermaid\nstateDiagram\n    direction LR\n    [*] --> A\n    A --> B\n    B --> C\n    state B {\n      direction LR\n      a --> b\n    }\n    B --> D\n```\n\n## Comments\n\nComments can be entered within a state diagram chart, which will be ignored by the parser. Comments must be prefaced with `%%` (double percent signs) and any text after their start to the next newline will be treated as a comment, including any diagram syntax. They can be on their own line or at the end of a statement.\n\n```mermaid-example\nstateDiagram-v2\n    [*] --> Still\n    Still --> [*]\n%% this is a comment\n    Still --> Moving\n    Moving --> Still %% another comment\n    Moving --> Crash\n    Crash --> [*]\n```\n\n```mermaid\nstateDiagram-v2\n    [*] --> Still\n    Still --> [*]\n%% this is a comment\n    Still --> Moving\n    Moving --> Still %% another comment\n    Moving --> Crash\n    Crash --> [*]\n```\n\n## Styling with classDefs\n\nAs with other diagrams (like flowcharts), you can define a style in the diagram itself and apply that named style to a\nstate or states in the diagram.\n\n**These are the current limitations with state diagram classDefs:**\n\n1. Cannot be applied to start or end states\n2. Cannot be applied to or within composite states\n\n_These are in development and will be available in a future version._\n\nYou define a style using the `classDef` keyword, which is short for "class definition" (where "class" means something\nlike a _CSS class_)\nfollowed by _a name for the style,_\nand then one or more _property-value pairs_. Each _property-value pair_ is\na _[valid CSS property name](https://www.w3.org/TR/CSS/#properties)_ followed by a colon (`:`) and then a _value._\n\nHere is an example of a classDef with just one property-value pair:\n\n```txt\nclassDef movement font-style:italic;\n```\n\nwhere\n\n- the _name_ of the style is `movement`\n- the only _property_ is `font-style` and its _value_ is `italic`\n\nIf you want to have more than one _property-value pair_ then you put a comma (`,`) between each _property-value pair._\n\nHere is an example with three property-value pairs:\n\n```txt\nclassDef badBadEvent fill:#f00,color:white,font-weight:bold,stroke-width:2px,stroke:yellow\n```\n\nwhere\n\n- the _name_ of the style is `badBadEvent`\n- the first _property_ is `fill` and its _value_ is `#f00`\n- the second _property_ is `color` and its _value_ is `white`\n- the third _property_ is `font-weight` and its _value_ is `bold`\n- the fourth _property_ is `stroke-width` and its _value_ is `2px`\n- the fifth _property_ is `stroke` and its _value_ is `yellow`\n\n### Apply classDef styles to states\n\nThere are two ways to apply a `classDef` style to a state:\n\n1. use the `class` keyword to apply a classDef style to one or more states in a single statement, or\n2. use the `:::` operator to apply a classDef style to a state as it is being used in a transition statement (e.g. with an arrow\n   to/from another state)\n\n#### 1. `class` statement\n\nA `class` statement tells Mermaid to apply the named classDef to one or more classes. The form is:\n\n```txt\nclass [one or more state names, separated by commas] [name of a style defined with classDef]\n```\n\nHere is an example applying the `badBadEvent` style to a state named `Crash`:\n\n```txt\nclass Crash badBadEvent\n```\n\nHere is an example applying the `movement` style to the two states `Moving` and `Crash`:\n\n```txt\nclass Moving, Crash movement\n```\n\nHere is a diagram that shows the examples in use. Note that the `Crash` state has two classDef styles applied: `movement`\nand `badBadEvent`\n\n```mermaid-example\n   stateDiagram\n   direction TB\n\n   accTitle: This is the accessible title\n   accDescr: This is an accessible description\n\n   classDef notMoving fill:white\n   classDef movement font-style:italic\n   classDef badBadEvent fill:#f00,color:white,font-weight:bold,stroke-width:2px,stroke:yellow\n\n   [*]--> Still\n   Still --> [*]\n   Still --> Moving\n   Moving --> Still\n   Moving --> Crash\n   Crash --> [*]\n\n   class Still notMoving\n   class Moving, Crash movement\n   class Crash badBadEvent\n   class end badBadEvent\n```\n\n```mermaid\n   stateDiagram\n   direction TB\n\n   accTitle: This is the accessible title\n   accDescr: This is an accessible description\n\n   classDef notMoving fill:white\n   classDef movement font-style:italic\n   classDef badBadEvent fill:#f00,color:white,font-weight:bold,stroke-width:2px,stroke:yellow\n\n   [*]--> Still\n   Still --> [*]\n   Still --> Moving\n   Moving --> Still\n   Moving --> Crash\n   Crash --> [*]\n\n   class Still notMoving\n   class Moving, Crash movement\n   class Crash badBadEvent\n   class end badBadEvent\n```\n\n#### 2. `:::` operator to apply a style to a state\n\nYou can apply a classDef style to a state using the `:::` (three colons) operator. The syntax is\n\n```txt\n[state]:::[style name]\n```\n\nYou can use this in a diagram within a statement using a class. This includes the start and end states. For example:\n\n```mermaid-example\nstateDiagram\n   direction TB\n\n   accTitle: This is the accessible title\n   accDescr: This is an accessible description\n\n   classDef notMoving fill:white\n   classDef movement font-style:italic;\n   classDef badBadEvent fill:#f00,color:white,font-weight:bold,stroke-width:2px,stroke:yellow\n\n   [*] --> Still:::notMoving\n   Still --> [*]\n   Still --> Moving:::movement\n   Moving --> Still\n   Moving --> Crash:::movement\n   Crash:::badBadEvent --> [*]\n```\n\n```mermaid\nstateDiagram\n   direction TB\n\n   accTitle: This is the accessible title\n   accDescr: This is an accessible description\n\n   classDef notMoving fill:white\n   classDef movement font-style:italic;\n   classDef badBadEvent fill:#f00,color:white,font-weight:bold,stroke-width:2px,stroke:yellow\n\n   [*] --> Still:::notMoving\n   Still --> [*]\n   Still --> Moving:::movement\n   Moving --> Still\n   Moving --> Crash:::movement\n   Crash:::badBadEvent --> [*]\n```\n\n## Spaces in state names\n\nSpaces can be added to a state by first defining the state with an id and then referencing the id later.\n\nIn the following example there is a state with the id **yswsii** and description **Your state with spaces in it**.\nAfter it has been defined, **yswsii** is used in the diagram in the first transition (`[*] --> yswsii`)\nand also in the transition to **YetAnotherState** (`yswsii --> YetAnotherState`).\n(**yswsii** has been styled so that it is different from the other states.)\n\n```mermaid-example\nstateDiagram\n    classDef yourState font-style:italic,font-weight:bold,fill:white\n\n    yswsii: Your state with spaces in it\n    [*] --> yswsii:::yourState\n    [*] --> SomeOtherState\n    SomeOtherState --> YetAnotherState\n    yswsii --> YetAnotherState\n    YetAnotherState --> [*]\n```\n\n```mermaid\nstateDiagram\n    classDef yourState font-style:italic,font-weight:bold,fill:white\n\n    yswsii: Your state with spaces in it\n    [*] --> yswsii:::yourState\n    [*] --> SomeOtherState\n    SomeOtherState --> YetAnotherState\n    yswsii --> YetAnotherState\n    YetAnotherState --> [*]\n```\n\n<!--- cspell:ignore yswsii --->\n';
-const __vite_glob_0_36 = '> **Warning**\n>\n> ## THIS IS AN AUTOGENERATED FILE. DO NOT EDIT.\n>\n> ## Please edit the corresponding file in [/packages/mermaid/src/docs/syntax/swimlanes.md](../../packages/mermaid/src/docs/syntax/swimlanes.md).\n\n# Swimlanes Diagram\n\n> Available since MERMAID_RELEASE_VERSION.\n\n> **Warning**\n> This is a new diagram type in Mermaid. Its syntax may evolve in future versions.\n\nA swimlane diagram shows a process divided by responsibility. Each lane represents an actor, team, system, or phase, and the nodes inside the lane show the work that happens there. Arrows show the order of work and the handoffs between lanes.\n\nUse swimlane diagrams when the most important question is not only "what happens next?" but also "who owns this step?" They are useful for approval flows, support processes, delivery workflows, and any process where work crosses teams or systems.\n\n## Basic Example\n\n> The rendered examples on this page use the **Neo** look and the **Redux** theme. Out of the box, swimlanes use your configured default look and theme.\n\n```mermaid-example\nswimlane LR\n  subgraph Customer\n    request[Request service]\n    receive[Receive update]\n  end\n\n  subgraph Support\n    triage[Triage request]\n    answer[Send answer]\n  end\n\n  subgraph Engineering\n    investigate[Investigate issue]\n    fix[Prepare fix]\n  end\n\n  request --> triage\n  triage -->|Known issue| answer\n  triage -->|Needs code change| investigate\n  investigate --> fix --> answer\n  answer --> receive\n```\n\n```mermaid\nswimlane LR\n  subgraph Customer\n    request[Request service]\n    receive[Receive update]\n  end\n\n  subgraph Support\n    triage[Triage request]\n    answer[Send answer]\n  end\n\n  subgraph Engineering\n    investigate[Investigate issue]\n    fix[Prepare fix]\n  end\n\n  request --> triage\n  triage -->|Known issue| answer\n  triage -->|Needs code change| investigate\n  investigate --> fix --> answer\n  answer --> receive\n```\n\n## Syntax\n\nA swimlane diagram starts with the `swimlane` keyword. You can optionally add a direction after the keyword.\n\n```\nswimlane\n```\n\n```\nswimlane LR\n```\n\nThe supported directions are:\n\n| Direction | Meaning                |\n| --------- | ---------------------- |\n| `TB`      | Top to bottom          |\n| `TD`      | Top down, same as `TB` |\n| `BT`      | Bottom to top          |\n| `LR`      | Left to right          |\n| `RL`      | Right to left          |\n\nIf no direction is set, the diagram uses `TB`.\n\n### Lanes\n\nUse `subgraph` to create a lane. In a swimlane diagram, top-level subgraphs are rendered as swimlanes. A lane ends with `end`.\n\n```mermaid-example\nswimlane\n  subgraph Sales\n    lead[Qualify lead]\n    quote[Prepare quote]\n  end\n```\n\n```mermaid\nswimlane\n  subgraph Sales\n    lead[Qualify lead]\n    quote[Prepare quote]\n  end\n```\n\nYou can give a lane an internal id and a display label. This is useful when the label contains spaces or when you want a stable id for styling.\n\n```mermaid-example\nswimlane LR\n  subgraph sales [Sales team]\n    lead[Qualify lead]\n    quote[Prepare quote]\n  end\n\n  subgraph finance [Finance team]\n    review[Review terms]\n    approve[Approve quote]\n  end\n\n  lead --> quote --> review --> approve\n```\n\n```mermaid\nswimlane LR\n  subgraph sales [Sales team]\n    lead[Qualify lead]\n    quote[Prepare quote]\n  end\n\n  subgraph finance [Finance team]\n    review[Review terms]\n    approve[Approve quote]\n  end\n\n  lead --> quote --> review --> approve\n```\n\n### Nodes\n\nNodes use flowchart-style shape syntax. The id is written first, and the label is written inside the shape.\n\n```mermaid-example\nswimlane LR\n  subgraph Intake\n    start([Start])\n    task[Do work]\n    fix[Fix issues]\n  end\n\n  subgraph Review\n    decision{Ready?}\n  end\n\n  subgraph Complete\n    done((Done))\n  end\n\n  start --> task --> decision\n  decision -->|Yes| done\n  decision -->|No| fix\n  fix --> task\n```\n\n```mermaid\nswimlane LR\n  subgraph Intake\n    start([Start])\n    task[Do work]\n    fix[Fix issues]\n  end\n\n  subgraph Review\n    decision{Ready?}\n  end\n\n  subgraph Complete\n    done((Done))\n  end\n\n  start --> task --> decision\n  decision -->|Yes| done\n  decision -->|No| fix\n  fix --> task\n```\n\nThe most common node forms are:\n\n| Syntax       | Shape             | Common use          |\n| ------------ | ----------------- | ------------------- |\n| `id[Text]`   | Rectangle         | Task or activity    |\n| `id(Text)`   | Rounded rectangle | Step or event       |\n| `id([Text])` | Stadium           | Start or end        |\n| `id{Text}`   | Decision          | Branching question  |\n| `id((Text))` | Circle            | Connector or marker |\n\nFor the complete shape catalog, icons, images, markdown strings, classes, and styling options, see [Flowchart syntax](./flowchart.md).\n\n### Edges\n\nEdges also use flowchart-style syntax. They can connect nodes in the same lane or across lanes.\n\n```mermaid-example\nswimlane LR\n  subgraph Buyer\n    choose[Choose product]\n    pay[Pay invoice]\n  end\n\n  subgraph Store\n    reserve[Reserve stock]\n    ship[Ship product]\n  end\n\n  choose --> reserve\n  reserve -->|Invoice ready| pay\n  pay --> ship\n```\n\n```mermaid\nswimlane LR\n  subgraph Buyer\n    choose[Choose product]\n    pay[Pay invoice]\n  end\n\n  subgraph Store\n    reserve[Reserve stock]\n    ship[Ship product]\n  end\n\n  choose --> reserve\n  reserve -->|Invoice ready| pay\n  pay --> ship\n```\n\nCommon edge forms:\n\n| Syntax             | Meaning                |\n| ------------------ | ---------------------- |\n| `A --> B`          | Arrow                  |\n| `A --- B`          | Line without arrowhead |\n| `A -->\\|Label\\| B` | Arrow with label       |\n| `A -.-> B`         | Dotted arrow           |\n| `A ==> B`          | Thick arrow            |\n\nFor the full edge syntax, including multi-directional arrows and minimum link length, see [Flowchart syntax](./flowchart.md#links-between-nodes).\n\n### Accessibility\n\nUse `accTitle` and `accDescr` to provide an accessible title and description.\n\n```mermaid-example\nswimlane LR\n  accTitle: Support escalation\n  accDescr: A request starts with the customer, is triaged by support, and may be escalated to engineering.\n\n  subgraph Customer\n    request[Open request]\n  end\n\n  subgraph Support\n    triage[Triage]\n  end\n\n  subgraph Engineering\n    resolve[Resolve]\n  end\n\n  request --> triage --> resolve\n```\n\n```mermaid\nswimlane LR\n  accTitle: Support escalation\n  accDescr: A request starts with the customer, is triaged by support, and may be escalated to engineering.\n\n  subgraph Customer\n    request[Open request]\n  end\n\n  subgraph Support\n    triage[Triage]\n  end\n\n  subgraph Engineering\n    resolve[Resolve]\n  end\n\n  request --> triage --> resolve\n```\n\n## Good Practices\n\n### Make Each Lane Mean One Kind of Ownership\n\nChoose lanes that answer "who owns this step?" Avoid mixing teams, phases, and statuses in the same diagram unless that distinction is the point of the diagram.\n\n```mermaid-example\nswimlane LR\n  subgraph Customer\n    submit[Submit order]\n    confirm[Confirm delivery]\n  end\n\n  subgraph Store\n    check[Check order]\n    pack[Pack items]\n  end\n\n  subgraph Carrier\n    collect[Collect package]\n    deliver[Deliver package]\n  end\n\n  submit --> check --> pack --> collect --> deliver --> confirm\n```\n\n```mermaid\nswimlane LR\n  subgraph Customer\n    submit[Submit order]\n    confirm[Confirm delivery]\n  end\n\n  subgraph Store\n    check[Check order]\n    pack[Pack items]\n  end\n\n  subgraph Carrier\n    collect[Collect package]\n    deliver[Deliver package]\n  end\n\n  submit --> check --> pack --> collect --> deliver --> confirm\n```\n\n### Label Cross-Lane Handoffs\n\nA cross-lane arrow is where responsibility changes. Label the arrow when the handoff depends on a document, decision, message, or condition.\n\n```mermaid-example\nswimlane LR\n  subgraph Applicant\n    apply[Submit application]\n    sign[Sign agreement]\n  end\n\n  subgraph Reviewer\n    screen[Screen application]\n    decide{Approved?}\n  end\n\n  subgraph System\n    create[Create account]\n    notify[Send welcome email]\n  end\n\n  apply -->|Application received| screen\n  screen --> decide\n  decide -->|Approved| create --> notify --> sign\n  decide -->|Needs changes| apply\n```\n\n```mermaid\nswimlane LR\n  subgraph Applicant\n    apply[Submit application]\n    sign[Sign agreement]\n  end\n\n  subgraph Reviewer\n    screen[Screen application]\n    decide{Approved?}\n  end\n\n  subgraph System\n    create[Create account]\n    notify[Send welcome email]\n  end\n\n  apply -->|Application received| screen\n  screen --> decide\n  decide -->|Approved| create --> notify --> sign\n  decide -->|Needs changes| apply\n```\n\n### Keep Long Processes Readable\n\nSplit a large process into several diagrams when the lanes or handoffs stop fitting in one view. A useful swimlane diagram is usually readable without tracing every arrow twice.\n\n```mermaid-example\nswimlane TB\n  subgraph Intake\n    collect[Collect request]\n    validate[Validate details]\n  end\n\n  subgraph Review\n    review[Review request]\n    decide{Ready?}\n  end\n\n  subgraph Delivery\n    schedule[Schedule work]\n    complete[Complete work]\n  end\n\n  collect --> validate --> review --> decide\n  decide -->|Yes| schedule --> complete\n  decide -->|No| collect\n```\n\n```mermaid\nswimlane TB\n  subgraph Intake\n    collect[Collect request]\n    validate[Validate details]\n  end\n\n  subgraph Review\n    review[Review request]\n    decide{Ready?}\n  end\n\n  subgraph Delivery\n    schedule[Schedule work]\n    complete[Complete work]\n  end\n\n  collect --> validate --> review --> decide\n  decide -->|Yes| schedule --> complete\n  decide -->|No| collect\n```\n\n### Use Stable Ids\n\nUse short, meaningful ids for nodes and lanes. The label can change without breaking links, styles, or later references.\n\n```mermaid-example\nswimlane LR\n  subgraph ops [Operations]\n    intake[Receive request]\n    plan[Plan work]\n  end\n\n  subgraph legal [Legal]\n    review[Review contract]\n  end\n\n  intake --> plan --> review\n\n  classDef attention fill:#fff2cc,stroke:#d6a500,color:#111;\n  class review attention;\n```\n\n```mermaid\nswimlane LR\n  subgraph ops [Operations]\n    intake[Receive request]\n    plan[Plan work]\n  end\n\n  subgraph legal [Legal]\n    review[Review contract]\n  end\n\n  intake --> plan --> review\n\n  classDef attention fill:#fff2cc,stroke:#d6a500,color:#111;\n  class review attention;\n```\n\n### Put Decisions Where They Are Made\n\nPlace a decision node in the lane that owns the decision. Then route the outcomes to the lanes that act on the result.\n\n```mermaid-example\nswimlane LR\n  subgraph Support\n    classify{Can support solve it?}\n    respond[Respond to customer]\n  end\n\n  subgraph Product\n    prioritize[Prioritize fix]\n  end\n\n  subgraph Engineering\n    implement[Implement fix]\n  end\n\n  classify -->|Yes| respond\n  classify -->|No| prioritize --> implement --> respond\n```\n\n```mermaid\nswimlane LR\n  subgraph Support\n    classify{Can support solve it?}\n    respond[Respond to customer]\n  end\n\n  subgraph Product\n    prioritize[Prioritize fix]\n  end\n\n  subgraph Engineering\n    implement[Implement fix]\n  end\n\n  classify -->|Yes| respond\n  classify -->|No| prioritize --> implement --> respond\n```\n\n## When to Use Another Diagram\n\nUse a regular [flowchart](./flowchart.md) when ownership is not important and you only need to show sequence or branching. Use a [sequence diagram](./sequenceDiagram.md) when the focus is messages over time between participants. Use a [state diagram](./stateDiagram.md) when the focus is how one thing changes state.\n';
-const __vite_glob_0_37 = "> **Warning**\n>\n> ## THIS IS AN AUTOGENERATED FILE. DO NOT EDIT.\n>\n> ## Please edit the corresponding file in [/packages/mermaid/src/docs/syntax/timeline.md](../../packages/mermaid/src/docs/syntax/timeline.md).\n\n# Timeline Diagram\n\n> Timeline: This is an experimental diagram for now. The syntax and properties can change in future releases. The syntax is stable except for the icon integration which is the experimental part.\n\n\"A timeline is a type of diagram used to illustrate a chronology of events, dates, or periods of time. It is usually presented graphically to indicate the passing of time, and it is usually organized chronologically. A basic timeline presents a list of events in chronological order, usually using dates as markers. A timeline can also be used to show the relationship between events, such as the relationship between the events of a person's life\" [(Wikipedia)](https://en.wikipedia.org/wiki/Timeline).\n\n### An example of a timeline\n\n```mermaid-example\ntimeline\n    title History of Social Media Platform\n    2002 : LinkedIn\n    2004 : Facebook\n         : Google\n    2005 : YouTube\n    2006 : Twitter\n```\n\n```mermaid\ntimeline\n    title History of Social Media Platform\n    2002 : LinkedIn\n    2004 : Facebook\n         : Google\n    2005 : YouTube\n    2006 : Twitter\n```\n\n## Syntax\n\nThe syntax for creating Timeline diagram is simple. You always start with the `timeline` keyword to let mermaid know that you want to create a timeline diagram.\n\nAfter that there is a possibility to add a title to the timeline. This is done by adding a line with the keyword `title` followed by the title text.\n\nThen you add the timeline data, where you always start with a time period, followed by a colon and then the text for the event. Optionally you can add a second colon and then the text for the event. So, you can have one or more events per time period.\n\n```json\n{time period} : {event}\n```\n\nor\n\n```json\n{time period} : {event} : {event}\n```\n\nor\n\n```json\n{time period} : {event}\n              : {event}\n              : {event}\n```\n\n**NOTE**: Both time period and event are simple text, and not limited to numbers.\n\nLet us look at the syntax for the example above.\n\n```mermaid-example\ntimeline\n    title History of Social Media Platform\n    2002 : LinkedIn\n    2004 : Facebook : Google\n    2005 : YouTube\n    2006 : Twitter\n```\n\n```mermaid\ntimeline\n    title History of Social Media Platform\n    2002 : LinkedIn\n    2004 : Facebook : Google\n    2005 : YouTube\n    2006 : Twitter\n```\n\nIn this way we can use a text outline to generate a timeline diagram.\nThe sequence of time period and events is important, as it will be used to draw the timeline. The first time period will be placed at the left side of the timeline, and the last time period will be placed at the right side of the timeline.\n\nSimilarly, the first event will be placed at the top for that specific time period, and the last event will be placed at the bottom.\n\n## Grouping of time periods in sections/ages\n\nYou can group time periods in sections/ages. This is done by adding a line with the keyword `section` followed by the section name.\n\nAll subsequent time periods will be placed in this section until a new section is defined.\n\nIf no section is defined, all time periods will be placed in the default section.\n\nLet us look at an example, where we have grouped the time periods in sections.\n\n```mermaid-example\ntimeline\n    title Timeline of Industrial Revolution\n    section 17th-20th century\n        Industry 1.0 : Machinery, Water power, Steam <br>power\n        Industry 2.0 : Electricity, Internal combustion engine, Mass production\n        Industry 3.0 : Electronics, Computers, Automation\n    section 21st century\n        Industry 4.0 : Internet, Robotics, Internet of Things\n        Industry 5.0 : Artificial intelligence, Big data, 3D printing\n```\n\n```mermaid\ntimeline\n    title Timeline of Industrial Revolution\n    section 17th-20th century\n        Industry 1.0 : Machinery, Water power, Steam <br>power\n        Industry 2.0 : Electricity, Internal combustion engine, Mass production\n        Industry 3.0 : Electronics, Computers, Automation\n    section 21st century\n        Industry 4.0 : Internet, Robotics, Internet of Things\n        Industry 5.0 : Artificial intelligence, Big data, 3D printing\n```\n\nAs you can see, the time periods are placed in the sections, and the sections are placed in the order they are defined.\n\nAll time periods and events under a given section follow a similar color scheme. This is done to make it easier to see the relationship between time periods and events.\n\n## Wrapping of text for long time-periods or events\n\nBy default, the text for time-periods and events will be wrapped if it is too long. This is done to avoid that the text is drawn outside the diagram.\n\nYou can also use `<br>` to force a line break.\n\nLet us look at another example, where we have a long time period, and a long event.\n\n```mermaid-example\ntimeline\n        title England's History Timeline\n        section Stone Age\n          7600 BC : Britain's oldest known house was built in Orkney, Scotland\n          6000 BC : Sea levels rise and Britain becomes an island.<br> The people who live here are hunter-gatherers.\n        section Bronze Age\n          2300 BC : People arrive from Europe and settle in Britain. <br>They bring farming and metalworking.\n                  : New styles of pottery and ways of burying the dead appear.\n          2200 BC : The last major building works are completed at Stonehenge.<br> People now bury their dead in stone circles.\n                  : The first metal objects are made in Britain.Some other nice things happen. it is a good time to be alive.\n\n```\n\n```mermaid\ntimeline\n        title England's History Timeline\n        section Stone Age\n          7600 BC : Britain's oldest known house was built in Orkney, Scotland\n          6000 BC : Sea levels rise and Britain becomes an island.<br> The people who live here are hunter-gatherers.\n        section Bronze Age\n          2300 BC : People arrive from Europe and settle in Britain. <br>They bring farming and metalworking.\n                  : New styles of pottery and ways of burying the dead appear.\n          2200 BC : The last major building works are completed at Stonehenge.<br> People now bury their dead in stone circles.\n                  : The first metal objects are made in Britain.Some other nice things happen. it is a good time to be alive.\n\n```\n\n```mermaid-example\ntimeline\n        title MermaidChart 2023 Timeline\n        section 2023 Q1 <br> Release Personal Tier\n          Bullet 1 : sub-point 1a : sub-point 1b\n               : sub-point 1c\n          Bullet 2 : sub-point 2a : sub-point 2b\n        section 2023 Q2 <br> Release XYZ Tier\n          Bullet 3 : sub-point <br> 3a : sub-point 3b\n               : sub-point 3c\n          Bullet 4 : sub-point 4a : sub-point 4b\n```\n\n```mermaid\ntimeline\n        title MermaidChart 2023 Timeline\n        section 2023 Q1 <br> Release Personal Tier\n          Bullet 1 : sub-point 1a : sub-point 1b\n               : sub-point 1c\n          Bullet 2 : sub-point 2a : sub-point 2b\n        section 2023 Q2 <br> Release XYZ Tier\n          Bullet 3 : sub-point <br> 3a : sub-point 3b\n               : sub-point 3c\n          Bullet 4 : sub-point 4a : sub-point 4b\n```\n\n### Direction (v11.14.0+)\n\nTimeline can change its direction by the keyword after `timeline`.\n\n```mermaid-example\ntimeline TD\n  title MermaidChart 2023 Timeline\n    section 2023 Q1 <br> Release Personal Tier\n      Bullet 1 : sub-point 1a : sub-point 1b\n      Bullet 2 : sub-point 2a : sub-point 2b\n    section 2023 Q2 <br> Release XYZ Tier\n      Bullet 3 : sub-point <br> 3a : sub-point 3b\n      Bullet 4 : sub-point 4a : sub-point 4b\n```\n\n```mermaid\ntimeline TD\n  title MermaidChart 2023 Timeline\n    section 2023 Q1 <br> Release Personal Tier\n      Bullet 1 : sub-point 1a : sub-point 1b\n      Bullet 2 : sub-point 2a : sub-point 2b\n    section 2023 Q2 <br> Release XYZ Tier\n      Bullet 3 : sub-point <br> 3a : sub-point 3b\n      Bullet 4 : sub-point 4a : sub-point 4b\n```\n\nPossible directions are:\n\n- `LR`: Left to right (default)\n- `TD`: Top top down.\n\n## Styling of time periods and events\n\nAs explained earlier, each section has a color scheme, and each time period and event under a section follow the similar color scheme.\n\nHowever, if there is no section defined, then we have two possibilities:\n\n1. Style time periods individually, i.e. each time period(and its corresponding events) will have its own color scheme. This is the DEFAULT behavior.\n\n```mermaid-example\n    timeline\n        title History of Social Media Platform\n          2002 : LinkedIn\n          2004 : Facebook : Google\n          2005 : YouTube\n          2006 : Twitter\n\n```\n\n```mermaid\n    timeline\n        title History of Social Media Platform\n          2002 : LinkedIn\n          2004 : Facebook : Google\n          2005 : YouTube\n          2006 : Twitter\n\n```\n\n**NOTE**: that there are no sections defined, and each time period and its corresponding events will have its own color scheme.\n\n2. Disable the multiColor option using the `disableMultiColor` option. This will make all time periods and events follow the same color scheme.\n\nYou will need to add this option either via mermaid.initialize function or directives.\n\n```javascript\nmermaid.initialize({\n        theme: 'base',\n        startOnLoad: true,\n        logLevel: 0,\n        timeline: {\n          disableMulticolor: false,\n        },\n        ...\n        ...\n```\n\nlet us look at same example, where we have disabled the multiColor option.\n\n```mermaid-example\n---\nconfig:\n  logLevel: 'debug'\n  theme: 'base'\n  timeline:\n    disableMulticolor: true\n---\n    timeline\n        title History of Social Media Platform\n          2002 : LinkedIn\n          2004 : Facebook : Google\n          2005 : YouTube\n          2006 : Twitter\n\n```\n\n```mermaid\n---\nconfig:\n  logLevel: 'debug'\n  theme: 'base'\n  timeline:\n    disableMulticolor: true\n---\n    timeline\n        title History of Social Media Platform\n          2002 : LinkedIn\n          2004 : Facebook : Google\n          2005 : YouTube\n          2006 : Twitter\n\n```\n\n### Customizing Color scheme\n\nYou can customize the color scheme using the `cScale0` to `cScale11` theme variables, which will change the background colors. Mermaid allows you to set unique colors for up-to 12 sections, where `cScale0` variable will drive the value of the first section or time-period, `cScale1` will drive the value of the second section and so on.\nIn case you have more than 12 sections, the color scheme will start to repeat.\n\nIf you also want to change the foreground color of a section, you can do so use theme variables corresponding `cScaleLabel0` to `cScaleLabel11` variables.\n\n**NOTE**: Default values for these theme variables are picked from the selected theme. If you want to override the default values, you can use the `initialize` call to add your custom theme variable values.\n\nExample:\n\nNow let's override the default values for the `cScale0` to `cScale2` variables:\n\n```mermaid-example\n---\nconfig:\n  logLevel: 'debug'\n  theme: 'default'\n  themeVariables:\n    cScale0: '#ff0000'\n    cScaleLabel0: '#ffffff'\n    cScale1: '#00ff00'\n    cScale2: '#0000ff'\n    cScaleLabel2: '#ffffff'\n---\n       timeline\n        title History of Social Media Platform\n          2002 : LinkedIn\n          2004 : Facebook : Google\n          2005 : YouTube\n          2006 : Twitter\n          2007 : Tumblr\n          2008 : Instagram\n          2010 : Pinterest\n\n```\n\n```mermaid\n---\nconfig:\n  logLevel: 'debug'\n  theme: 'default'\n  themeVariables:\n    cScale0: '#ff0000'\n    cScaleLabel0: '#ffffff'\n    cScale1: '#00ff00'\n    cScale2: '#0000ff'\n    cScaleLabel2: '#ffffff'\n---\n       timeline\n        title History of Social Media Platform\n          2002 : LinkedIn\n          2004 : Facebook : Google\n          2005 : YouTube\n          2006 : Twitter\n          2007 : Tumblr\n          2008 : Instagram\n          2010 : Pinterest\n\n```\n\nSee how the colors are changed to the values specified in the theme variables.\n\n## Themes\n\nMermaid supports a bunch of pre-defined themes which you can use to find the right one for you. PS: you can actually override an existing theme's variable to get your own custom theme going. Learn more about [theming your diagram](../config/theming.md).\n\nThe following are the different pre-defined theme options:\n\n- `base`\n- `forest`\n- `dark`\n- `default`\n- `neutral`\n\n**NOTE**: To change theme you can either use the `initialize` call or _directives_. Learn more about [directives](../config/directives.md)\nLet's put them to use, and see how our sample diagram looks in different themes:\n\n### Base Theme\n\n```mermaid-example\n---\nconfig:\n  logLevel: 'debug'\n  theme: 'base'\n---\n    timeline\n        title History of Social Media Platform\n          2002 : LinkedIn\n          2004 : Facebook : Google\n          2005 : YouTube\n          2006 : Twitter\n          2007 : Tumblr\n          2008 : Instagram\n          2010 : Pinterest\n```\n\n```mermaid\n---\nconfig:\n  logLevel: 'debug'\n  theme: 'base'\n---\n    timeline\n        title History of Social Media Platform\n          2002 : LinkedIn\n          2004 : Facebook : Google\n          2005 : YouTube\n          2006 : Twitter\n          2007 : Tumblr\n          2008 : Instagram\n          2010 : Pinterest\n```\n\n### Forest Theme\n\n```mermaid-example\n---\nconfig:\n  logLevel: 'debug'\n  theme: 'forest'\n---\n    timeline\n        title History of Social Media Platform\n          2002 : LinkedIn\n          2004 : Facebook : Google\n          2005 : YouTube\n          2006 : Twitter\n          2007 : Tumblr\n          2008 : Instagram\n          2010 : Pinterest\n```\n\n```mermaid\n---\nconfig:\n  logLevel: 'debug'\n  theme: 'forest'\n---\n    timeline\n        title History of Social Media Platform\n          2002 : LinkedIn\n          2004 : Facebook : Google\n          2005 : YouTube\n          2006 : Twitter\n          2007 : Tumblr\n          2008 : Instagram\n          2010 : Pinterest\n```\n\n### Dark Theme\n\n```mermaid-example\n---\nconfig:\n  logLevel: 'debug'\n  theme: 'dark'\n---\n    timeline\n        title History of Social Media Platform\n          2002 : LinkedIn\n          2004 : Facebook : Google\n          2005 : YouTube\n          2006 : Twitter\n          2007 : Tumblr\n          2008 : Instagram\n          2010 : Pinterest\n```\n\n```mermaid\n---\nconfig:\n  logLevel: 'debug'\n  theme: 'dark'\n---\n    timeline\n        title History of Social Media Platform\n          2002 : LinkedIn\n          2004 : Facebook : Google\n          2005 : YouTube\n          2006 : Twitter\n          2007 : Tumblr\n          2008 : Instagram\n          2010 : Pinterest\n```\n\n### Default Theme\n\n```mermaid-example\n---\nconfig:\n  logLevel: 'debug'\n  theme: 'default'\n---\n    timeline\n        title History of Social Media Platform\n          2002 : LinkedIn\n          2004 : Facebook : Google\n          2005 : YouTube\n          2006 : Twitter\n          2007 : Tumblr\n          2008 : Instagram\n          2010 : Pinterest\n```\n\n```mermaid\n---\nconfig:\n  logLevel: 'debug'\n  theme: 'default'\n---\n    timeline\n        title History of Social Media Platform\n          2002 : LinkedIn\n          2004 : Facebook : Google\n          2005 : YouTube\n          2006 : Twitter\n          2007 : Tumblr\n          2008 : Instagram\n          2010 : Pinterest\n```\n\n### Neutral Theme\n\n```mermaid-example\n---\nconfig:\n  logLevel: 'debug'\n  theme: 'neutral'\n---\n    timeline\n        title History of Social Media Platform\n          2002 : LinkedIn\n          2004 : Facebook : Google\n          2005 : YouTube\n          2006 : Twitter\n          2007 : Tumblr\n          2008 : Instagram\n          2010 : Pinterest\n```\n\n```mermaid\n---\nconfig:\n  logLevel: 'debug'\n  theme: 'neutral'\n---\n    timeline\n        title History of Social Media Platform\n          2002 : LinkedIn\n          2004 : Facebook : Google\n          2005 : YouTube\n          2006 : Twitter\n          2007 : Tumblr\n          2008 : Instagram\n          2010 : Pinterest\n```\n\n## Integrating with your library/website\n\nTimeline uses experimental lazy loading & async rendering features which could change in the future.The lazy loading is important in order to be able to add additional diagrams going forward.\n\nYou can use this method to add mermaid including the timeline diagram to a web page:\n\n```html\n<script type=\"module\">\n  import mermaid from 'https://cdn.jsdelivr.net/npm/mermaid@11/dist/mermaid.esm.min.mjs';\n<\/script>\n```\n\nYou can also refer the [implementation in the live editor](https://github.com/mermaid-js/mermaid-live-editor/blob/develop/src/lib/util/mermaid.ts) to see how the async loading is done.\n";
-const __vite_glob_0_38 = '> **Warning**\n>\n> ## THIS IS AN AUTOGENERATED FILE. DO NOT EDIT.\n>\n> ## Please edit the corresponding file in [/packages/mermaid/src/docs/syntax/treeView.md](../../packages/mermaid/src/docs/syntax/treeView.md).\n\n# TreeView Diagram (v11.14.0+)\n\n## Introduction\n\nA TreeView diagram is used to represent hierarchical data in the form of a directory-like structure, with file-type icons, connector lines, and optional annotations.\n\n## Syntax\n\nThe structure of the tree depends only on indentation. Labels can be **bare** (unquoted) or **quoted** (for names containing spaces).\n\n- Directories are indicated by a trailing `/` on the label — they get a folder icon and bold text.\n- Files are auto-detected by extension and assigned a matching icon.\n- Quoted labels (`"my file"`) support spaces in names.\n\n```\ntreeView-beta\n    my-project/\n        src/\n            index.js\n        package.json\n        README.md\n```\n\nQuoted labels (backward compatible):\n\n```\ntreeView-beta\n    "my project"\n        "folder with spaces"\n            "file.js"\n```\n\n## Box-Drawing Input\n\nAs an alternative to indentation, you can use box-drawing characters to define the tree structure. The parser auto-detects the format — no extra keyword or config is needed. This is how most file tree diagrams are drawn already, so you can turn those into Mermaid diagrams with very little effort.\n\nBoth standard (`├──`, `└──`, `│`) and heavy (`┣━━`, `┗━━`, `┃`) Unicode variants are supported.\n\n```mermaid-example\ntreeView-beta\n├── src/\n│   ├── index.ts\n│   └── utils.ts\n├── package.json\n└── README.md\n```\n\n```mermaid\ntreeView-beta\n├── src/\n│   ├── index.ts\n│   └── utils.ts\n├── package.json\n└── README.md\n```\n\nAll annotations work the same way — just append them after the label:\n\n```mermaid-example\ntreeView-beta\n├── src/\n│   ├── App.tsx :::highlight icon(react) ## main component\n│   └── index.ts ## entry point\n├── .env ## environment variables\n├── Dockerfile\n└── package.json\n```\n\n```mermaid\ntreeView-beta\n├── src/\n│   ├── App.tsx :::highlight icon(react) ## main component\n│   └── index.ts ## entry point\n├── .env ## environment variables\n├── Dockerfile\n└── package.json\n```\n\nDepth is inferred from the column position of the branch character, so deeper nesting works naturally:\n\n```mermaid-example\ntreeView-beta\n├── packages/\n│   ├── mermaid/\n│   │   ├── src/\n│   │   │   ├── parser.ts\n│   │   │   └── renderer.ts\n│   │   └── package.json\n│   └── parser/\n│       └── src/\n└── README.md\n```\n\n```mermaid\ntreeView-beta\n├── packages/\n│   ├── mermaid/\n│   │   ├── src/\n│   │   │   ├── parser.ts\n│   │   │   └── renderer.ts\n│   │   └── package.json\n│   └── parser/\n│       └── src/\n└── README.md\n```\n\n> **Note:** If a parse error occurs, line numbers in the error message refer to your original input. Tab characters are automatically expanded to spaces.\n\n## Annotations\n\n### Highlighting with :::class\n\nAnnotate a node with `:::className` to apply a CSS class. A built-in `highlight` class is provided:\n\n```mermaid-example\ntreeView-beta\n    src/\n        App.tsx :::highlight\n        index.js\n    package.json\n```\n\n```mermaid\ntreeView-beta\n    src/\n        App.tsx :::highlight\n        index.js\n    package.json\n```\n\n### Inline descriptions with `##`\n\nAdd a visible description after `##` — rendered next to the label in italic:\n\n```mermaid-example\ntreeView-beta\n    src/\n        index.js ## app entry point\n        config.ts ## runtime configuration\n    package.json ## project manifest\n```\n\n```mermaid\ntreeView-beta\n    src/\n        index.js ## app entry point\n        config.ts ## runtime configuration\n    package.json ## project manifest\n```\n\n### Icon overrides with icon()\n\nOverride the auto-detected icon with `icon(name)`:\n\n```mermaid-example\ntreeView-beta\n    data/\n        model.bin icon(database)\n        weights.h5 icon(database)\n    src/\n        index.js\n```\n\n```mermaid\ntreeView-beta\n    data/\n        model.bin icon(database)\n        weights.h5 icon(database)\n    src/\n        index.js\n```\n\n### Combined annotations\n\nAnnotations can be combined in any order:\n\n```mermaid-example\ntreeView-beta\n    my-project/\n        src/\n            App.tsx :::highlight icon(react) ## main component\n            index.js ## entry point\n        .env ## environment variables\n        Dockerfile\n        package.json\n```\n\n```mermaid\ntreeView-beta\n    my-project/\n        src/\n            App.tsx :::highlight icon(react) ## main component\n            index.js ## entry point\n        .env ## environment variables\n        Dockerfile\n        package.json\n```\n\n## Comments\n\nUse `%%` for invisible comments (standard Mermaid convention):\n\n```\ntreeView-beta\n    %% Generated files — do not edit\n    src/\n        generated/\n        index.js\n```\n\n## Examples\n\nBasic with quoted labels:\n\n```mermaid-example\ntreeView-beta\n    "packages"\n        "mermaid"\n            "src"\n        "parser"\n```\n\n```mermaid\ntreeView-beta\n    "packages"\n        "mermaid"\n            "src"\n        "parser"\n```\n\nWith custom config:\n\n```mermaid-example\n---\nconfig:\n    treeView:\n        rowIndent: 80\n        lineThickness: 3\n    themeVariables:\n        treeView:\n            labelFontSize: \'20px\'\n            labelColor: \'#FF0000\'\n            lineColor: \'#00FF00\'\n---\ntreeView-beta\n    "packages"\n        "mermaid"\n            "src"\n        "parser"\n```\n\n```mermaid\n---\nconfig:\n    treeView:\n        rowIndent: 80\n        lineThickness: 3\n    themeVariables:\n        treeView:\n            labelFontSize: \'20px\'\n            labelColor: \'#FF0000\'\n            lineColor: \'#00FF00\'\n---\ntreeView-beta\n    "packages"\n        "mermaid"\n            "src"\n        "parser"\n```\n\n## Config Variables\n\n| Property      | Description                       | Default Value |\n| ------------- | --------------------------------- | ------------- |\n| rowIndent     | Indentation for each row          | 10            |\n| paddingX      | Horizontal padding of row         | 5             |\n| paddingY      | Vertical padding of row           | 5             |\n| lineThickness | Thickness of the line             | 1             |\n| showIcons     | Whether to show file/folder icons | true          |\n\n### Theme Variables\n\n| Property         | Description                    | Default Value        |\n| ---------------- | ------------------------------ | -------------------- |\n| labelFontSize    | Font size of the label         | \'16px\'               |\n| labelColor       | Color of the label             | \'black\'              |\n| lineColor        | Color of the line              | \'black\'              |\n| iconColor        | Color of file-type icons       | \'#546e7a\'            |\n| descriptionColor | Color of `##` description text | \'#6a9955\'            |\n| highlightBg      | Highlight background fill      | rgba(255,193,7,0.15) |\n| highlightStroke  | Highlight border stroke        | #ffc107              |\n\n## Supported Icons\n\nIcons are auto-detected from file extensions and known filenames:\n\n| Extension / Filename  | Icon       |\n| --------------------- | ---------- |\n| `.js`, `.mjs`, `.cjs` | javascript |\n| `.ts`                 | typescript |\n| `.jsx`, `.tsx`        | react      |\n| `.py`                 | python     |\n| `.json`               | json       |\n| `.md`, `.mdx`         | markdown   |\n| `.html`, `.htm`       | html       |\n| `.css`, `.scss`       | css        |\n| `.yaml`, `.yml`       | yaml       |\n| `.sh`, `.bash`        | terminal   |\n| `.sql`, `.db`         | database   |\n| `.lock`               | lock       |\n| `.gitignore`          | git        |\n| `Dockerfile`          | docker     |\n| `Makefile`            | terminal   |\n| Directories (`/`)     | folder     |\n| Unknown extension     | file       |\n';
-const __vite_glob_0_39 = '> **Warning**\n>\n> ## THIS IS AN AUTOGENERATED FILE. DO NOT EDIT.\n>\n> ## Please edit the corresponding file in [/packages/mermaid/src/docs/syntax/treemap.md](../../packages/mermaid/src/docs/syntax/treemap.md).\n\n# Treemap Diagram\n\n> A treemap diagram displays hierarchical data as a set of nested rectangles. Each branch of the tree is represented by a rectangle, which is then tiled with smaller rectangles representing sub-branches.\n\n> **Warning**\n> This is a new diagram type in Mermaid. Its syntax may evolve in future versions.\n\n## Introduction\n\nTreemap diagrams are an effective way to visualize hierarchical data and show proportions between categories and subcategories. The size of each rectangle is proportional to the value it represents, making it easy to compare different parts of a hierarchy.\n\nTreemap diagrams are particularly useful for:\n\n- Visualizing hierarchical data structures\n- Comparing proportions between categories\n- Displaying large amounts of hierarchical data in a limited space\n- Identifying patterns and outliers in hierarchical data\n\n## Syntax\n\n```\ntreemap-beta\n"Section 1"\n    "Leaf 1.1": 12\n    "Section 1.2"\n      "Leaf 1.2.1": 12\n"Section 2"\n    "Leaf 2.1": 20\n    "Leaf 2.2": 25\n```\n\n### Node Definition\n\nNodes in a treemap are defined using the following syntax:\n\n- **Section/Parent nodes**: Defined with quoted text `"Section Name"`\n- **Leaf nodes with values**: Defined with quoted text followed by a colon and value `"Leaf Name": value`\n- **Hierarchy**: Created using indentation (spaces or tabs)\n- **Styling**: Nodes can be styled using the `:::class` syntax\n\n## Examples\n\n### Basic Treemap\n\n```mermaid-example\ntreemap-beta\n"Category A"\n    "Item A1": 10\n    "Item A2": 20\n"Category B"\n    "Item B1": 15\n    "Item B2": 25\n```\n\n```mermaid\ntreemap-beta\n"Category A"\n    "Item A1": 10\n    "Item A2": 20\n"Category B"\n    "Item B1": 15\n    "Item B2": 25\n```\n\n### Hierarchical Treemap\n\n```mermaid-example\ntreemap-beta\n"Products"\n    "Electronics"\n        "Phones": 50\n        "Computers": 30\n        "Accessories": 20\n    "Clothing"\n        "Men\'s": 40\n        "Women\'s": 40\n```\n\n```mermaid\ntreemap-beta\n"Products"\n    "Electronics"\n        "Phones": 50\n        "Computers": 30\n        "Accessories": 20\n    "Clothing"\n        "Men\'s": 40\n        "Women\'s": 40\n```\n\n### Treemap with Styling\n\n```mermaid-example\ntreemap-beta\n"Section 1"\n    "Leaf 1.1": 12\n    "Section 1.2":::class1\n      "Leaf 1.2.1": 12\n"Section 2"\n    "Leaf 2.1": 20:::class1\n    "Leaf 2.2": 25\n    "Leaf 2.3": 12\n\nclassDef class1 fill:red,color:blue,stroke:#FFD600;\n```\n\n```mermaid\ntreemap-beta\n"Section 1"\n    "Leaf 1.1": 12\n    "Section 1.2":::class1\n      "Leaf 1.2.1": 12\n"Section 2"\n    "Leaf 2.1": 20:::class1\n    "Leaf 2.2": 25\n    "Leaf 2.3": 12\n\nclassDef class1 fill:red,color:blue,stroke:#FFD600;\n```\n\n## Styling and Configuration\n\nTreemap diagrams can be customized using Mermaid\'s styling and configuration options.\n\n### Using classDef for Styling\n\nYou can define custom styles for nodes using the `classDef` syntax, which is a standard feature across many Mermaid diagram types:\n\n```mermaid-example\ntreemap-beta\n"Main"\n    "A": 20\n    "B":::important\n        "B1": 10\n        "B2": 15\n    "C": 5\n\nclassDef important fill:#f96,stroke:#333,stroke-width:2px;\n```\n\n```mermaid\ntreemap-beta\n"Main"\n    "A": 20\n    "B":::important\n        "B1": 10\n        "B2": 15\n    "C": 5\n\nclassDef important fill:#f96,stroke:#333,stroke-width:2px;\n```\n\n### Theme Configuration\n\nYou can customize the colors of your treemap using the theme configuration:\n\n```mermaid-example\n---\nconfig:\n    theme: \'forest\'\n---\ntreemap-beta\n"Category A"\n    "Item A1": 10\n    "Item A2": 20\n"Category B"\n    "Item B1": 15\n    "Item B2": 25\n```\n\n```mermaid\n---\nconfig:\n    theme: \'forest\'\n---\ntreemap-beta\n"Category A"\n    "Item A1": 10\n    "Item A2": 20\n"Category B"\n    "Item B1": 15\n    "Item B2": 25\n```\n\n### Diagram Padding\n\nYou can adjust the padding around the treemap diagram using the `diagramPadding` configuration option:\n\n```mermaid-example\n---\nconfig:\n  treemap:\n    diagramPadding: 200\n---\ntreemap-beta\n"Category A"\n    "Item A1": 10\n    "Item A2": 20\n"Category B"\n    "Item B1": 15\n    "Item B2": 25\n```\n\n```mermaid\n---\nconfig:\n  treemap:\n    diagramPadding: 200\n---\ntreemap-beta\n"Category A"\n    "Item A1": 10\n    "Item A2": 20\n"Category B"\n    "Item B1": 15\n    "Item B2": 25\n```\n\n## Configuration Options\n\nThe treemap diagram supports the following configuration options:\n\n| Option         | Description                                                                 | Default |\n| -------------- | --------------------------------------------------------------------------- | ------- |\n| useMaxWidth    | When true, the diagram width is set to 100% and scales with available space | true    |\n| padding        | Internal padding between nodes                                              | 10      |\n| diagramPadding | Padding around the entire diagram                                           | 8       |\n| showValues     | Whether to show values in the treemap                                       | true    |\n| nodeWidth      | Width of nodes                                                              | 100     |\n| nodeHeight     | Height of nodes                                                             | 40      |\n| borderWidth    | Width of borders                                                            | 1       |\n| valueFontSize  | Font size for values                                                        | 12      |\n| labelFontSize  | Font size for labels                                                        | 14      |\n| valueFormat    | Format for values (see Value Formatting section)                            | \',\'     |\n\n## Advanced Features\n\n### Value Formatting\n\nValues in treemap diagrams can be formatted to display in different ways using the `valueFormat` configuration option. This option primarily uses [D3\'s format specifiers](https://github.com/d3/d3-format#locale_format) to control how numbers are displayed, with some additional special cases for common formats.\n\nSome common format patterns:\n\n- `,` - Thousands separator (default)\n- `$` - Add dollar sign\n- `.1f` - Show one decimal place\n- `.1%` - Show as percentage with one decimal place\n- `$0,0` - Dollar sign with thousands separator\n- `$.2f` - Dollar sign with 2 decimal places\n- `$,.2f` - Dollar sign with thousands separator and 2 decimal places\n\nThe treemap diagram supports both standard D3 format specifiers and some common currency formats that combine the dollar sign with other formatting options.\n\nExample with currency formatting:\n\n```mermaid-example\n---\nconfig:\n  treemap:\n    valueFormat: \'$0,0\'\n---\ntreemap-beta\n"Budget"\n    "Operations"\n        "Salaries": 700000\n        "Equipment": 200000\n        "Supplies": 100000\n    "Marketing"\n        "Advertising": 400000\n        "Events": 100000\n```\n\n```mermaid\n---\nconfig:\n  treemap:\n    valueFormat: \'$0,0\'\n---\ntreemap-beta\n"Budget"\n    "Operations"\n        "Salaries": 700000\n        "Equipment": 200000\n        "Supplies": 100000\n    "Marketing"\n        "Advertising": 400000\n        "Events": 100000\n```\n\nExample with percentage formatting:\n\n```mermaid-example\n---\nconfig:\n  treemap:\n    valueFormat: \'$.1%\'\n---\ntreemap-beta\n"Market Share"\n    "Company A": 0.35\n    "Company B": 0.25\n    "Company C": 0.15\n    "Others": 0.25\n```\n\n```mermaid\n---\nconfig:\n  treemap:\n    valueFormat: \'$.1%\'\n---\ntreemap-beta\n"Market Share"\n    "Company A": 0.35\n    "Company B": 0.25\n    "Company C": 0.15\n    "Others": 0.25\n```\n\n## Common Use Cases\n\nTreemap diagrams are commonly used for:\n\n1. **Financial Data**: Visualizing budget allocations, market shares, or portfolio compositions\n2. **File System Analysis**: Showing disk space usage by folders and files\n3. **Population Demographics**: Displaying population distribution across regions and subregions\n4. **Product Hierarchies**: Visualizing product categories and their sales volumes\n5. **Organizational Structures**: Representing departments and team sizes in a company\n\n## Limitations\n\n- Treemap diagrams work best when the data has a natural hierarchy\n- Very small values may be difficult to see or label in a treemap diagram\n- Deep hierarchies (many levels) can be challenging to represent clearly\n- Treemap diagrams are not well suited for representing data with negative values\n\n## Related Diagrams\n\nIf treemap diagrams don\'t suit your needs, consider these alternatives:\n\n- [**Pie Charts**](./pie.md): For simple proportion comparisons without hierarchy\n- **Sunburst Diagrams**: For hierarchical data with a radial layout (yet to be released in Mermaid).\n- [**Sankey Diagrams**](./sankey.md): For flow-based hierarchical data\n\n## Notes\n\nThe treemap diagram implementation in Mermaid is designed to be simple to use while providing powerful visualization capabilities. As this is a newer diagram type, feedback and feature requests are welcome through the Mermaid GitHub repository.\n';
-const __vite_glob_0_40 = '> **Warning**\n>\n> ## THIS IS AN AUTOGENERATED FILE. DO NOT EDIT.\n>\n> ## Please edit the corresponding file in [/packages/mermaid/src/docs/syntax/xyChart.md](../../packages/mermaid/src/docs/syntax/xyChart.md).\n\n# XY Chart\n\n> In the context of mermaid-js, the XY chart is a comprehensive charting module that encompasses various types of charts that utilize both x-axis and y-axis for data representation. Presently, it includes two fundamental chart types: the bar chart and the line chart. These charts are designed to visually display and analyze data that involve two numerical variables.\n\n> It\'s important to note that while the current implementation of mermaid-js includes these two chart types, the framework is designed to be dynamic and adaptable. Therefore, it has the capacity for expansion and the inclusion of additional chart types in the future. This means that users can expect an evolving suite of charting options within the XY chart module, catering to various data visualization needs as new chart types are introduced over time.\n\n## Example\n\n```mermaid-example\nxychart\n    title "Sales Revenue"\n    x-axis [jan, feb, mar, apr, may, jun, jul, aug, sep, oct, nov, dec]\n    y-axis "Revenue (in $)" 4000 --> 11000\n    bar [5000, 6000, 7500, 8200, 9500, 10500, 11000, 10200, 9200, 8500, 7000, 6000]\n    line [5000, 6000, 7500, 8200, 9500, 10500, 11000, 10200, 9200, 8500, 7000, 6000]\n```\n\n```mermaid\nxychart\n    title "Sales Revenue"\n    x-axis [jan, feb, mar, apr, may, jun, jul, aug, sep, oct, nov, dec]\n    y-axis "Revenue (in $)" 4000 --> 11000\n    bar [5000, 6000, 7500, 8200, 9500, 10500, 11000, 10200, 9200, 8500, 7000, 6000]\n    line [5000, 6000, 7500, 8200, 9500, 10500, 11000, 10200, 9200, 8500, 7000, 6000]\n```\n\n## Syntax\n\n> **Note**\n> All text values that contain only one word can be written without `"`. If a text value has many words in it, specifically if it contains spaces, enclose the value in `"`\n\n### Orientations\n\nThe chart can be drawn horizontal or vertical, default value is vertical.\n\n```\nxychart horizontal\n...\n```\n\n### Title\n\nThe title is a short description of the chart and it will always render on top of the chart.\n\n#### Example\n\n```\nxychart\n    title "This is a simple example"\n    ...\n```\n\n> **Note**\n> If the title is a single word one no need to use `"`, but if it has space `"` is needed\n\n### x-axis\n\nThe x-axis primarily serves as a categorical value, although it can also function as a numeric range value when needed.\n\n#### Example\n\n1. `x-axis title min --> max` x-axis will function as numeric with the given range\n2. `x-axis "title with space" [cat1, "cat2 with space", cat3]` x-axis if categorical, categories are text type\n\n### y-axis\n\nThe y-axis is employed to represent numerical range values, it cannot have categorical values.\n\n#### Example\n\n1. `y-axis title min --> max`\n2. `y-axis title` it will only add the title, the range will be auto generated from data.\n\n> **Note**\n> Both x and y axis are optional if not provided we will try to create the range\n\n### Line chart\n\nA line chart offers the capability to graphically depict lines.\n\n#### Example\n\n1. `line [2.3, 45, .98, -3.4]` it can have all valid numeric values.\n2. `line "series name" [2.3, 45, .98, -3.4]` adds the line to the legend.\n\n### Bar chart\n\nA bar chart offers the capability to graphically depict bars.\n\n#### Example\n\n1. `bar [2.3, 45, .98, -3.4]` it can have all valid numeric values.\n2. `bar "series name" [2.3, 45, .98, -3.4]` adds the bar to the legend.\n\n### Legend (v\\<MERMAID_RELEASE_VERSION>+)\n\nNamed line and bar plots are automatically shown in a legend. Unnamed plots are omitted from the legend.\n\n```mermaid-example\nxychart-beta\n  title "An Example Chart"\n  x-axis ["90d", "60d", "30d", "7d", "1d", "Current"]\n  y-axis "Seconds" 0 --> 198.2\n  line "avg" [48.1, 41.5, 45.7, 72.8, 67.7, 59.9]\n  line "p50" [38.2, 36.8, 39.7, 54.5, 49.0, 38.4]\n  line "p95" [112.2, 75.3, 103.0, 177.0, 180.2, 109.4]\n```\n\n```mermaid\nxychart-beta\n  title "An Example Chart"\n  x-axis ["90d", "60d", "30d", "7d", "1d", "Current"]\n  y-axis "Seconds" 0 --> 198.2\n  line "avg" [48.1, 41.5, 45.7, 72.8, 67.7, 59.9]\n  line "p50" [38.2, 36.8, 39.7, 54.5, 49.0, 38.4]\n  line "p95" [112.2, 75.3, 103.0, 177.0, 180.2, 109.4]\n```\n\n#### Simplest example\n\nThe only two things required are the chart name (`xychart`) and one data set. So you will be able to draw a chart with a simple config like\n\n```\nxychart\n    line [+1.3, .6, 2.4, -.34]\n```\n\n## Chart Configurations\n\n| Parameter                | Description                                                   | Default value |\n| ------------------------ | ------------------------------------------------------------- | :-----------: |\n| width                    | Width of the chart                                            |      700      |\n| height                   | Height of the chart                                           |      500      |\n| titlePadding             | Top and Bottom padding of the title                           |      10       |\n| titleFontSize            | Title font size                                               |      20       |\n| showTitle                | Title to be shown or not                                      |     true      |\n| showLegend               | Legend to be shown for named plots or not                     |     true      |\n| legendFontSize           | Legend font size                                              |      14       |\n| legendPadding            | Padding around the legend                                     |      10       |\n| xAxis                    | xAxis configuration                                           |  AxisConfig   |\n| yAxis                    | yAxis configuration                                           |  AxisConfig   |\n| chartOrientation         | \'vertical\' or \'horizontal\'                                    |  \'vertical\'   |\n| plotReservedSpacePercent | Minimum space plots will take inside the chart                |      50       |\n| showDataLabel            | Should show the value corresponding to the bar within the bar |     false     |\n| showDataLabelOutsideBar  | If showing data label then show it outside the bar.           |     false     |\n\n### AxisConfig\n\n| Parameter     | Description                                                  | Default value |\n| ------------- | ------------------------------------------------------------ | :-----------: |\n| showLabel     | Show axis labels or tick values                              |     true      |\n| labelFontSize | Font size of the label to be drawn                           |      14       |\n| labelPadding  | Top and Bottom padding of the label                          |       5       |\n| showTitle     | Axis title to be shown or not                                |     true      |\n| titleFontSize | Axis title font size                                         |      16       |\n| titlePadding  | Top and Bottom padding of Axis title                         |       5       |\n| showTick      | Tick to be shown or not                                      |     true      |\n| tickLength    | How long the tick will be                                    |       5       |\n| tickWidth     | How width the tick will be                                   |       2       |\n| showAxisLine  | Axis line to be shown or not                                 |     true      |\n| axisLineWidth | Thickness of the axis line                                   |       2       |\n| labelRotation | Label rotation in degrees (only applicable on bottom X axis) |       0       |\n\n## Chart Theme Variables\n\nThemes for xychart reside inside the `xychart` attribute, allowing customization through the following syntax:\n\n```yaml\n---\nconfig:\n  themeVariables:\n    xyChart:\n      titleColor: \'#ff0000\'\n---\n```\n\n| Parameter        | Description                                               |\n| ---------------- | --------------------------------------------------------- |\n| backgroundColor  | Background color of the whole chart                       |\n| titleColor       | Color of the Title text                                   |\n| dataLabelColor   | Color of the Data labels (if shown)                       |\n| legendTextColor  | Color of the legend text                                  |\n| xAxisLabelColor  | Color of the x-axis labels                                |\n| xAxisTitleColor  | Color of the x-axis title                                 |\n| xAxisTickColor   | Color of the x-axis tick                                  |\n| xAxisLineColor   | Color of the x-axis line                                  |\n| yAxisLabelColor  | Color of the y-axis labels                                |\n| yAxisTitleColor  | Color of the y-axis title                                 |\n| yAxisTickColor   | Color of the y-axis tick                                  |\n| yAxisLineColor   | Color of the y-axis line                                  |\n| plotColorPalette | String of colors separated by comma e.g. "#f3456, #43445" |\n\n### Setting Colors for Lines and Bars\n\nTo set the color for lines and bars, use the `plotColorPalette` parameter. Colors in the palette will correspond sequentially to the elements in your chart (e.g., first bar/line will use the first color specified in the palette).\n\n```mermaid-example\n---\nconfig:\n  themeVariables:\n    xyChart:\n      plotColorPalette: \'#000000, #0000FF, #00FF00, #FF0000\'\n---\nxychart\ntitle "Different Colors in xyChart"\nx-axis "categoriesX" ["Category 1", "Category 2", "Category 3", "Category 4"]\ny-axis "valuesY" 0 --> 50\n%% Black line\nline [10,20,30,40]\n%% Blue bar\nbar [20,30,25,35]\n%% Green bar\nbar [15,25,20,30]\n%% Red line\nline [5,15,25,35]\n```\n\n```mermaid\n---\nconfig:\n  themeVariables:\n    xyChart:\n      plotColorPalette: \'#000000, #0000FF, #00FF00, #FF0000\'\n---\nxychart\ntitle "Different Colors in xyChart"\nx-axis "categoriesX" ["Category 1", "Category 2", "Category 3", "Category 4"]\ny-axis "valuesY" 0 --> 50\n%% Black line\nline [10,20,30,40]\n%% Blue bar\nbar [20,30,25,35]\n%% Green bar\nbar [15,25,20,30]\n%% Red line\nline [5,15,25,35]\n```\n\n## Displaying individual values on a bar chart (v11.14.0+)\n\nTo show the value corresponding to a bar specify `showDataLabel: true`.\n\n```mermaid-example\n---\nconfig:\n    xyChart:\n        showDataLabel: true\n---\nxychart\n    title "Genres in top 100 book survey of 2025"\n    x-axis [comedy, romance, mystery, crime, "non fiction", other]\n    y-axis "Number of Books" 0 --> 30\n    bar [12,2,20,25,17,24]\n```\n\n```mermaid\n---\nconfig:\n    xyChart:\n        showDataLabel: true\n---\nxychart\n    title "Genres in top 100 book survey of 2025"\n    x-axis [comedy, romance, mystery, crime, "non fiction", other]\n    y-axis "Number of Books" 0 --> 30\n    bar [12,2,20,25,17,24]\n```\n\nLabels are shown within the bar by default. To show the labels outside the bar, specify `showDataLabelOutsideBar: true`.\n\n```mermaid-example\n---\nconfig:\n    xyChart:\n        showDataLabel: true\n        showDataLabelOutsideBar: true\n---\nxychart\n    title "Genres in top 100 book survey of 2025"\n    x-axis [comedy, romance, mystery, crime, "non fiction", other]\n    y-axis "Number of Books" 0 --> 30\n    bar [12,2,20,25,17,24]\n```\n\n```mermaid\n---\nconfig:\n    xyChart:\n        showDataLabel: true\n        showDataLabelOutsideBar: true\n---\nxychart\n    title "Genres in top 100 book survey of 2025"\n    x-axis [comedy, romance, mystery, crime, "non fiction", other]\n    y-axis "Number of Books" 0 --> 30\n    bar [12,2,20,25,17,24]\n```\n\n## Per-point text labels for line charts (v\\<MERMAID_RELEASE_VERSION>+)\n\nEach data point in a `line` can optionally include a quoted string label after the numeric value. Labels render above points in vertical orientation, or to the right in horizontal orientation, using the line\'s stroke color.\n\n```mermaid-example\nxychart\n    title "Smallest AI models scoring above 60% on MMLU"\n    x-axis "Date" ["Apr 2022", "Feb 2023", "Jul 2023", "Sep 2023", "Apr 2024"]\n    y-axis "Parameters (B)" 0 --> 600\n    line [540 "PaLM", 65 "LLaMA-65B", 34 "Llama 2 34B", 7 "Mistral 7B", 3.8 "Phi-3-mini"]\n```\n\n```mermaid\nxychart\n    title "Smallest AI models scoring above 60% on MMLU"\n    x-axis "Date" ["Apr 2022", "Feb 2023", "Jul 2023", "Sep 2023", "Apr 2024"]\n    y-axis "Parameters (B)" 0 --> 600\n    line [540 "PaLM", 65 "LLaMA-65B", 34 "Llama 2 34B", 7 "Mistral 7B", 3.8 "Phi-3-mini"]\n```\n\nLabels are optional per point — you can mix labeled and unlabeled values:\n\n```mermaid-example\nxychart\n    title "Quarterly Performance"\n    x-axis [Q1, Q2, Q3, Q4]\n    y-axis "Revenue ($M)" 0 --> 100\n    line [25 "Launch", 45, 72, 90 "Target Hit"]\n```\n\n```mermaid\nxychart\n    title "Quarterly Performance"\n    x-axis [Q1, Q2, Q3, Q4]\n    y-axis "Revenue ($M)" 0 --> 100\n    line [25 "Launch", 45, 72, 90 "Target Hit"]\n```\n\nExisting syntax without labels continues to work unchanged.\n\n> **Note**\n> Point labels use a fixed font size of 12px. In vertical charts, labels appear above each point. In horizontal charts, labels appear to the right. Labels are currently supported on `line` plots only; the syntax is accepted on `bar` plots but labels are ignored.\n\n## Example on config and theme\n\n```mermaid-example\n---\nconfig:\n    xyChart:\n        width: 900\n        height: 600\n        showDataLabel: true\n    themeVariables:\n        xyChart:\n            titleColor: "#ff0000"\n---\nxychart\n    title "Sales Revenue"\n    x-axis [jan, feb, mar, apr, may, jun, jul, aug, sep, oct, nov, dec]\n    y-axis "Revenue (in $)" 4000 --> 11000\n    bar [5000, 6000, 7500, 8200, 9500, 10500, 11000, 10200, 9200, 8500, 7000, 6000]\n    line [5000, 6000, 7500, 8200, 9500, 10500, 11000, 10200, 9200, 8500, 7000, 6000]\n```\n\n```mermaid\n---\nconfig:\n    xyChart:\n        width: 900\n        height: 600\n        showDataLabel: true\n    themeVariables:\n        xyChart:\n            titleColor: "#ff0000"\n---\nxychart\n    title "Sales Revenue"\n    x-axis [jan, feb, mar, apr, may, jun, jul, aug, sep, oct, nov, dec]\n    y-axis "Revenue (in $)" 4000 --> 11000\n    bar [5000, 6000, 7500, 8200, 9500, 10500, 11000, 10200, 9200, 8500, 7000, 6000]\n    line [5000, 6000, 7500, 8200, 9500, 10500, 11000, 10200, 9200, 8500, 7000, 6000]\n```\n';
-const __vite_glob_0_41 = '# Review / Git Ops 阶段说明\n\n本文件描述 service 端拉起 `mode=review` / `mode=git-ops`（带 `action`）时，Agent 应遵守的输入解析、输出格式与 git 安全约束。**这条路径不进入 plan/tasks/execute 状态机**，亦不修改 spec.md 的 frontmatter `stage`。\n\n## mode=review\n\n输入：\n\n- spec 文档路径（`<spec_path>`），同目录可能已存在 `review.md`。\n- 当前 git 仓库的未提交变更（`git status -sb` / `git diff` / `git diff --staged`）。\n\n行为：\n\n1. 读取 `<spec_path>` 与 git 变更，理解本次改动相对该 spec 的语义。\n2. 将结构化 review 报告**按时间降序插入**到 `<spec_dir>/review.md`（与 spec.md 同级），使**最新条目位于文件顶部**。\n   - 若 `review.md` 不存在：先写入一行 `# Review · <spec-id>` 作为一级标题，然后再追加本次条目。\n   - 若已存在：**禁止覆盖**历史条目；将本次二级标题及其正文块**插入到 `# Review · <spec-id>` 一级标题之后、既有第一个 `## ` 二级标题之前**，使 review 条目按时间降序（最新在顶）排列。一级标题与新条目之间保留 1 个空行，新条目与后续既有条目之间保留 1 个空行。\n3. 每次 review 的二级标题使用本机当前时间 `## YYYY-MM-DD HH:mm:ss`，时间格式与 spec frontmatter 一致。\n4. 每个二级标题下必须依次包含 4 个三级小节，顺序固定：\n\n   ```markdown\n   ## 2026-06-30 14:23:01\n\n   ### 变更总结\n\n   <内容>\n\n   ### 影响范围\n\n   <内容>\n\n   ### 风险提醒\n\n   <内容>\n\n   ### 变更文件清单\n\n   - path/to/a.ts\n   - path/to/b.tsx\n   ```\n\n5. 报告写完即结束本轮；不要修改 `spec.md`、不要执行任何 git 写操作。\n\n## mode=git-ops + action=commit\n\n- 输入：spec 文档 + 最近一次 `review.md` 条目（若存在）+ 当前 `git status`。\n- 由 Agent **自主决定**本次要提交的 spec 相关变更文件清单；优先以最近 review 的"变更文件清单"为锚，结合 `git status` 中实际存在的未提交文件做交集。\n- commit message 由 Agent 基于 review 总结自行生成；不附加 `[spec:<id>]` 锚点，不带 scope（遵循 `260630.refct.review-commit-msg-remove-scope`）。\n- 仅允许使用 `git add <paths>` + `git commit -m <message>`；**禁止** `git push` / `git reset --hard` / `git rebase` / 修改任何已提交历史。\n\n## mode=git-ops + action=discard\n\n- 使用 `git restore --staged --worktree -- <paths>` 丢弃已 tracked 的修改；untracked 新文件使用 `git clean -fd -- <paths>` 清理。\n- 对 untracked 文件先在终端输出待清理列表，再执行 clean，便于日志回溯。\n- **不**预先 `git stash` 作为"保险备份"（遵循用户显式意图，保持轻量）。\n- **禁止** `git reset --hard`、`git push`。\n\n## mode=git-ops + action=stash\n\n- 使用 `git stash push -m "yorz:<spec-id>" -- <paths>`，仅暂存 spec 相关变更文件。\n- 不要使用 `git stash --all` 之类会影响 untracked / ignored 文件的形式，除非明确需要。\n- **禁止** `git push`。\n\n## 通用硬约束\n\n- 仅操作 `<spec_path>`、`<spec_dir>/review.md` 与 git 工作区文件；不修改无关 spec、不修改本 skill 文件。\n- 任一 git 子命令失败时，把错误信息写入终端日志（service 端会落盘到 agent-logs），不要静默吞掉。\n- 元确认禁令同 SKILL.md「持续推进硬约束」：不向用户回问"是否继续 / 是否执行"等问题（GUI 已在按钮触发前做过必要的二次确认）。\n';
-const __vite_glob_0_42 = '# 阶段流程（plan / tasks / execute / done / new-spec）\n\n## plan\n\n理解文档，分析现有代码，编写技术实现方案，更新到当前文档中；需要用户介入的事项以三级标题写入 `## 待确认项`，待用户后续审阅批注；暂时只需更新文档，不要实施代码。\n\n**目标：** 输出 `## 现状分析`、`## 技术实现方案`、`## 待确认项` 三节；禁止输出任务清单格式 `- [ ]`。\n\n若 `## 追加任务` 存在 `- [open] [feat|refct|fix] ...` 条目，必须将其纳入分析范围；plan 阶段不修改 `[open]` 状态标记。\n\n### 待确认项的三种类型\n\n一个待确认项，要么让用户**抉择**，要么让用户**确认**，要么请用户**自由补充**：\n\n| 类型     | 标记                | 语义                                                                                    | 何时用                |\n| -------- | ------------------- | --------------------------------------------------------------------------------------- | --------------------- |\n| 抉择型   | `[choice]`          | 给用户**选择权**：存在多个都可行、优劣取决于你拿不到的信息（业务优先级/外部约束）的方案 | 多方案差异大、难取舍  |\n| 确认型   | `[confirm]`         | 给用户**否决权**：只有一个可行方案，但它有明显代价（技术债/影响面/不可逆）              | 单方案但影响重大      |\n| 自由文本 | `（自由文本）` 后缀 | 请用户补一段开放说明                                                                    | 需要主观文案/开放意见 |\n\n> 无标记且带有序候选，向后兼容视为 `[choice]`。\n\n### 准入门槛（写入待确认项前必过的自检）\n\n**第一道过滤器先于类型判断**：这个答案，你能否通过读代码、跑测试、查项目约定自己确定？\n\n- **能** → 禁止写成待确认项，自己去查、去定，把决策+理由写进 `## 技术实现方案`（决策说明），不要打断用户。\n- **不能**（决策依赖用户独有信息，或选错的返工不可逆）→ 才写成待确认项，并归入 choice/confirm。\n\n> 待确认项是压力释放阀，不是免责声明。被你砍掉的判断不该凭空消失，要落成 `## 技术实现方案` 里的决策说明（决策 + 理由 + 被否决的备选）。\n\n### 抉择型 [choice] 正确示例\n\n```\n### 5.1 [choice] 候选答案的展现形式应采用哪种？\n1. 嵌套子列表\n2. 表格 (推荐)\n```\n\n- 候选写一级有序列表；恰 1 个候选以 ` (推荐)` / ` （推荐）` 结尾。\n- 空态与格式由 lint 的 `pending-questions/*` 规则保证。\n\n### 确认型 [confirm] 正确示例\n\n```\n### 5.2 [confirm] 将 UserID 从 int 迁移为 uuid\n\n**方案**：一次性迁移，双写过渡 2 周。\n**影响**：🔴 需停机窗口；对外 /api/user 字段类型变更，客户端需同步。\n```\n\n- 只有 `**方案**` 与 `**影响**`（或 `**代价**`）两字段，**不列候选**。\n- 影响行用红/黄语义标注严重度：🔴 breaking（破坏性/不可逆）、🟡 affected（有影响但可控）。\n- 确认型 = "我要这么干了，除非你喊停" 的知会 + 急停按钮：放行是常态，用户否决才是例外。\n\n### 确认型的否决语义（用户在 GUI 上如何回应）\n\n用户对确认型只有两种回应：**确认放行** 或 **否决**。否决必须携带理由，并细分意图（GUI 渲染为嵌套单选）：\n\n| 用户决策                  | 回写 `！！！选择：…`                 | 含义                   |\n| ------------------------- | ------------------------------------ | ---------------------- |\n| 确认，按此推进            | `确认，按此推进`                     | 接受代价，继续         |\n| 否决·换方案               | `否决·换方案`                        | 原目标下另寻实现       |\n| 否决·补约束               | `否决·补约束`                        | 用户补充你漏掉的硬约束 |\n| 否决·弃目标·废弃当前目标  | `否决·弃目标·废弃当前目标，继续其余` | 该目标不做，其余照旧   |\n| 否决·弃目标·放弃整个 spec | `否决·弃目标·放弃整个 spec`          | 整条 spec 作废         |\n\n> 决策不改动 API：编码进批注的 `选择：…`（结构化意图）+ `备注：…`（理由）。tasks 阶段按下表消费。\n\n### 图形化补充（plan 收尾子步骤）\n\n方案文字定稿后、结束 plan 前，**必须**专门回看 `## 现状分析`、`## 技术实现方案` 两节做一次 mermaid 图形化补充（仅此两节，其它章节不动）：\n\n- 加载 [mermaid.md](./mermaid.md)，先服从其**核心原则「图优先、精确信息折叠」**：表层给图（认知层），精确细节（路径、行号、类型/源码全文）折叠进 `<details>` 精确层，图与折叠互补不重复。\n- 按选型表与「必须用图」触发词补图：分步/分支散文→flowchart，接口/类型定义→classDiagram；含「兼容性/影响范围」时出结构图并按红=breaking、黄=affected 语义配色。\n- 这是一道独立聚焦的工序（不新增 stage）：把「想清楚方案 / 写成文字」与「回看补图」分开，避免图形化被跳过。补图完成后再结束 plan。\n\n### 待确认项自检（plan 收尾子步骤）\n\n方案与图形化定稿后、结束 plan 前，**必须**专门回看 `## 待确认项` 做一次自检（与「图形化补充」同构：把"写方案"与"回看校验"分开，避免自检被跳过）：\n\n1. **准入过滤**：逐条问"能否自己查证？"——能则删除该条、把决策落进 `## 技术实现方案`（决策说明）。\n2. **类型归类**：留下的每条明确标 `[choice]` 或 `[confirm]`（或 `（自由文本）`）；单一类型，不兼具。\n3. **确认型补影响**：每个 `[confirm]` 必带 `**方案**` 与 `**影响**`（红/黄语义）；影响写不出来，说明它其实够不上确认型，降级或删除。\n\n自检完成后再结束 plan。\n\n空态整章仅一行斜体占位：\n\n```\n## 5. 待确认项\n\n_暂无_\n```\n\n> 格式由 lint 的 `pending-questions/*` 规则保证；不确定时运行 `yorz lint` 查看报错。\n\n## tasks\n\n根据批注内容（`！！！` 前缀）更新技术方案；审查批注是否正确解答了待确认项；若引入新增/扩展需求或新增 bug，切回 plan；若存在冲突或歧义，回退 plan 并写入待确认项后退出；否则将技术方案拆解为可执行任务，写入文档，然后进入 execute。\n\n### 批注消费规则\n\n- 读取并消费所有 `！！！` 批注，将批注意图合并进 `## 技术实现方案` 与 `## 任务清单`。\n- 处理完成后**删除对应 `！！！` 文本**，然后**整段删除** `## 用户批注` 章节。\n\n### 确认型答复的消费\n\n当批注含 `！！！选择：<决策>；备注：<理由>`（引用行的前缀 `待确认项`/`待确认问题` 皆可），按 `选择：` 分派下游行为，并**无论确认或否决都留痕**——在 `## 技术实现方案` 追加一行决策记录：`> 决策记录：<条目> —— 用户<决策>，理由：<理由>。`（决策记录不随 `## 用户批注` 删除而蒸发）：\n\n| `选择：`                           | 下游行为                                                                                       |\n| ---------------------------------- | ---------------------------------------------------------------------------------------------- |\n| 确认，按此推进                     | 接受代价，落决策记录，继续拆任务                                                               |\n| 否决·换方案                        | 切回 plan：原目标下另寻实现（新方案可能又产生 choice/confirm）                                 |\n| 否决·补约束                        | 切回 plan：把理由当硬约束重算方案                                                              |\n| 否决·弃目标·废弃当前目标，继续其余 | 从 `## 需求` 剔除该目标，落决策记录，继续其余目标                                              |\n| 否决·弃目标·放弃整个 spec          | 落决策记录（作废），将 `stage` 置 `done` 终止，`last_action` 记「用户放弃整个 spec，标记终止」 |\n\n### 任务清单正确示例\n\n```\n## 6. 任务清单\n\n- [ ] 删除 src/foo.ts 中的 deprecatedFunc（验收：grep 无残留引用）\n- [ ] 更新 index.ts 导出（验收：tsc --noEmit 通过）\n```\n\n> 每项任务包含"动作 + 对象 + 验收点"；仅使用单层 `- [ ]`；禁止泛化任务。\n\n### `[manual]` 人工确认任务标记\n\n对「需人工确认、Agent 不能自动完成」的事项，用 `- [ ] [manual] ...` 标注：\n\n```\n- [ ] [manual] 联系运维确认灰度窗口（验收：人工回复确认）\n```\n\n`done` 收尾判定**忽略**未勾选的 `[manual]` 项：只要其余非 manual 任务全部完成，即可收尾为 `done`，无需等待人工项被勾选（详见 execute 的「收尾为 done」）。\n\n### 自动衔接\n\n> 任务量不构成暂停理由：以下衔接规则与任务清单长度、改动半径无关。\n\n若待确认项为 `_暂无_` 且无新冲突，同一轮继续进入 execute，**同一轮衔接 execute 前后不得**向用户追加任何"是否执行/是否继续"询问。\n\n## execute\n\n顺序执行 `## 任务清单` 中未完成项（`- [ ]`）。执行中若发现新增/扩展需求或新增 bug，立即停止，切回 plan。\n\n> **执行过程中不得对用户做整批/中段元确认**：除"新需求/新 bug → 切回 plan"这一合法阻塞外，任务清单内部的任何疑问都必须以 `## 待确认项` 形式写回触发重开，禁止追加"是否继续 / 我是否应该执行下一项"等问句停顿。\n\n### 每完成一项后立刻\n\n- 将该项从 `- [ ]` 改为 `- [x]`。\n- 在 `## 执行记录` 增加一条结果（改动点、验证方式、阻塞项若有）。\n\n### 默认执行验证\n\n若仓库存在可用测试/构建命令，默认执行并记录结果；若当前环境无法执行，记录原因。\n\n### 追加任务 `[open] → [fixed]` 状态机\n\n若本轮起因是 `## 追加任务` 中的 `[open]` 条目：每完成一个追加项，把状态标记从 `[open]` 改为 `[fixed]`（位置和正文保留不变），在 `## 执行记录` 追加一条结果。已 `[fixed]` 的条目保留作为历史，不删除。\n\n### 收尾为 done\n\n当 `## 任务清单` 不存在未完成的**非 `[manual]`** 任务（`- [ ] [manual]` 人工确认项被忽略），且 `## 待确认项` 为 `_暂无_`、无任何 `！！！` 批注、无 `## 追加任务` 的 `[open]` 条目时，在 execute 收尾同一轮：\n\n- 将 `stage` 置为 `done`，`last_action` 记「任务全部完成，标记 done」。\n- 在 `## 执行记录` 追加一条收尾条目。\n\n`done` 是终止态：机器 / GUI 可据 `stage=done` 直接判定完成。此后不再自动推进；收到新增/扩展需求、新 bug，或 `## 追加任务` 出现 `[open]` 时，按「变更重开流程」切回 `plan`。\n\n## new-spec\n\n当 `spec_path` 缺省且无法从 session 上下文恢复时，自动生成路径与初始骨架。\n\n### 步骤\n\n1. **提炼摘要**：从用户输入提炼 kebab-case `summary-name`（≤ 40 字符，不以数字开头，必须语义化）。中文为主难以提炼时使用 `untitled-<NNN>` 占位。\n2. **判定 type**：`feat` / `refct` / `fix`；prompt 中已显式给出时直接使用；不确定时询问用户，兜底取 `feat`。\n3. **生成 id**：`YYMMDD.<type>.<summary-name>`（如 `260614.feat.spec-frontmatter`）。\n4. **生成路径**：`<specsDir>/<id>/spec.md`。id 冲突时追加 `-2`、`-3` 后缀。\n5. **初始化文档**：写入 frontmatter（`stage: plan`、`last_action: 新建 spec`、`updated_at` 本地秒级字符串、`summary` ≤ 200 字符）；建议创建全部章节（背景 / 需求 / 现状分析 / 技术实现方案 / 待确认项 / 任务清单 / 执行记录），将用户原始需求写入背景或需求。\n6. **进入 plan**：初始化后在同一轮继续推进 plan，不要因为"文档已创建"就退出。\n\n### CLI 触发模式\n\nCLI/Service 同时给出 `类型：<type>` 与需求但未提供 `spec_path` 时，必须自动进入新建流程，不询问类型/路径；初始化后同一轮继续推进 plan，直到遇到真正阻塞才退出。\n';
+const __vite_glob_0_7 = "---\nstage: execute\nlast_action: 任务已就绪，等待执行\nupdated_at: 2026-06-20\nsummary: 在仓库根新增 HELLO.txt 占位文件，内容为 hello world。\n---\n\n# HELLO 占位\n\n## 1. 背景\n\n希望在仓库根有一个 HELLO.txt 占位文件，用于演示 execute 阶段的勾选行为。\n\n## 2. 需求\n\n- 在仓库根创建 `HELLO.txt`，内容固定为 `hello world\\n`\n\n## 3. 现状分析\n\n仓库根目前没有 `HELLO.txt`，需新建。\n\n## 4. 技术实现方案\n\n- 直接写入 `HELLO.txt`，内容 `hello world\\n`，无 BOM、无尾随空行。\n\n## 5. 待确认问题\n\n- 暂无\n\n## 6. 任务清单\n\n- [ ] 在仓库根新建 `HELLO.txt`，内容为 `hello world\\n`，验收点：文件存在且内容字节数 = 12。\n\n## 7. 追加任务\n\n- 暂无\n\n## 8. 执行记录\n\n- 暂无\n";
+const __vite_glob_0_8 = '{\n  "module": "execute"\n}\n';
+const __vite_glob_0_9 = '{\n  "module": "new-spec",\n  "newSpec": true,\n  "prompt": "请使用 yorz-spec skill 新建 spec：给 GUI 加一个夜间模式开关，挂在 Settings 页面。"\n}\n';
+const __vite_glob_0_10 = "---\nstage: plan\nlast_action: 初始化\nupdated_at: 2026-06-20\nsummary: 给项目新增「最近访问」入口；需要决定挂载位置、数据来源、上限条数与清空策略。\n---\n\n# 最近访问入口\n\n## 1. 背景\n\n用户反馈每次打开应用都要在 spec 列表里翻找昨天碰过的几个 spec。希望首屏看到一个「最近访问」入口直接跳转。\n\n## 2. 需求\n\n- 新增「最近访问」入口，列出用户近期访问过的 spec\n- 需要决定：入口挂在导航哪一层？数据来自本地还是服务端？最多保留多少条？是否提供清空按钮？\n\n## 3. 现状分析\n\n当前 GUI 主导航只有两个 tab：`Specs`、`Settings`。没有任何位置承载「最近访问」类的快捷入口。Spec 列表本身按 mtime 排序，并不区分「访问过 / 未访问过」，也没有任何客户端访问记录。\n\n## 4. 技术实现方案\n\n- 暂无（待 plan 阶段决策）\n\n## 5. 待确认问题\n\n_暂无_\n\n## 6. 任务清单\n\n- 暂无\n\n## 7. 追加任务\n\n- 暂无\n\n## 8. 执行记录\n\n- 暂无\n";
+const __vite_glob_0_11 = '{\n  "module": "plan"\n}\n';
+const __vite_glob_0_12 = "---\nstage: execute\nlast_action: 全部任务已完成\nupdated_at: 2026-06-20\nsummary: 新增 HELLO.txt 占位文件；后续新增需求：同步生成 HELLO.md，与 HELLO.txt 内容保持一致。\n---\n\n# HELLO 占位\n\n## 1. 背景\n\n希望仓库根有占位文件，便于演示。\n\n## 2. 需求\n\n- 在仓库根创建 `HELLO.txt`，内容 `hello world\\n`\n- 新增需求：同步生成 `HELLO.md`，标题为 `# HELLO`，正文与 `HELLO.txt` 保持一致；后续两个文件必须同步维护\n\n## 3. 现状分析\n\n`HELLO.txt` 已经存在；`HELLO.md` 暂无。\n\n## 4. 技术实现方案\n\n- 直接写入 `HELLO.txt`。\n\n## 5. 待确认问题\n\n- 暂无\n\n## 6. 任务清单\n\n- [x] 在仓库根新建 `HELLO.txt`，内容 `hello world\\n`，验收点：文件存在且内容字节数 = 12。\n\n## 7. 追加任务\n\n- 暂无\n\n## 8. 执行记录\n\n- 2026-06-20 创建 `HELLO.txt`，内容 `hello world\\n`。\n";
+const __vite_glob_0_13 = '{\n  "module": "routing"\n}\n';
+const __vite_glob_0_14 = "---\nstage: plan\nlast_action: 已生成 plan，等待用户批注待确认问题\nupdated_at: 2026-06-20\nsummary: 给项目新增「最近访问」入口，挂在 Specs 列表上方；数据本地存储；上限 10 条；提供清空按钮。\n---\n\n# 最近访问入口\n\n## 1. 背景\n\n用户反馈每次打开应用都要在 spec 列表里翻找昨天碰过的几个 spec。希望首屏看到一个「最近访问」入口直接跳转。\n\n## 2. 需求\n\n- 新增「最近访问」入口，列出用户近期访问过的 spec\n- 决策范围：挂载位置、数据来源、上限条数、清空策略\n\n## 3. 现状分析\n\nGUI 主导航当前只有 `Specs`、`Settings`；Spec 列表按 mtime 排序，没有访问记录。\n\n## 4. 技术实现方案\n\n- 在 `Specs` 列表上方插入「最近访问」区域，最多展示 10 条，按访问时间倒序。\n- 访问记录写入浏览器 `localStorage`，key 为 `yorz:recent-specs`，存 spec id + 最后访问时间。\n- 列表右侧提供「清空」按钮，弹确认对话框后清空 key。\n\n## 5. 待确认问题\n\n- 「最近访问」入口挂在哪里？\n  - 挂在 Specs 列表上方\n  - 挂在主导航单独 tab\n  - 挂在 Settings 页面\n  ！！！选「挂在 Specs 列表上方」\n- 访问记录的存储位置？\n  - localStorage\n  - 服务端数据库\n  ！！！选 localStorage，本地够用\n- 最多保留多少条？\n  - 10 条\n  - 20 条\n  - 50 条\n  ！！！选 10 条\n- 是否提供「清空」按钮？\n  - 提供，弹确认对话框\n  - 不提供\n  ！！！提供，弹确认对话框\n\n## 6. 任务清单\n\n- 暂无\n\n## 7. 追加任务\n\n- 暂无\n\n## 8. 执行记录\n\n- 暂无\n";
+const __vite_glob_0_15 = '{\n  "module": "tasks"\n}\n';
+const __vite_glob_0_16 = '{\n  "$schema": "https://json-schema.org/draft-07/schema#",\n  "version": 2,\n  "modules": [\n    {\n      "module": "SKILL",\n      "file": "SKILL.md",\n      "relatedCases": ["reopen-on-new-requirement", "append-task-state"]\n    },\n    {\n      "module": "stages",\n      "file": "stages.md",\n      "relatedCases": [\n        "plan-candidates",\n        "tasks-consume-annotations",\n        "execute-checkbox-flip",\n        "append-task-state",\n        "new-spec-skeleton"\n      ]\n    },\n    {\n      "module": "mermaid",\n      "file": "mermaid.md",\n      "relatedCases": []\n    }\n  ]\n}\n';
+const __vite_glob_0_17 = '# Mermaid 图表输出指南\n\n本模块指导 Agent 在 spec 文档的各个阶段（plan / tasks / execute）按需输出 mermaid 图表，对信息进行"升维"，提升可读性与决策效率。\n\n## 核心原则：图优先、精确信息折叠\n\n一切图形化决策先服从这条贯穿性原则：**spec 表层图形优先，精确信息折叠收纳**。\n\n- **图形目标**：让读者快速建立三类认知——核心逻辑流程、模块结构、模块间交互。图是「认知层」。\n- **图形边界**：图中**不写**文件路径、代码行号、源码/伪代码全文、精确函数签名；这些属于「精确层」，不该塞进节点标签。\n- **分层表达**：章节表层先给图（认知层），再把 Agent 实施所需的精确信息折叠进「精确层」承载物（见[精确信息折叠](#精确信息折叠)）；图与折叠块**互补而非重复**。\n\n```mermaid\nflowchart TD\n    A[章节含复杂信息] --> B{信息属性}\n    B -->|流程 分支 循环| C[flowchart]\n    B -->|类型 接口 关系| D[classDiagram]\n    B -->|模块交互 时序| E[sequenceDiagram]\n    B -->|模块结构 影响面| F[结构图 + 语义配色]\n    C --> G[表层放图 认知层]\n    D --> G\n    E --> G\n    F --> G\n    G --> H[路径 行号 源码 类型全文 折叠进精确层]\n```\n\n## 图表选型表\n\n根据信息特征选择最合适的图表类型。**优先选择最能清晰传达信息的类型**，而非最复杂的类型。每行"替代什么"列提示：该场景下应**用图替代**的低效文本形式。\n\n| 信息特征                   | 推荐图表                                                 | 替代什么               | 典型 spec 落点               |\n| -------------------------- | -------------------------------------------------------- | ---------------------- | ---------------------------- |\n| 流程、步骤、决策分支       | [**flowchart**](references/flowchart.md)                 | md 列表 + 文字描述     | 核心代码逻辑、执行流程       |\n| 组件间交互、消息传递       | [**sequenceDiagram**](references/sequenceDiagram.md)     | 编号文字描述交互过程   | 现状分析链路、技术方案交互   |\n| 状态机、阶段流转           | [**stateDiagram**](references/stateDiagram.md)           | 文字列举状态变更条件   | 关键状态关系、spec 阶段流转  |\n| 类结构、类型定义、继承关系 | [**classDiagram**](references/classDiagram.md)           | TS/代码片段            | 数据模型、模块结构、类型设计 |\n| 数据库表、实体关系         | [**erDiagram**](references/entityRelationshipDiagram.md) | 建表 SQL 或文字描述    | 数据模型设计                 |\n| 系统架构、组件依赖         | [**architecture**](references/architecture.md)           | 文字描述系统组成       | 现状分析架构、总体架构       |\n| 层级逻辑、数据结构         | [**treeView-beta**](references/treeView.md)              | ASCII 字符树、嵌套列表 | 模块层级、文件结构、AST 结构 |\n| 层级结构 + 占比分布        | [**treemap-beta**](references/treemap.md)                | ASCII 字符树、嵌套列表 | 模块层级量级、文件结构占比   |\n| 层级关系、知识结构         | [**mindmap**](references/mindmap.md)                     | 缩进列表               | 需求拆解、影响面分析         |\n| 历史事件、变更时间线       | [**timeline**](references/timeline.md)                   | 文字按日期罗列         | 执行记录、变更历史           |\n| Git 分支、合并策略         | [**gitgraph**](references/gitgraph.md)                   | 文字描述分支操作       | Git 工作流设计               |\n| 事件建模、系统信息流       | [**eventmodeling**](references/eventmodeling.md)         | 文字描述事件流         | 事件驱动架构设计、CQRS 模型  |\n| 二进制协议、数据包结构     | [**packet**](references/packet.md)                       | 文字描述协议字段       | 二进制协议分析、网络包结构   |\n| 方案候选决策、风险象限     | [**quadrantChart**](references/quadrantChart.md)         | 文字描述优劣对比       | 候选方案决策、风险评估       |\n| 多方案能力对比、权衡       | [**radar**](references/radar.md)                         | 文字描述能力对比       | 架构方案对比、技术选型权衡   |\n| 多模块职责在复杂流程中     | [**swimlane**](references/swimlanes.md)                  | 普通流程图             | 复杂业务流程、跨团队协作     |\n| 统计数据、趋势分析         | [**xyChart**](references/xyChart.md)                     | 文字描述数据           | 变更影响分析、日志统计       |\n\n## 场景优先级\n\n### 必须用图（高优先级）\n\n以下场景**必须**使用对应图表替代纯文字描述：\n\n1. **类型定义与关系** → `classDiagram`：展示接口/类型的属性、方法、继承与组合关系。不要用 TS 代码块替代——类图能直观展现关系拓扑。\n   - **可判定触发词**：见到「接口/类型/entry 结构的定义」「一段 TS interface / type / class 全文」「数据模型字段罗列」——必须出 classDiagram。\n2. **核心业务流程/算法逻辑** → `flowchart`：包含分支判断、循环、并行路径的逻辑。不要用 md 列表 + 文字逐步描述——flowchart 的分支视觉远比缩进列表清晰。\n   - **可判定触发词**：见到「分步/编号叙述 + 分支策略」「命令/函数的实现流程散文」「先…再…否则…」这类流程散文——必须出 flowchart，别退回有序列表。\n3. **状态机与生命周期** → `stateDiagram`：实体在不同状态间的流转与触发条件。不要用文字列举状态——状态图能展现并发状态与守卫条件。\n4. **层级逻辑与数据结构** → `treeView-beta`：模块/文件/目录的层级关系、AST 结构等。不要用 ASCII 字符树——treeView 更清晰且可渲染（mermaid fence 首行须写 `treeView-beta`，与 lint 白名单一致）。\n\n> **代码/类型全文折叠配套（强约束）**：类型定义、实现源码、伪代码在图中**只表达结构与关系**；其**全文**移入[精确信息折叠](#精确信息折叠)承载，**严禁** classDiagram 与等价 TS 代码块并列重复贴出。\n\n### 推荐用图（中优先级）\n\n5. **组件交互** → `sequenceDiagram`：多组件间的消息传递、API 调用时序。\n6. **数据模型** → `erDiagram`：数据库表结构与外键关系。\n7. **系统架构** → `architecture`：组件依赖与分组、部署拓扑。\n8. **需求拆解** → `mindmap`：影响面分析、需求分解为子项。\n9. **多模块职责流程** → `swimlane`：复杂业务流程中跨模块/团队的分工与职责边界。\n\n### 按需用图（低优先级）\n\n10. **变更历史** → `timeline`：执行记录中按时间排列关键事件。\n11. **Git 工作流** → `gitgraph`：描述分支策略与合并流程。\n12. **层级占比** → `treemap-beta`：需要同时展示层级结构与各部分量级/占比时（mermaid fence 首行须写 `treemap-beta`）。\n13. **方案候选决策** → `quadrantChart`：Review/方案选择时做象限分析。\n14. **多方案能力对比** → `radar`：架构选型时做多维度能力雷达对比。\n15. **统计数据** → `xyChart`：日志/变更影响/性能数据等统计可视化。\n16. **事件建模** → `eventmodeling`：事件驱动系统设计时描述信息流。\n17. **二进制协议** → `packet`：协议分析时展示数据包字段结构。\n\n## 各阶段落点指导\n\n### plan 阶段（收尾「图形化补充」子步骤）\n\n> 出图作为 plan 的**独立收尾子步骤**执行（见 [stages.md](./stages.md) 的「图形化补充」）：方案文字定稿后，专门回看下列两节补图，**仅覆盖 `现状分析` / `技术方案` 两节**，不扩展到其它章节。\n\n- **## 现状分析**：用 **architecture** 图描述现有系统结构与组件依赖；用 **flowchart** 描述当前业务流程或数据流。\n- **## 技术实现方案**：用 **flowchart** 描述方案逻辑与决策分支；用 **sequenceDiagram** 描述模块间交互与时序；用 **architecture** 图描述改造后的总体架构。\n- **## 技术实现方案 · 兼容性/影响范围**：凡方案含「被变更模块的现有组成结构 + 影响面」，必须出**结构图**（classDiagram 或 flowchart）展示现有模块组成，并按下方[影响面语义配色](#影响面语义配色强约定)标注 breaking / affected 区域。此落点属 plan 技术方案（非 review），plan 收尾补图工序必须覆盖。\n\n#### 影响面语义配色（强约定）\n\n统一语义色，用 `classDef` 承载——**红 = breaking change 区域，黄 = 受影响区域**；classDiagram 与 flowchart 均按下列范式上色。\n\nflowchart 范式：\n\n```mermaid\nflowchart TB\n    subgraph 现有模块结构\n      A[模块 A 不变]\n      B[模块 B breaking]\n      C[模块 C 受影响]\n    end\n    classDef breaking fill:#ffdddd,stroke:#e03131,color:#c92a2a\n    classDef affected fill:#fff3bf,stroke:#f08c00,color:#e67700\n    class B breaking\n    class C affected\n```\n\nclassDiagram 范式：\n\n```mermaid\nclassDiagram\n    class ModuleA { +stable() }\n    class ModuleB { +changed() }\n    class ModuleC { +touched() }\n    ModuleA --> ModuleB\n    ModuleB --> ModuleC\n    classDef breaking fill:#ffdddd,stroke:#e03131,color:#c92a2a\n    classDef affected fill:#fff3bf,stroke:#f08c00,color:#e67700\n    class ModuleB:::breaking\n    class ModuleC:::affected\n```\n\n### review 阶段\n\n- **风险提示**：用 **quadrantChart** 按风险概率 × 影响程度做象限分布，直观标识高优风险项；用 **mindmap** 将风险按类别（安全 / 性能 / 兼容性 / 数据一致性等）层级展开，快速纵览全貌。\n- **变更范围**：用 **mindmap** 以变更源为根节点展开影响面（受影响模块、文件、接口、配置等）；当变更沿调用链传播时，用 **flowchart** 绘制波及路径，标明直接与间接影响层级。\n- **变更前后差异**：用 **flowchart** 并排呈现 Before / After 流程，关键变更点用样式高亮（如红色边框标记新增节点、删除线标记移除节点）；涉及数据模型变更时用 **classDiagram** 或 **erDiagram** 对比结构差异；涉及配置/枚举等层级数据变化时用 **treeView** 做树形 Diff。\n\n## 输出规范\n\n1. **代码块包裹**：mermaid 代码必须用 ` ```mermaid ` 代码块包裹。\n2. **语法正确**：确保代码可直接渲染，无语法错误。不确定时参考 `references/` 对应文档。\n3. **语义化命名**：节点、变量使用有意义的名称（如 `Skill输出` 而非 `A`），便于理解。\n4. **适度样式**：需要时包含样式（颜色、形状区分）以提升可读性，但不要过度装饰。\n5. **中文友好**：节点文本可使用中文；ID 使用英文或拼音以避免 mermaid 解析问题。\n\n### 示例\n\n```mermaid\nflowchart LR\n    A[Skill 输出 mermaid code] --> B[spec.md]\n    B -->|SSE 推送| C[GUI SpecDetail]\n    C --> D[fence rule 识别]\n    D --> E[异步渲染图形]\n```\n\n## 精确信息折叠\n\n「图优先、精确信息折叠」的落地承载。GUI 渲染器已开启**受控 HTML**：仅放行 `<details>` / `<summary>`，故用原生 `<details>` 折叠精确层。\n\n**该折叠的信息（精确层）**：文件路径与行号、接口/类型/类的全文定义、实现源码或伪代码、精确函数签名、逐字段配置清单、冗长的命令样例。这些是 Agent 实施所需、但会干扰认知的细节。\n\n**不该折叠的信息（认知层）**：章节表层的图、方案要点、决策结论——保持直接可见。\n\n写法（`<details>` 前后留空行，内部 markdown 正常解析）：\n\n```markdown\n<details>\n<summary>add.ts 类型定义与实现细节</summary>\n\n- `src/cli/add.ts:42` 新增 `interface AddOptions { path: string; force?: boolean }`\n- 具体源码 / 逐字段说明 …\n\n</details>\n```\n\n> 注意：`<details>`/`<summary>` 之外的原始 HTML（如 `<div>`、`<script>`）会被 GUI 转义为文本，不要依赖其它标签。\n\n## 节制原则\n\n- **只在信息确实复杂、图形能显著提升可读性时输出**，避免为出图而出图。\n- 简单的线性列表、两三步操作无需图表。\n- 单个章节不宜超过 2 张图，过多图表反而降低可读性。\n- 图表应**补充**文字描述而非替代——文字说明图表无法表达的细节。\n- 如果不确定是否需要图表，优先不画，在文字分析足够清晰时省略。\n';
+const __vite_glob_0_18 = '> **Warning**\n>\n> ## THIS IS AN AUTOGENERATED FILE. DO NOT EDIT.\n>\n> ## Please edit the corresponding file in [/packages/mermaid/src/docs/syntax/architecture.md](../../packages/mermaid/src/docs/syntax/architecture.md).\n\n# Architecture Diagrams Documentation (v11.1.0+)\n\n> In the context of mermaid-js, the architecture diagram is used to show the relationship between services and resources commonly found within the Cloud or CI/CD deployments. In an architecture diagram, services (nodes) are connected by edges. Related services can be placed within groups to better illustrate how they are organized.\n\n## Example\n\n```mermaid-example\narchitecture-beta\n    group api(cloud)[API]\n\n    service db(database)[Database] in api\n    service disk1(disk)[Storage] in api\n    service disk2(disk)[Storage] in api\n    service server(server)[Server] in api\n\n    db:L -- R:server\n    disk1:T -- B:server\n    disk2:T -- B:db\n```\n\n```mermaid\narchitecture-beta\n    group api(cloud)[API]\n\n    service db(database)[Database] in api\n    service disk1(disk)[Storage] in api\n    service disk2(disk)[Storage] in api\n    service server(server)[Server] in api\n\n    db:L -- R:server\n    disk1:T -- B:server\n    disk2:T -- B:db\n```\n\n## Syntax\n\nThe building blocks of an architecture are `groups`, `services`, `edges`, and `junctions`.\n\nFor supporting components, icons are declared by surrounding the icon name with `()`, while labels are declared by surrounding the text with `[]`.\n\nTo begin an architecture diagram, use the keyword `architecture-beta`, followed by your groups, services, edges, and junctions. While each of the 3 building blocks can be declared in any order, care must be taken to ensure the identifier was previously declared by another component.\n\n### Groups\n\nThe syntax for declaring a group is:\n\n```\ngroup {group id}({icon name})[{title}] (in {parent id})?\n```\n\nPut together:\n\n```\ngroup public_api(cloud)[Public API]\n```\n\ncreates a group identified as `public_api`, uses the icon `cloud`, and has the label `Public API`.\n\nAdditionally, groups can be placed within a group using the optional `in` keyword\n\n```\ngroup private_api(cloud)[Private API] in public_api\n```\n\n### Services\n\nThe syntax for declaring a service is:\n\n```\nservice {service id}({icon name})[{title}] (in {parent id})?\n```\n\nPut together:\n\n```\nservice database1(database)[My Database]\n```\n\ncreates the service identified as `database1`, using the icon `database`, with the label `My Database`.\n\nIf the service belongs to a group, it can be placed inside it through the optional `in` keyword\n\n```\nservice database1(database)[My Database] in private_api\n```\n\n### Edges\n\nThe syntax for declaring an edge is:\n\n```\n{serviceId}{{group}}?:{T|B|L|R} {<}?--{>}? {T|B|L|R}:{serviceId}{{group}}?\n```\n\n#### Edge Direction\n\nThe side of the service the edge comes out of is specified by adding a colon (`:`) to the side of the service connecting to the arrow and adding `L|R|T|B`\n\nFor example:\n\n```\ndb:R -- L:server\n```\n\ncreates an edge between the services `db` and `server`, with the edge coming out of the right of `db` and the left of `server`.\n\n```\ndb:T -- L:server\n```\n\ncreates a 90 degree edge between the services `db` and `server`, with the edge coming out of the top of `db` and the left of `server`.\n\n#### Arrows\n\nArrows can be added to each side of an edge by adding `<` before the direction on the left, and/or `>` after the direction on the right.\n\nFor example:\n\n```\nsubnet:R --> L:gateway\n```\n\ncreates an edge with the arrow going into the `gateway` service\n\n#### Edges out of Groups\n\nTo have an edge go from a group to another group or service within another group, the `{group}` modifier can be added after the `serviceId`.\n\nFor example:\n\n```\nservice server[Server] in groupOne\nservice subnet[Subnet] in groupTwo\n\nserver{group}:B --> T:subnet{group}\n```\n\ncreates an edge going out of `groupOne`, adjacent to `server`, and into `groupTwo`, adjacent to `subnet`.\n\nIt\'s important to note that `groupId`s cannot be used for specifying edges and the `{group}` modifier can only be used for services within a group.\n\n### Aligning siblings (v\\<MERMAID_RELEASE_VERSION>+)\n\nWhen several services share similar edge topology (for example, three databases all connecting `R --> L:mcp`), the layout heuristic may collapse them onto the same coordinate so that two render on top of each other. The `align` directive declares that a set of services share a row (same y) or a column (same x), and forces them to spread along that axis.\n\n```\nalign row {idA} {idB} {idC} ...\nalign column {idA} {idB} ...\n```\n\nMembers must already be declared as services or junctions, and at least two members are required. Each `align` directive lives on its own line.\n\nPick the axis based on how the listed members are connected:\n\n- Use **`align column`** when the members connect to a common downstream node _via the same horizontal port pair_ (e.g. all use `R --> L:mcp`). They naturally form a vertical stack to one side, with parallel arrows reaching the downstream node.\n- Use **`align row`** when the members connect to a common downstream node _via the same vertical port pair_ (e.g. all use `B --> T:proc`). They naturally form a horizontal row above the downstream node.\n\nThree databases all feeding `mcp` via right-to-left edges → stack them in a column:\n\n```mermaid-example\narchitecture-beta\n    group api(cloud)[API]\n    service db1(database)[DB1] in api\n    service db2(database)[DB2] in api\n    service db3(database)[DB3] in api\n    service mcp(server)[MCP] in api\n    db1:R --> L:mcp\n    db2:R --> L:mcp\n    db3:R --> L:mcp\n    align column db1 db2 db3\n```\n\n```mermaid\narchitecture-beta\n    group api(cloud)[API]\n    service db1(database)[DB1] in api\n    service db2(database)[DB2] in api\n    service db3(database)[DB3] in api\n    service mcp(server)[MCP] in api\n    db1:R --> L:mcp\n    db2:R --> L:mcp\n    db3:R --> L:mcp\n    align column db1 db2 db3\n```\n\nThree sources all feeding `proc` via top-to-bottom edges → arrange them in a row:\n\n```mermaid-example\narchitecture-beta\n    service src1(server)[Source 1]\n    service src2(server)[Source 2]\n    service src3(server)[Source 3]\n    service proc(server)[Processor]\n    src1:B --> T:proc\n    src2:B --> T:proc\n    src3:B --> T:proc\n    align row src1 src2 src3\n```\n\n```mermaid\narchitecture-beta\n    service src1(server)[Source 1]\n    service src2(server)[Source 2]\n    service src3(server)[Source 3]\n    service proc(server)[Processor]\n    src1:B --> T:proc\n    src2:B --> T:proc\n    src3:B --> T:proc\n    align row src1 src2 src3\n```\n\nThe order of members in the `align` directive determines their order along the axis. The gap between aligned members is controlled by `idealEdgeLengthMultiplier`.\n\n> **Note:** the declared order must not contradict the directions of edges between the listed members. For example, if the diagram contains `a:L --> R:b` (which places `a` to the right of `b`), then `align row a b` will conflict with that edge direction and the layout engine will fail to render. Use `align row b a` instead, or remove the conflicting edge.\n\n#### Grid layouts (combining `row` and `column`)\n\n`align row` only pins the y-coordinate of its members. To produce a clean grid where columns also align across tiers, pair each `align row` with one or more `align column` directives. The columns can span as many rows as you like — chain every node that should share an x-coordinate, even across groups.\n\n```mermaid-example\narchitecture-beta\n    group sources(cloud)[Sources]\n        service src_a(server)[Source A] in sources\n        service src_b(server)[Source B] in sources\n        service src_c(server)[Source C] in sources\n\n    group storage(database)[Storage]\n        service db_one(database)[DB One] in storage\n        service db_two(database)[DB Two] in storage\n        service db_three(database)[DB Three] in storage\n\n    group output(disk)[Output]\n        service brief(disk)[Brief] in output\n        service analyst(server)[Analyst] in output\n        service delivery(cloud)[Delivery] in output\n\n    src_a:B --> T:db_one\n    src_b:B --> T:db_two\n    src_c:B --> T:db_three\n    db_two:B --> T:brief\n    brief:R --> L:analyst\n    analyst:R --> L:delivery\n\n    align row src_a src_b src_c\n    align row db_one db_two db_three\n    align row brief analyst delivery\n\n    align column src_a db_one\n    align column src_b db_two brief\n    align column src_c db_three\n```\n\n```mermaid\narchitecture-beta\n    group sources(cloud)[Sources]\n        service src_a(server)[Source A] in sources\n        service src_b(server)[Source B] in sources\n        service src_c(server)[Source C] in sources\n\n    group storage(database)[Storage]\n        service db_one(database)[DB One] in storage\n        service db_two(database)[DB Two] in storage\n        service db_three(database)[DB Three] in storage\n\n    group output(disk)[Output]\n        service brief(disk)[Brief] in output\n        service analyst(server)[Analyst] in output\n        service delivery(cloud)[Delivery] in output\n\n    src_a:B --> T:db_one\n    src_b:B --> T:db_two\n    src_c:B --> T:db_three\n    db_two:B --> T:brief\n    brief:R --> L:analyst\n    analyst:R --> L:delivery\n\n    align row src_a src_b src_c\n    align row db_one db_two db_three\n    align row brief analyst delivery\n\n    align column src_a db_one\n    align column src_b db_two brief\n    align column src_c db_three\n```\n\nThe result is three left-to-right tiers stacked vertically with a straight spine through the middle column. Edges between aligned nodes render as straight horizontal or vertical lines; cross-axis edges (e.g. `db_one:R --> T:hub`) get a single 90° elbow.\n\n> **Tip:** if a long single-word label is too wide to fit on one line at small `iconSize` values, increase `iconSize` (or use a shorter title) to keep it on one line.\n\n### Junctions\n\nJunctions are a special type of node which acts as a potential 4-way split between edges.\n\nThe syntax for declaring a junction is:\n\n```\njunction {junction id} (in {parent id})?\n```\n\n```mermaid-example\narchitecture-beta\n    service left_disk(disk)[Disk]\n    service top_disk(disk)[Disk]\n    service bottom_disk(disk)[Disk]\n    service top_gateway(internet)[Gateway]\n    service bottom_gateway(internet)[Gateway]\n    junction junctionCenter\n    junction junctionRight\n\n    left_disk:R -- L:junctionCenter\n    top_disk:B -- T:junctionCenter\n    bottom_disk:T -- B:junctionCenter\n    junctionCenter:R -- L:junctionRight\n    top_gateway:B -- T:junctionRight\n    bottom_gateway:T -- B:junctionRight\n```\n\n```mermaid\narchitecture-beta\n    service left_disk(disk)[Disk]\n    service top_disk(disk)[Disk]\n    service bottom_disk(disk)[Disk]\n    service top_gateway(internet)[Gateway]\n    service bottom_gateway(internet)[Gateway]\n    junction junctionCenter\n    junction junctionRight\n\n    left_disk:R -- L:junctionCenter\n    top_disk:B -- T:junctionCenter\n    bottom_disk:T -- B:junctionCenter\n    junctionCenter:R -- L:junctionRight\n    top_gateway:B -- T:junctionRight\n    bottom_gateway:T -- B:junctionRight\n```\n\n## Configuration\n\n### `randomize` (v11.14.0+)\n\nBy default, architecture diagrams start nodes at deterministic seed positions (`randomize: false`). Setting `randomize` to `true` randomizes initial node positions before running the layout algorithm, which may produce varied but potentially better-spaced layouts on each render.\n\n> Note: `randomize: false` alone is not enough to guarantee identical renders — the underlying fcose layout still calls `Math.random()` during its constraint solver. Use the `seed` option (described below) to lock the layout fully.\n\nVia frontmatter:\n\n```\n%%{init: {"architecture": {"randomize": true}}}%%\narchitecture-beta\n    group api(cloud)[API]\n    service db(database)[Database] in api\n    service server(server)[Server] in api\n    db:R --> L:server\n```\n\nVia `mermaid.initialize()`:\n\n```javascript\nmermaid.initialize({\n  architecture: {\n    randomize: true,\n  },\n});\n```\n\n| Option      | Type    | Default | Description                                                            |\n| ----------- | ------- | ------- | ---------------------------------------------------------------------- |\n| `randomize` | boolean | `false` | Whether to randomize initial node positions before running the layout. |\n\n### Layout tuning (v11.15.0+)\n\nThe following options pass through to the underlying [fcose](https://github.com/iVis-at-Bilkent/cytoscape.js-fcose) layout so you can adjust spacing and density without changing your diagram source:\n\n| Option                      | Type   | Default | Description                                                                                                                                                                                                                                      |\n| --------------------------- | ------ | ------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |\n| `nodeSeparation`            | number | `75`    | Minimum separation, in pixels, between sibling nodes in the same group. Pass-through to fcose.                                                                                                                                                   |\n| `idealEdgeLengthMultiplier` | number | `1.5`   | Multiplier applied to `iconSize` to compute the ideal length of edges between nodes within the same group. Increase for breathing room, decrease to pack tighter. Cross-group edges are not affected.                                            |\n| `edgeElasticity`            | number | `0.45`  | Spring elasticity (0–1) on same-group edges. Higher pulls connected nodes closer; lower lets them spread out. Cross-group edges are not affected.                                                                                                |\n| `numIter`                   | number | `2500`  | Maximum fcose iterations. Increase for higher-quality layouts on large diagrams at the cost of render time.                                                                                                                                      |\n| `seed`                      | number | `1`     | Deterministic seed for fcose. Defaults to `1` so the same diagram always renders with the same layout. Set to `0` to opt out and use native (non-deterministic) `Math.random`. Any other number selects a different reproducible layout variant. |\n\nExample — bumping `idealEdgeLengthMultiplier` stretches the spacing between connected nodes in a chain:\n\n```\n%%{init: {"architecture": {"idealEdgeLengthMultiplier": 3}}}%%\narchitecture-beta\n    service a(server)[A]\n    service b(server)[B]\n    service c(server)[C]\n    a:R --> L:b\n    b:R --> L:c\n```\n\n> **Note:** these knobs tune fcose\'s force-directed layout; they do not change which nodes the layout heuristic considers adjacent. If two siblings render on top of each other because they share the same logical position in the spatial map (a known limitation tracked in [#6120](https://github.com/mermaid-js/mermaid/issues/6120)), no combination of these knobs will move them apart — see the upcoming `align row|column` directive instead.\n\n## Icons\n\nBy default, architecture diagram supports the following icons: `cloud`, `database`, `disk`, `internet`, `server`.\nUsers can use any of the 200,000+ icons available in iconify.design, or add other custom icons, by [registering an icon pack](../config/icons.md).\n\nAfter the icons are installed, they can be used in the architecture diagram by using the format "name:icon-name", where name is the value used when registering the icon pack.\n\n```mermaid-example\narchitecture-beta\n    group api(logos:aws-lambda)[API]\n\n    service db(logos:aws-aurora)[Database] in api\n    service disk1(logos:aws-glacier)[Storage] in api\n    service disk2(logos:aws-s3)[Storage] in api\n    service server(logos:aws-ec2)[Server] in api\n\n    db:L -- R:server\n    disk1:T -- B:server\n    disk2:T -- B:db\n```\n\n```mermaid\narchitecture-beta\n    group api(logos:aws-lambda)[API]\n\n    service db(logos:aws-aurora)[Database] in api\n    service disk1(logos:aws-glacier)[Storage] in api\n    service disk2(logos:aws-s3)[Storage] in api\n    service server(logos:aws-ec2)[Server] in api\n\n    db:L -- R:server\n    disk1:T -- B:server\n    disk2:T -- B:db\n```\n';
+const __vite_glob_0_19 = '> **Warning**\n>\n> ## THIS IS AN AUTOGENERATED FILE. DO NOT EDIT.\n>\n> ## Please edit the corresponding file in [/packages/mermaid/src/docs/syntax/classDiagram.md](../../packages/mermaid/src/docs/syntax/classDiagram.md).\n\n# Class diagrams\n\n> "In software engineering, a class diagram in the Unified Modeling Language (UML) is a type of static structure diagram that describes the structure of a system by showing the system\'s classes, their attributes, operations (or methods), and the relationships among objects."\n>\n> -Wikipedia\n\nThe class diagram is the main building block of object-oriented modeling. It is used for general conceptual modeling of the structure of the application, and for detailed modeling to translate the models into programming code. Class diagrams can also be used for data modeling. The classes in a class diagram represent both the main elements, interactions in the application, and the classes to be programmed.\n\nMermaid can render class diagrams.\n\n```mermaid-example\n---\ntitle: Animal example\n---\nclassDiagram\n    note "From Duck till Zebra"\n    Animal <|-- Duck\n    note for Duck "can fly<br>can swim<br>can dive<br>can help in debugging"\n    Animal <|-- Fish\n    Animal <|-- Zebra\n    Animal : +int age\n    Animal : +String gender\n    Animal: +isMammal()\n    Animal: +mate()\n    class Duck{\n        +String beakColor\n        +swim()\n        +quack()\n    }\n    class Fish{\n        -int sizeInFeet\n        -canEat()\n    }\n    class Zebra{\n        +bool is_wild\n        +run()\n    }\n```\n\n```mermaid\n---\ntitle: Animal example\n---\nclassDiagram\n    note "From Duck till Zebra"\n    Animal <|-- Duck\n    note for Duck "can fly<br>can swim<br>can dive<br>can help in debugging"\n    Animal <|-- Fish\n    Animal <|-- Zebra\n    Animal : +int age\n    Animal : +String gender\n    Animal: +isMammal()\n    Animal: +mate()\n    class Duck{\n        +String beakColor\n        +swim()\n        +quack()\n    }\n    class Fish{\n        -int sizeInFeet\n        -canEat()\n    }\n    class Zebra{\n        +bool is_wild\n        +run()\n    }\n```\n\n## Syntax\n\n### Class\n\nUML provides mechanisms to represent class members, such as attributes and methods, and additional information about them.\nA single instance of a class in the diagram contains three compartments:\n\n- The top compartment contains the name of the class. It is printed in bold and centered, and the first letter is capitalized. It may also contain optional annotation text describing the nature of the class.\n- The middle compartment contains the attributes of the class. They are left-aligned and the first letter is lowercase.\n- The bottom compartment contains the operations the class can execute. They are also left-aligned and the first letter is lowercase.\n\n```mermaid-example\n---\ntitle: Bank example\n---\nclassDiagram\n    class BankAccount\n    BankAccount : +String owner\n    BankAccount : +Bigdecimal balance\n    BankAccount : +deposit(amount)\n    BankAccount : +withdrawal(amount)\n\n```\n\n```mermaid\n---\ntitle: Bank example\n---\nclassDiagram\n    class BankAccount\n    BankAccount : +String owner\n    BankAccount : +Bigdecimal balance\n    BankAccount : +deposit(amount)\n    BankAccount : +withdrawal(amount)\n\n```\n\n## Define a class\n\nThere are two ways to define a class:\n\n- Explicitly using keyword **class** like `class Animal` which would define the Animal class.\n- Via a **relationship** which defines two classes at a time along with their relationship. For instance, `Vehicle <|-- Car`.\n\n```mermaid-example\nclassDiagram\n    class Animal\n    Vehicle <|-- Car\n```\n\n```mermaid\nclassDiagram\n    class Animal\n    Vehicle <|-- Car\n```\n\nNaming convention: a class name should be composed only of alphanumeric characters (including unicode), underscores, and dashes (-).\n\n### Class labels\n\nIn case you need to provide a label for a class, you can use the following syntax:\n\n```mermaid-example\nclassDiagram\n    class Animal["Animal with a label"]\n    class Car["Car with *! symbols"]\n    Animal --> Car\n```\n\n```mermaid\nclassDiagram\n    class Animal["Animal with a label"]\n    class Car["Car with *! symbols"]\n    Animal --> Car\n```\n\nYou can also use backticks to escape special characters in the label:\n\n```mermaid-example\nclassDiagram\n    class `Animal Class!`\n    class `Car Class`\n    `Animal Class!` --> `Car Class`\n```\n\n```mermaid\nclassDiagram\n    class `Animal Class!`\n    class `Car Class`\n    `Animal Class!` --> `Car Class`\n```\n\n## Defining Members of a class\n\nUML provides mechanisms to represent class members such as attributes and methods, as well as additional information about them.\n\nMermaid distinguishes between attributes and functions/methods based on if the **parenthesis** `()` are present or not. The ones with `()` are treated as functions/methods, and all others as attributes.\n\nThere are two ways to define the members of a class, and regardless of whichever syntax is used to define the members, the output will still be same. The two different ways are :\n\n- Associate a member of a class using **:** (colon) followed by member name, useful to define one member at a time. For example:\n\n```mermaid-example\nclassDiagram\nclass BankAccount\nBankAccount : +String owner\nBankAccount : +BigDecimal balance\nBankAccount : +deposit(amount)\nBankAccount : +withdrawal(amount)\n```\n\n```mermaid\nclassDiagram\nclass BankAccount\nBankAccount : +String owner\nBankAccount : +BigDecimal balance\nBankAccount : +deposit(amount)\nBankAccount : +withdrawal(amount)\n```\n\n- Associate members of a class using **{}** brackets, where members are grouped within curly brackets. Suitable for defining multiple members at once. For example:\n\n```mermaid-example\nclassDiagram\nclass BankAccount{\n    +String owner\n    +BigDecimal balance\n    +deposit(amount)\n    +withdrawal(amount)\n}\n```\n\n```mermaid\nclassDiagram\nclass BankAccount{\n    +String owner\n    +BigDecimal balance\n    +deposit(amount)\n    +withdrawal(amount)\n}\n```\n\n#### Return Type\n\nOptionally you can end a method/function definition with the data type that will be returned (note: there must be a space between the final `)` and the return type). An example:\n\n```mermaid-example\nclassDiagram\nclass BankAccount{\n    +String owner\n    +BigDecimal balance\n    +deposit(amount) bool\n    +withdrawal(amount) int\n}\n```\n\n```mermaid\nclassDiagram\nclass BankAccount{\n    +String owner\n    +BigDecimal balance\n    +deposit(amount) bool\n    +withdrawal(amount) int\n}\n```\n\n#### Generic Types\n\nGenerics can be represented as part of a class definition, and for class members/return types. In order to denote an item as generic, you enclose that type within `~` (**tilde**). **Nested** type declarations such as `List<List<int>>` are supported, though generics that include a comma are currently not supported. (such as `List<List<K, V>>`)\n\n> _note_ when a generic is used within a class definition, the generic type is NOT considered part of the class name. i.e.: for any syntax which required you to reference the class name, you need to drop the type part of the definition. This also means that mermaid does not currently support having two classes with the same name, but different generic types.\n\n```mermaid-example\nclassDiagram\nclass Square~Shape~{\n    int id\n    List~int~ position\n    setPoints(List~int~ points)\n    getPoints() List~int~\n}\n\nSquare : -List~string~ messages\nSquare : +setMessages(List~string~ messages)\nSquare : +getMessages() List~string~\nSquare : +getDistanceMatrix() List~List~int~~\n```\n\n```mermaid\nclassDiagram\nclass Square~Shape~{\n    int id\n    List~int~ position\n    setPoints(List~int~ points)\n    getPoints() List~int~\n}\n\nSquare : -List~string~ messages\nSquare : +setMessages(List~string~ messages)\nSquare : +getMessages() List~string~\nSquare : +getDistanceMatrix() List~List~int~~\n```\n\n#### Visibility\n\nTo describe the visibility (or encapsulation) of an attribute or method/function that is a part of a class (i.e. a class member), optional notation may be placed before that members\' name:\n\n- `+` Public\n- `-` Private\n- `#` Protected\n- `~` Package/Internal\n\n> _note_ you can also include additional _classifiers_ to a method definition by adding the following notation to the _end_ of the method, i.e.: after the `()` or after the return type:\n>\n> - `*` Abstract e.g.: `someAbstractMethod()*` or `someAbstractMethod() int*`\n> - `$` Static e.g.: `someStaticMethod()$` or `someStaticMethod() String$`\n\n> _note_ you can also include additional _classifiers_ to a field definition by adding the following notation to the very end:\n>\n> - `$` Static e.g.: `String someField$`\n\n## Defining Relationship\n\nA relationship is a general term covering the specific types of logical connections found on class and object diagrams.\n\n```\n[classA][Arrow][ClassB]\n```\n\nThere are eight different types of relations defined for classes under UML which are currently supported:\n\n| Type    | Description   |\n| ------- | ------------- |\n| `<\\|--` | Inheritance   |\n| `*--`   | Composition   |\n| `o--`   | Aggregation   |\n| `-->`   | Association   |\n| `--`    | Link (Solid)  |\n| `..>`   | Dependency    |\n| `..\\|>` | Realization   |\n| `..`    | Link (Dashed) |\n\n```mermaid-example\nclassDiagram\nclassA <|-- classB\nclassC *-- classD\nclassE o-- classF\nclassG <-- classH\nclassI -- classJ\nclassK <.. classL\nclassM <|.. classN\nclassO .. classP\n\n```\n\n```mermaid\nclassDiagram\nclassA <|-- classB\nclassC *-- classD\nclassE o-- classF\nclassG <-- classH\nclassI -- classJ\nclassK <.. classL\nclassM <|.. classN\nclassO .. classP\n\n```\n\nWe can use the labels to describe the nature of the relation between two classes. Also, arrowheads can be used in the opposite direction as well:\n\n```mermaid-example\nclassDiagram\nclassA --|> classB : Inheritance\nclassC --* classD : Composition\nclassE --o classF : Aggregation\nclassG --> classH : Association\nclassI -- classJ : Link(Solid)\nclassK ..> classL : Dependency\nclassM ..|> classN : Realization\nclassO .. classP : Link(Dashed)\n\n```\n\n```mermaid\nclassDiagram\nclassA --|> classB : Inheritance\nclassC --* classD : Composition\nclassE --o classF : Aggregation\nclassG --> classH : Association\nclassI -- classJ : Link(Solid)\nclassK ..> classL : Dependency\nclassM ..|> classN : Realization\nclassO .. classP : Link(Dashed)\n\n```\n\n### Labels on Relations\n\nIt is possible to add label text to a relation:\n\n```\n[classA][Arrow][ClassB]:LabelText\n```\n\n```mermaid-example\nclassDiagram\nclassA <|-- classB : implements\nclassC *-- classD : composition\nclassE o-- classF : aggregation\n```\n\n```mermaid\nclassDiagram\nclassA <|-- classB : implements\nclassC *-- classD : composition\nclassE o-- classF : aggregation\n```\n\n### Two-way relations\n\nRelations can logically represent an N:M association:\n\n```mermaid-example\nclassDiagram\n    Animal <|--|> Zebra\n```\n\n```mermaid\nclassDiagram\n    Animal <|--|> Zebra\n```\n\nHere is the syntax:\n\n```\n[Relation Type][Link][Relation Type]\n```\n\nWhere `Relation Type` can be one of:\n\n| Type  | Description |\n| ----- | ----------- |\n| `<\\|` | Inheritance |\n| `\\*`  | Composition |\n| `o`   | Aggregation |\n| `>`   | Association |\n| `<`   | Association |\n| `\\|>` | Realization |\n\nAnd `Link` can be one of:\n\n| Type | Description |\n| ---- | ----------- |\n| --   | Solid       |\n| ..   | Dashed      |\n\n### Lollipop Interfaces\n\nClasses can also be given a special relation type that defines a lollipop interface on the class. A lollipop interface is defined using the following syntax:\n\n- `bar ()-- foo`\n- `foo --() bar`\n\nThe interface (bar) with the lollipop connects to the class (foo).\n\nNote: Each interface that is defined is unique and is meant to not be shared between classes / have multiple edges connecting to it.\n\n```mermaid-example\nclassDiagram\n  bar ()-- foo\n```\n\n```mermaid\nclassDiagram\n  bar ()-- foo\n```\n\n```mermaid-example\nclassDiagram\n  class Class01 {\n    int amount\n    draw()\n  }\n  Class01 --() bar\n  Class02 --() bar\n\n  foo ()-- Class01\n```\n\n```mermaid\nclassDiagram\n  class Class01 {\n    int amount\n    draw()\n  }\n  Class01 --() bar\n  Class02 --() bar\n\n  foo ()-- Class01\n```\n\n## Define Namespace\n\nA namespace groups classes.\n\n```mermaid-example\nclassDiagram\nnamespace BaseShapes {\n    class Triangle\n    class Rectangle {\n      double width\n      double height\n    }\n}\n```\n\n```mermaid\nclassDiagram\nnamespace BaseShapes {\n    class Triangle\n    class Rectangle {\n      double width\n      double height\n    }\n}\n```\n\n### Namespace Labels (v11.15.0+)\n\nA namespace can be given a display label using square bracket syntax, similar to class labels:\n\n```mermaid-example\nclassDiagram\n    namespace Auth["Authentication Service"] {\n        class UserService {\n            +login()\n            +logout()\n        }\n    }\n```\n\n```mermaid\nclassDiagram\n    namespace Auth["Authentication Service"] {\n        class UserService {\n            +login()\n            +logout()\n        }\n    }\n```\n\nThe label replaces the namespace name in the rendered diagram, while the name is still used internally for relationships and nesting.\n\n### Nested Namespaces (v11.15.0+)\n\nNamespaces can be nested to represent hierarchical groupings. There are two ways to define nested namespaces:\n\n**Dot notation** creates intermediate namespaces automatically:\n\n```mermaid-example\nclassDiagram\n    namespace Company.Engineering.Backend {\n        class Developer {\n            +writeCode()\n        }\n    }\n    namespace Company.Engineering.Frontend {\n        class Designer {\n            +createMockup()\n        }\n    }\n    namespace Company.Engineering {\n        class TechLead {\n            +planSprint()\n        }\n    }\n    TechLead --> Developer : leads\n    TechLead --> Designer : leads\n```\n\n```mermaid\nclassDiagram\n    namespace Company.Engineering.Backend {\n        class Developer {\n            +writeCode()\n        }\n    }\n    namespace Company.Engineering.Frontend {\n        class Designer {\n            +createMockup()\n        }\n    }\n    namespace Company.Engineering {\n        class TechLead {\n            +planSprint()\n        }\n    }\n    TechLead --> Developer : leads\n    TechLead --> Designer : leads\n```\n\n**Syntactic nesting** places namespace blocks inside other namespace blocks:\n\n```mermaid-example\nclassDiagram\n    namespace Platform {\n        namespace Auth {\n            class UserService {\n                +login()\n                +logout()\n            }\n        }\n        namespace Data {\n            class Repository {\n                +find()\n                +save()\n            }\n        }\n        class Gateway {\n            +route()\n        }\n    }\n    Gateway --> UserService : delegates\n    Gateway --> Repository : delegates\n```\n\n```mermaid\nclassDiagram\n    namespace Platform {\n        namespace Auth {\n            class UserService {\n                +login()\n                +logout()\n            }\n        }\n        namespace Data {\n            class Repository {\n                +find()\n                +save()\n            }\n        }\n        class Gateway {\n            +route()\n        }\n    }\n    Gateway --> UserService : delegates\n    Gateway --> Repository : delegates\n```\n\nBoth approaches can be combined. Dot notation like `namespace A.B.C` will automatically create namespaces `A` and `A.B` as parents if they don\'t already exist.\n\n#### Compact rendering (`hierarchicalNamespaces: false`)\n\nBy default (`hierarchicalNamespaces: true`), each segment of a dotted or syntactically-nested namespace name renders as its own cluster, producing a nested layout.\n\nSetting `hierarchicalNamespaces: false` in the class diagram config switches to **compact mode**: only namespaces the user explicitly declares are drawn — each as a single flat box labelled with its fully-qualified name. Auto-created intermediate ancestors are skipped, and classes inside them are moved to their nearest declared namespace.\n\n```mermaid-example\n---\nconfig:\n  class:\n    hierarchicalNamespaces: false\n---\nclassDiagram\n    namespace Company.Engineering.Backend {\n        class Developer {\n            +writeCode()\n        }\n    }\n    namespace Company.Engineering.Frontend {\n        class Designer {\n            +createMockup()\n        }\n    }\n    namespace Company {\n        class CEO {\n            +makeDecisions()\n        }\n    }\n    CEO --> Developer : oversees\n    CEO --> Designer : oversees\n```\n\n```mermaid\n---\nconfig:\n  class:\n    hierarchicalNamespaces: false\n---\nclassDiagram\n    namespace Company.Engineering.Backend {\n        class Developer {\n            +writeCode()\n        }\n    }\n    namespace Company.Engineering.Frontend {\n        class Designer {\n            +createMockup()\n        }\n    }\n    namespace Company {\n        class CEO {\n            +makeDecisions()\n        }\n    }\n    CEO --> Developer : oversees\n    CEO --> Designer : oversees\n```\n\n## Cardinality / Multiplicity on relations\n\nMultiplicity or cardinality in class diagrams indicates the number of instances of one class that can be linked to an instance of the other class. For example, each company will have one or more employees (not zero), and each employee currently works for zero or one companies.\n\nMultiplicity notations are placed near the end of an association.\n\nThe different cardinality options are :\n\n- `1` Only 1\n- `0..1` Zero or One\n- `1..*` One or more\n- `*` Many\n- `n` n (where n>1)\n- `0..n` zero to n (where n>1)\n- `1..n` one to n (where n>1)\n\nCardinality can be easily defined by placing the text option within quotes `"` before or after a given arrow. For example:\n\n```\n[classA] "cardinality1" [Arrow] "cardinality2" [ClassB]:LabelText\n```\n\n```mermaid-example\nclassDiagram\n    Customer "1" --> "*" Ticket\n    Student "1" --> "1..*" Course\n    Galaxy --> "many" Star : Contains\n```\n\n```mermaid\nclassDiagram\n    Customer "1" --> "*" Ticket\n    Student "1" --> "1..*" Course\n    Galaxy --> "many" Star : Contains\n```\n\n## Annotations on classes\n\nIt is possible to annotate classes with markers to provide additional metadata about the class. This can give a clearer indication about its nature. Some common annotations include:\n\n- `<<Interface>>` To represent an Interface class\n- `<<Abstract>>` To represent an abstract class\n- `<<Service>>` To represent a service class\n- `<<Enumeration>>` To represent an enum\n\nAnnotations are defined within the opening `<<` and closing `>>`. There are three ways to add an annotation to a class, and in all cases the output will be the same:\n\n- **Inline** with the class definition:\n\n```mermaid-example\nclassDiagram\n  class Shape <<interface>>\n```\n\n```mermaid\nclassDiagram\n  class Shape <<interface>>\n```\n\n- In a **_separate line_** after a class is defined:\n\n```mermaid-example\nclassDiagram\nclass Shape\n<<interface>> Shape\nShape : noOfVertices\nShape : draw()\n```\n\n```mermaid\nclassDiagram\nclass Shape\n<<interface>> Shape\nShape : noOfVertices\nShape : draw()\n```\n\n- In a **_nested structure_** along with the class definition:\n\n```mermaid-example\nclassDiagram\nclass Shape{\n    <<interface>>\n    noOfVertices\n    draw()\n}\nclass Color{\n    <<enumeration>>\n    RED\n    BLUE\n    GREEN\n    WHITE\n    BLACK\n}\n\n```\n\n```mermaid\nclassDiagram\nclass Shape{\n    <<interface>>\n    noOfVertices\n    draw()\n}\nclass Color{\n    <<enumeration>>\n    RED\n    BLUE\n    GREEN\n    WHITE\n    BLACK\n}\n\n```\n\n## Comments\n\nComments can be entered within a class diagram, which will be ignored by the parser. Comments need to be on their own line, and must be prefaced with `%%` (double percent signs). Any text until the next newline will be treated as a comment, including any class diagram syntax.\n\n```mermaid-example\nclassDiagram\n%% This whole line is a comment classDiagram class Shape <<interface>>\nclass Shape{\n    <<interface>>\n    noOfVertices\n    draw()\n}\n```\n\n```mermaid\nclassDiagram\n%% This whole line is a comment classDiagram class Shape <<interface>>\nclass Shape{\n    <<interface>>\n    noOfVertices\n    draw()\n}\n```\n\n## Setting the direction of the diagram\n\nWith class diagrams you can use the direction statement to set the direction in which the diagram will render:\n\n```mermaid-example\nclassDiagram\n  direction RL\n  class Student {\n    -idCard : IdCard\n  }\n  class IdCard{\n    -id : int\n    -name : string\n  }\n  class Bike{\n    -id : int\n    -name : string\n  }\n  Student "1" --o "1" IdCard : carries\n  Student "1" --o "1" Bike : rides\n```\n\n```mermaid\nclassDiagram\n  direction RL\n  class Student {\n    -idCard : IdCard\n  }\n  class IdCard{\n    -id : int\n    -name : string\n  }\n  class Bike{\n    -id : int\n    -name : string\n  }\n  Student "1" --o "1" IdCard : carries\n  Student "1" --o "1" Bike : rides\n```\n\n## Interaction\n\nIt is possible to bind a click event to a node. The click can lead to either a javascript callback or to a link which will be opened in a new browser tab. **Note**: This functionality is disabled when using `securityLevel=\'strict\'` and enabled when using `securityLevel=\'loose\'`.\n\nYou would define these actions on a separate line after all classes have been declared.\n\n```\naction className "reference" "tooltip"\nclick className call callback() "tooltip"\nclick className href "url" "tooltip"\n```\n\n- _action_ is either `link` or `callback`, depending on which type of interaction you want to have called\n- _className_ is the id of the node that the action will be associated with\n- _reference_ is either the url link, or the function name for callback.\n- (_optional_) tooltip is a string to be displayed when hovering over element (note: The styles of the tooltip are set by the class .mermaidTooltip.)\n- note: callback function will be called with the nodeId as parameter.\n\n## Notes\n\nIt is possible to add notes on the diagram using `note "line1\\nline2"`. A note can be added for a specific class using `note for <CLASS NAME> "line1\\nline2"`.\n\n### Examples\n\n```mermaid-example\nclassDiagram\n    note "This is a general note"\n    note for MyClass "This is a note for a class"\n    class MyClass{\n    }\n```\n\n```mermaid\nclassDiagram\n    note "This is a general note"\n    note for MyClass "This is a note for a class"\n    class MyClass{\n    }\n```\n\n_URL Link:_\n\n```mermaid-example\nclassDiagram\nclass Shape\nlink Shape "https://www.github.com" "This is a tooltip for a link"\nclass Shape2\nclick Shape2 href "https://www.github.com" "This is a tooltip for a link"\n```\n\n```mermaid\nclassDiagram\nclass Shape\nlink Shape "https://www.github.com" "This is a tooltip for a link"\nclass Shape2\nclick Shape2 href "https://www.github.com" "This is a tooltip for a link"\n```\n\n_Callback:_\n\n```mermaid-example\nclassDiagram\nclass Shape\ncallback Shape "callbackFunction" "This is a tooltip for a callback"\nclass Shape2\nclick Shape2 call callbackFunction() "This is a tooltip for a callback"\n```\n\n```mermaid\nclassDiagram\nclass Shape\ncallback Shape "callbackFunction" "This is a tooltip for a callback"\nclass Shape2\nclick Shape2 call callbackFunction() "This is a tooltip for a callback"\n```\n\n```html\n<script>\n  const callbackFunction = function () {\n    alert(\'A callback was triggered\');\n  };\n<\/script>\n```\n\n```mermaid-example\nclassDiagram\n    class Class01\n    class Class02\n    callback Class01 "callbackFunction" "Callback tooltip"\n    link Class02 "https://www.github.com" "This is a link"\n    class Class03\n    class Class04\n    click Class03 call callbackFunction() "Callback tooltip"\n    click Class04 href "https://www.github.com" "This is a link"\n```\n\n```mermaid\nclassDiagram\n    class Class01\n    class Class02\n    callback Class01 "callbackFunction" "Callback tooltip"\n    link Class02 "https://www.github.com" "This is a link"\n    class Class03\n    class Class04\n    click Class03 call callbackFunction() "Callback tooltip"\n    click Class04 href "https://www.github.com" "This is a link"\n```\n\n> **Success** The tooltip functionality and the ability to link to urls are available from version 0.5.2.\n\nBeginner\'s tip—a full example using interactive links in an HTML page:\n\n```html\n<body>\n  <pre class="mermaid">\n    classDiagram\n    Animal <|-- Duck\n    Animal <|-- Fish\n    Animal <|-- Zebra\n    Animal : +int age\n    Animal : +String gender\n    Animal: +isMammal()\n    Animal: +mate()\n    class Duck{\n      +String beakColor\n      +swim()\n      +quack()\n      }\n    class Fish{\n      -int sizeInFeet\n      -canEat()\n      }\n    class Zebra{\n      +bool is_wild\n      +run()\n      }\n\n      callback Duck "callback" "Tooltip"\n      link Zebra "https://www.github.com" "This is a link"\n  </pre>\n\n  <script>\n    const callback = function () {\n      alert(\'A callback was triggered\');\n    };\n    const config = {\n      startOnLoad: true,\n      securityLevel: \'loose\',\n    };\n    mermaid.initialize(config);\n  <\/script>\n</body>\n```\n\n## Styling\n\n### Styling a node\n\nIt is possible to apply specific styles such as a thicker border or a different background color to an individual node using the `style` keyword.\n\nNote that notes and namespaces cannot be styled individually but do support themes.\n\n```mermaid-example\nclassDiagram\n  class Animal\n  class Mineral\n  style Animal fill:#f9f,stroke:#333,stroke-width:4px\n  style Mineral fill:#bbf,stroke:#f66,stroke-width:2px,color:#fff,stroke-dasharray: 5 5\n```\n\n```mermaid\nclassDiagram\n  class Animal\n  class Mineral\n  style Animal fill:#f9f,stroke:#333,stroke-width:4px\n  style Mineral fill:#bbf,stroke:#f66,stroke-width:2px,color:#fff,stroke-dasharray: 5 5\n```\n\n#### Classes\n\nMore convenient than defining the style every time is to define a class of styles and attach this class to the nodes that\nshould have a different look.\n\nA class definition looks like the example below:\n\n```\nclassDef className fill:#f9f,stroke:#333,stroke-width:4px;\n```\n\nAlso, it is possible to define style to multiple classes in one statement:\n\n```\nclassDef firstClassName,secondClassName font-size:12pt;\n```\n\nAttachment of a class to a node is done as per below:\n\n```\ncssClass "nodeId1" className;\n```\n\nIt is also possible to attach a class to a list of nodes in one statement:\n\n```\ncssClass "nodeId1,nodeId2" className;\n```\n\nA shorter form of adding a class is to attach the classname to the node using the `:::` operator:\n\n```mermaid-example\nclassDiagram\n    class Animal:::someclass\n    classDef someclass fill:#f96\n```\n\n```mermaid\nclassDiagram\n    class Animal:::someclass\n    classDef someclass fill:#f96\n```\n\nOr:\n\n```mermaid-example\nclassDiagram\n    class Animal:::someclass {\n        -int sizeInFeet\n        -canEat()\n    }\n    classDef someclass fill:#f96\n```\n\n```mermaid\nclassDiagram\n    class Animal:::someclass {\n        -int sizeInFeet\n        -canEat()\n    }\n    classDef someclass fill:#f96\n```\n\n### Default class\n\nIf a class is named default it will be applied to all nodes. Specific styles and classes should be defined afterwards to override the applied default styling.\n\n```\nclassDef default fill:#f9f,stroke:#333,stroke-width:4px;\n```\n\n```mermaid-example\nclassDiagram\n  class Animal:::pink\n  class Mineral\n\n  classDef default fill:#f96,color:red\n  classDef pink color:#f9f\n```\n\n```mermaid\nclassDiagram\n  class Animal:::pink\n  class Mineral\n\n  classDef default fill:#f96,color:red\n  classDef pink color:#f9f\n```\n\n### CSS Classes\n\nIt is also possible to predefine classes in CSS styles that can be applied from the graph definition as in the example\nbelow:\n\n**Example style**\n\n```html\n<style>\n  .styleClass > * > g {\n    fill: #ff0000;\n    stroke: #ffff00;\n    stroke-width: 4px;\n  }\n</style>\n```\n\n**Example definition**\n\n```mermaid-example\nclassDiagram\n    class Animal:::styleClass\n```\n\n```mermaid\nclassDiagram\n    class Animal:::styleClass\n```\n\n> cssClasses cannot be added using this shorthand method at the same time as a relation statement.\n\n## Configuration\n\n### Members Box\n\nIt is possible to hide the empty members box of a class node.\n\nThis is done by changing the **hideEmptyMembersBox** value of the class diagram configuration. For more information on how to edit the Mermaid configuration see the [configuration page.](https://mermaid.js.org/config/configuration.html)\n\n### Possible configuration parameters:\n\n| Parameter           | Description                                                  | Default value |\n| ------------------- | ------------------------------------------------------------ | ------------- |\n| hideEmptyMembersBox | Hides the empty members box of a class node when set to true | false         |\n\n```mermaid-example\n---\n  config:\n    class:\n      hideEmptyMembersBox: true\n---\nclassDiagram\n  class Duck\n```\n\n```mermaid\n---\n  config:\n    class:\n      hideEmptyMembersBox: true\n---\nclassDiagram\n  class Duck\n```\n';
+const __vite_glob_0_20 = '> **Warning**\n>\n> ## THIS IS AN AUTOGENERATED FILE. DO NOT EDIT.\n>\n> ## Please edit the corresponding file in [/packages/mermaid/src/docs/config/configuration.md](../../packages/mermaid/src/docs/config/configuration.md).\n\n# Configuration\n\nWhen mermaid starts, configuration is extracted to determine a configuration to be used for a diagram. There are 3 sources for configuration:\n\n- The default configuration\n- Overrides at the site level are set by the initialize call, and will be applied to all diagrams in the site/app. The term for this is the **siteConfig**.\n- Frontmatter (v10.5.0+) - diagram authors can update selected configuration parameters in the frontmatter of the diagram. These are applied to the render config.\n- Directives (Deprecated by Frontmatter) - diagram authors can update selected configuration parameters directly in the diagram code via directives. These are applied to the render config.\n\n**The render config** is configuration that is used when rendering by applying these configurations.\n\n## Frontmatter config\n\nThe entire mermaid configuration (except the secure configs) can be overridden by the diagram author in the frontmatter of the diagram. The frontmatter is a YAML block at the top of the diagram.\n\n```mermaid-example\n---\ntitle: Hello Title\nconfig:\n  theme: base\n  themeVariables:\n    primaryColor: "#00ff00"\n---\nflowchart\n	Hello --> World\n\n```\n\n```mermaid\n---\ntitle: Hello Title\nconfig:\n  theme: base\n  themeVariables:\n    primaryColor: "#00ff00"\n---\nflowchart\n	Hello --> World\n\n```\n\n## Theme configuration\n\n## Starting mermaid\n\n```mermaid-example\nsequenceDiagram\n	Site->>mermaid: initialize\n	Site->>mermaid: content loaded\n	mermaid->>mermaidAPI: init\n```\n\n```mermaid\nsequenceDiagram\n	Site->>mermaid: initialize\n	Site->>mermaid: content loaded\n	mermaid->>mermaidAPI: init\n```\n\n## Initialize\n\nThe initialize call is applied **only once**. It is called by the site integrator in order to override the default configuration at a site level.\n\n## configApi.reset\n\nThis method resets the configuration for a diagram to the overall site configuration, which is the configuration provided by the site integrator. Before each rendering of a diagram, reset is called at the very beginning.\n';
+const __vite_glob_0_21 = '> **Warning**\n>\n> ## THIS IS AN AUTOGENERATED FILE. DO NOT EDIT.\n>\n> ## Please edit the corresponding file in [/packages/mermaid/src/docs/config/directives.md](../../packages/mermaid/src/docs/config/directives.md).\n\n# Directives\n\n> **Warning**\n> Directives are deprecated from v10.5.0. Please use the `config` key in frontmatter to pass configuration. See [Configuration](./configuration.md) for more details.\n\n## Directives\n\nDirectives give a diagram author the capability to alter the appearance of a diagram before rendering by changing the applied configuration.\n\nThe significance of having directives is that you have them available while writing the diagram, and can modify the default global and diagram-specific configurations. So, directives are applied on top of the default configuration. The beauty of directives is that you can use them to alter configuration settings for a specific diagram, i.e. at an individual level.\n\nWhile directives allow you to change most of the default configuration settings, there are some that are not available, for security reasons. Also, you have the _option to define the set of configurations_ that you wish to allow diagram authors to override with directives.\n\n## Types of Directives options\n\nMermaid basically supports two types of configuration options to be overridden by directives.\n\n1. _General/Top Level configurations_ : These are the configurations that are available and applied to all the diagram. **Some of the most important top-level** configurations are:\n   - theme\n   - fontFamily\n   - logLevel\n   - securityLevel\n   - startOnLoad\n   - secure\n\n2. _Diagram-specific configurations_ : These are the configurations that are available and applied to a specific diagram. For each diagram there are specific configuration that will alter how that particular diagram looks and behaves.\n   For example, `mirrorActors` is a configuration that is specific to the `SequenceDiagram` and alters whether the actors are mirrored or not. So this config is available only for the `SequenceDiagram` type.\n\n**NOTE:** Not all configuration options are listed here. To get hold of all the configuration options, please refer to the [defaultConfig.ts](https://github.com/mermaid-js/mermaid/blob/develop/packages/mermaid/src/defaultConfig.ts) in the source code.\n\n> **Note**\n> We plan to publish a complete list of top-level configurations & diagram-specific configurations with their possible values in the docs soon.\n\n## Declaring directives\n\nNow that we have defined the types of configurations that are available, we can learn how to declare directives.\nA directive always starts and ends with `%%` signs with directive text in between, like `%% {directive_text} %%`.\n\nHere the structure of a directive text is like a nested key-value pair map or a JSON object with root being _init_. Where all the general configurations are defined in the top level, and all the diagram specific configurations are defined one level deeper with diagram type as key/root for that section.\n\nThe following code snippet shows the structure of a directive:\n\n```\n%%{\n  init: {\n    "theme": "dark",\n    "fontFamily": "monospace",\n    "logLevel": "info",\n    "htmlLabels": true,\n    "flowchart": {\n      "curve": "linear"\n    },\n    "sequence": {\n      "mirrorActors": true\n    }\n  }\n}%%\n```\n\nYou can also define the directives in a single line, like this:\n\n```\n%%{init: { **insert configuration options here** } }%%\n```\n\nFor example, the following code snippet:\n\n```\n%%{init: { "sequence": { "mirrorActors":false }}}%%\n```\n\n**Notes:**\nThe JSON object that is passed as {**argument**} must be valid key value pairs and encased in quotation marks or it will be ignored.\nValid Key Value pairs can be found in config.\n\nExample with a simple graph:\n\n```mermaid-example\n%%{init: { \'logLevel\': \'debug\', \'theme\': \'dark\' } }%%\ngraph LR\nA-->B\n```\n\n```mermaid\n%%{init: { \'logLevel\': \'debug\', \'theme\': \'dark\' } }%%\ngraph LR\nA-->B\n```\n\nHere the directive declaration will set the `logLevel` to `debug` and the `theme` to `dark` for a rendered mermaid diagram, changing the appearance of the diagram itself.\n\nNote: You can use \'init\' or \'initialize\' as both are acceptable as init directives. Also note that `%%init%%` and `%%initialize%%` directives will be grouped together after they are parsed.\n\n```mermaid-example\n%%{init: { \'logLevel\': \'debug\', \'theme\': \'forest\' } }%%\n%%{initialize: { \'logLevel\': \'fatal\', "theme":\'dark\', \'startOnLoad\': true } }%%\n...\n```\n\n```mermaid\n%%{init: { \'logLevel\': \'debug\', \'theme\': \'forest\' } }%%\n%%{initialize: { \'logLevel\': \'fatal\', "theme":\'dark\', \'startOnLoad\': true } }%%\n...\n```\n\nFor example, parsing the above generates a single `%%init%%` JSON object below, combining the two directives and carrying over the last value given for `loglevel`:\n\n```json\n{\n  "logLevel": "fatal",\n  "theme": "dark",\n  "startOnLoad": true\n}\n```\n\nThis will then be sent to `mermaid.initialize(...)` for rendering.\n\n## Directive Examples\n\nNow that the concept of directives has been explained, let us see some more examples of directive usage:\n\n### Changing theme via directive\n\nThe following code snippet changes `theme` to `forest`:\n\n`%%{init: { "theme": "forest" } }%%`\n\nPossible theme values are: `default`, `base`, `dark`, `forest` and `neutral`.\nDefault Value is `default`.\n\nExample:\n\n```mermaid-example\n%%{init: { "theme": "forest" } }%%\ngraph TD\nA(Forest) --> B[/Another/]\nA --> C[End]\n  subgraph section\n  B\n  C\n  end\n\n```\n\n```mermaid\n%%{init: { "theme": "forest" } }%%\ngraph TD\nA(Forest) --> B[/Another/]\nA --> C[End]\n  subgraph section\n  B\n  C\n  end\n\n```\n\n### Changing fontFamily via directive\n\nThe following code snippet changes fontFamily to Trebuchet MS, Verdana, Arial, Sans-Serif:\n\n`%%{init: { "fontFamily": "Trebuchet MS, Verdana, Arial, Sans-Serif" } }%%`\n\nExample:\n\n```mermaid-example\n%%{init: { "fontFamily": "Trebuchet MS, Verdana, Arial, Sans-Serif" } }%%\ngraph TD\nA(Forest) --> B[/Another/]\nA --> C[End]\n  subgraph section\n  B\n  C\n  end\n\n```\n\n```mermaid\n%%{init: { "fontFamily": "Trebuchet MS, Verdana, Arial, Sans-Serif" } }%%\ngraph TD\nA(Forest) --> B[/Another/]\nA --> C[End]\n  subgraph section\n  B\n  C\n  end\n\n```\n\n### Changing logLevel via directive\n\nThe following code snippet changes `logLevel` to `2`:\n\n`%%{init: { "logLevel": 2 } }%%`\n\nPossible `logLevel` values are:\n\n- `1` for _debug_,\n- `2` for _info_\n- `3` for _warn_\n- `4` for _error_\n- `5` for _only fatal errors_\n\nDefault Value is `5`.\n\nExample:\n\n```mermaid-example\n%%{init: { "logLevel": 2 } }%%\ngraph TD\nA(Forest) --> B[/Another/]\nA --> C[End]\n  subgraph section\n  B\n  C\n  end\n```\n\n```mermaid\n%%{init: { "logLevel": 2 } }%%\ngraph TD\nA(Forest) --> B[/Another/]\nA --> C[End]\n  subgraph section\n  B\n  C\n  end\n```\n\n### Changing flowchart config via directive\n\nSome common flowchart configurations are:\n\n- ~~_htmlLabels_~~: Deprecated, [prefer setting this at the root level](/config/schema-docs/config#htmllabels).\n- _curve_: linear/curve\n- _diagramPadding_: number\n- _useMaxWidth_: number\n\nFor a complete list of flowchart configurations, see [defaultConfig.ts](https://github.com/mermaid-js/mermaid/blob/develop/packages/mermaid/src/defaultConfig.ts) in the source code.\n_Soon we plan to publish a complete list of all diagram-specific configurations updated in the docs._\n\nThe following code snippet changes flowchart config:\n\n```\n%%{init: { "htmlLabels": true, "flowchart": { "curve": "linear" } } }%%\n```\n\nHere we are overriding only the flowchart config, and not the general config, setting `htmlLabels` to `true` and `curve` to `linear`.\n\n> **Warning**\n> **Deprecated:** `flowchart.htmlLabels` has been deprecated from (v11.12.3+). Use the global `htmlLabels` configuration instead. For example, instead of `"flowchart": { "htmlLabels": true }`, use `"htmlLabels": true` at the top level.\n\n```mermaid-example\n%%{init: { "flowchart": { "htmlLabels": true, "curve": "linear" } } }%%\ngraph TD\nA(Forest) --> B[/Another/]\nA --> C[End]\n  subgraph section\n  B\n  C\n  end\n```\n\n```mermaid\n%%{init: { "flowchart": { "htmlLabels": true, "curve": "linear" } } }%%\ngraph TD\nA(Forest) --> B[/Another/]\nA --> C[End]\n  subgraph section\n  B\n  C\n  end\n```\n\n### Changing Sequence diagram config via directive\n\nSome common sequence diagram configurations are:\n\n- _width_: number\n- _height_: number\n- _messageAlign_: left, center, right\n- _mirrorActors_: boolean\n- _useMaxWidth_: boolean\n- _rightAngles_: boolean\n- _showSequenceNumbers_: boolean\n- _wrap_: boolean\n\nFor a complete list of sequence diagram configurations, see [defaultConfig.ts](https://github.com/mermaid-js/mermaid/blob/develop/packages/mermaid/src/defaultConfig.ts) in the source code.\n_Soon we plan to publish a complete list of all diagram-specific configurations updated in the docs._\n\nSo, `wrap` by default has a value of `false` for sequence diagrams.\n\nLet us see an example:\n\n```mermaid-example\nsequenceDiagram\n\nAlice->Bob: Hello Bob, how are you?\nBob->Alice: Fine, how did your mother like the book I suggested? And did you catch the new book about alien invasion?\nAlice->Bob: Good.\nBob->Alice: Cool\n```\n\n```mermaid\nsequenceDiagram\n\nAlice->Bob: Hello Bob, how are you?\nBob->Alice: Fine, how did your mother like the book I suggested? And did you catch the new book about alien invasion?\nAlice->Bob: Good.\nBob->Alice: Cool\n```\n\nNow let us enable wrap for sequence diagrams.\n\nThe following code snippet changes sequence diagram config for `wrap` to `true`:\n\n`%%{init: { "sequence": { "wrap": true} } }%%`\n\nBy applying that snippet to the diagram above, `wrap` will be enabled:\n\n```mermaid-example\n%%{init: { "sequence": { "wrap": true, "width":300 } } }%%\nsequenceDiagram\nAlice->Bob: Hello Bob, how are you?\nBob->Alice: Fine, how did your mother like the book I suggested? And did you catch the new book about alien invasion?\nAlice->Bob: Good.\nBob->Alice: Cool\n```\n\n```mermaid\n%%{init: { "sequence": { "wrap": true, "width":300 } } }%%\nsequenceDiagram\nAlice->Bob: Hello Bob, how are you?\nBob->Alice: Fine, how did your mother like the book I suggested? And did you catch the new book about alien invasion?\nAlice->Bob: Good.\nBob->Alice: Cool\n```\n';
+const __vite_glob_0_22 = "> **Warning**\n>\n> ## THIS IS AN AUTOGENERATED FILE. DO NOT EDIT.\n>\n> ## Please edit the corresponding file in [/packages/mermaid/src/docs/config/layouts.md](../../packages/mermaid/src/docs/config/layouts.md).\n\n# Layouts\n\nThis page lists the available layout algorithms supported in Mermaid diagrams.\n\n## Supported Layouts\n\n- **elk**: [ELK (Eclipse Layout Kernel)](https://www.eclipse.org/elk/)\n- **tidy-tree**: Tidy tree layout for hierarchical diagrams [Tidy Tree Configuration](/config/tidy-tree)\n- **cose-bilkent**: Cose Bilkent layout for force-directed graphs\n- **dagre**: Dagre layout for layered graphs\n\n## How to Use\n\nYou can specify the layout in your diagram's YAML config or initialization options. For example:\n\n```mermaid-example\n---\nconfig:\n  layout: elk\n---\ngraph TD;\n  A-->B;\n  B-->C;\n```\n\n```mermaid\n---\nconfig:\n  layout: elk\n---\ngraph TD;\n  A-->B;\n  B-->C;\n```\n";
+const __vite_glob_0_23 = '> **Warning**\n>\n> ## THIS IS AN AUTOGENERATED FILE. DO NOT EDIT.\n>\n> ## Please edit the corresponding file in [/packages/mermaid/src/docs/config/math.md](../../packages/mermaid/src/docs/config/math.md).\n\n# Math Configuration (v10.9.0+)\n\nMermaid supports rendering mathematical expressions through the [KaTeX](https://katex.org/) typesetter.\n\n## Usage\n\nTo render math within a diagram, surround the mathematical expression with the `$$` delimiter.\n\nNote that at the moment, the only supported diagrams are below:\n\n### Flowcharts\n\n```mermaid-example\n graph LR\n      A["$$x^2$$"] -->|"$$\\sqrt{x+3}$$"| B("$$\\frac{1}{2}$$")\n      A -->|"$$\\overbrace{a+b+c}^{\\text{note}}$$"| C("$$\\pi r^2$$")\n      B --> D("$$x = \\begin{cases} a &\\text{if } b \\\\ c &\\text{if } d \\end{cases}$$")\n      C --> E("$$x(t)=c_1\\begin{bmatrix}-\\cos{t}+\\sin{t}\\\\ 2\\cos{t} \\end{bmatrix}e^{2t}$$")\n```\n\n```mermaid\n graph LR\n      A["$$x^2$$"] -->|"$$\\sqrt{x+3}$$"| B("$$\\frac{1}{2}$$")\n      A -->|"$$\\overbrace{a+b+c}^{\\text{note}}$$"| C("$$\\pi r^2$$")\n      B --> D("$$x = \\begin{cases} a &\\text{if } b \\\\ c &\\text{if } d \\end{cases}$$")\n      C --> E("$$x(t)=c_1\\begin{bmatrix}-\\cos{t}+\\sin{t}\\\\ 2\\cos{t} \\end{bmatrix}e^{2t}$$")\n```\n\n### Sequence\n\n```mermaid-example\nsequenceDiagram\n    autonumber\n    participant 1 as $$\\alpha$$\n    participant 2 as $$\\beta$$\n    1->>2: Solve: $$\\sqrt{2+2}$$\n    2-->>1: Answer: $$2$$\n    Note right of 2: $$\\sqrt{2+2}=\\sqrt{4}=2$$\n```\n\n```mermaid\nsequenceDiagram\n    autonumber\n    participant 1 as $$\\alpha$$\n    participant 2 as $$\\beta$$\n    1->>2: Solve: $$\\sqrt{2+2}$$\n    2-->>1: Answer: $$2$$\n    Note right of 2: $$\\sqrt{2+2}=\\sqrt{4}=2$$\n```\n\n## Legacy Support\n\nBy default, MathML is used for rendering mathematical expressions. If you have users on [unsupported browsers](https://caniuse.com/?search=mathml), `legacyMathML` can be set in the config to fall back to CSS rendering. Note that **you must provide KaTeX\'s stylesheets on your own** as they do not come bundled with Mermaid.\n\nExample with legacy mode enabled (the latest version of KaTeX\'s stylesheet can be found on their [docs](https://katex.org/docs/browser.html)):\n\n```html\n<!doctype html>\n<!-- KaTeX requires the use of the HTML5 doctype. Without it, KaTeX may not render properly -->\n<html lang="en">\n  <head>\n    <!-- Please ensure the stylesheet\'s version matches with the KaTeX version in your package-lock -->\n    <link\n      rel="stylesheet"\n      href="https://cdn.jsdelivr.net/npm/katex@{version_number}/dist/katex.min.css"\n      integrity="sha384-{hash}"\n      crossorigin="anonymous"\n    />\n  </head>\n\n  <body>\n    <script type="module">\n      import mermaid from \'./mermaid.esm.mjs\';\n      mermaid.initialize({\n        legacyMathML: true,\n      });\n    <\/script>\n  </body>\n</html>\n```\n\n## Handling Rendering Differences\n\nDue to differences between default fonts across operating systems and browser\'s MathML implementations, inconsistent results can be seen across platforms. If having consistent results are important, or the most optimal rendered results are desired, `forceLegacyMathML` can be enabled in the config.\n\nThis option will always use KaTeX\'s stylesheet instead of only when MathML is not supported (as with `legacyMathML`). Note that only `forceLegacyMathML` needs to be set.\n\nIf including KaTeX\'s stylesheet is not a concern, enabling this option is recommended to avoid scenarios where no MathML implementation within a browser provides the desired output (as seen below).\n\n![Image showing differences between Browsers](img/mathMLDifferences.png)\n';
+const __vite_glob_0_24 = "> **Warning**\n>\n> ## THIS IS AN AUTOGENERATED FILE. DO NOT EDIT.\n>\n> ## Please edit the corresponding file in [/packages/mermaid/src/docs/config/theming.md](../../packages/mermaid/src/docs/config/theming.md).\n\n# Theme Configuration\n\nDynamic and integrated theme configuration was introduced in Mermaid version 8.7.0.\n\nThemes can now be customized at the site-wide level, or on individual Mermaid diagrams. For site-wide theme customization, the `initialize` call is used. For diagram specific customization, frontmatter config is used.\n\n## Available Themes\n\n1. [**default**](https://github.com/mermaid-js/mermaid/blob/develop/packages/mermaid/src/themes/theme-default.js) - This is the default theme for all diagrams.\n\n2. [**neutral**](https://github.com/mermaid-js/mermaid/blob/develop/packages/mermaid/src/themes/theme-neutral.js) - This theme is great for black and white documents that will be printed.\n\n3. [**dark**](https://github.com/mermaid-js/mermaid/blob/develop/packages/mermaid/src/themes/theme-dark.js) - This theme goes well with dark-colored elements or dark-mode. To use the dark theme (which changes the theme of the schema itself) with dark-mode (which sets the background), set `darkMode` to `true` in your config.\n\n4. [**forest**](https://github.com/mermaid-js/mermaid/blob/develop/packages/mermaid/src/themes/theme-forest.js) - This theme contains shades of green.\n\n5. [**base**](https://github.com/mermaid-js/mermaid/blob/develop/packages/mermaid/src/themes/theme-base.js) - This is the only theme that can be modified. Use this theme as the base for customizations.\n\n## Site-wide Theme\n\nTo customize themes site-wide, call the `initialize` method on the `mermaid`.\n\nExample of `initialize` call setting `theme` to `base`:\n\n```javascript\nmermaid.initialize({\n  securityLevel: 'loose',\n  theme: 'base',\n});\n```\n\n## Diagram-specific Themes\n\nTo customize the theme of an individual diagram, use frontmatter config.\n\nExample of frontmatter config setting the `theme` to `forest`:\n\n```mermaid-example\n---\nconfig:\n  theme: 'forest'\n---\n  graph TD\n    a --> b\n```\n\n```mermaid\n---\nconfig:\n  theme: 'forest'\n---\n  graph TD\n    a --> b\n```\n\n> **Reminder**: the only theme that can be customized is the `base` theme. The following section covers how to use `themeVariables` for customizations.\n\n## Customizing Themes with `themeVariables`\n\nTo make a custom theme, modify `themeVariables` via frontmatter config.\n\nYou will need to use the [base](#available-themes) theme as it is the only modifiable theme.\n\n| Parameter      | Description                        | Type   | Properties                                                                          |\n| -------------- | ---------------------------------- | ------ | ----------------------------------------------------------------------------------- |\n| themeVariables | Modifiable with frontmatter config | Object | `primaryColor`, `primaryTextColor`, `lineColor` ([see full list](#theme-variables)) |\n\nExample of modifying `themeVariables` using frontmatter config:\n\n```mermaid-example\n---\nconfig:\n  theme: 'base'\n  themeVariables:\n    primaryColor: '#BB2528'\n    primaryTextColor: '#fff'\n    primaryBorderColor: '#7C0000'\n    lineColor: '#F8B229'\n    secondaryColor: '#006100'\n    tertiaryColor: '#fff'\n---\n        graph TD\n          A[Christmas] -->|Get money| B(Go shopping)\n          B --> C{Let me think}\n          B --> G[/Another/]\n          C ==>|One| D[Laptop]\n          C -->|Two| E[iPhone]\n          C -->|Three| F[fa:fa-car Car]\n          subgraph section\n            C\n            D\n            E\n            F\n            G\n          end\n```\n\n```mermaid\n---\nconfig:\n  theme: 'base'\n  themeVariables:\n    primaryColor: '#BB2528'\n    primaryTextColor: '#fff'\n    primaryBorderColor: '#7C0000'\n    lineColor: '#F8B229'\n    secondaryColor: '#006100'\n    tertiaryColor: '#fff'\n---\n        graph TD\n          A[Christmas] -->|Get money| B(Go shopping)\n          B --> C{Let me think}\n          B --> G[/Another/]\n          C ==>|One| D[Laptop]\n          C -->|Two| E[iPhone]\n          C -->|Three| F[fa:fa-car Car]\n          subgraph section\n            C\n            D\n            E\n            F\n            G\n          end\n```\n\n## Color and Color Calculation\n\nTo ensure diagram readability, the default value of certain variables is calculated or derived from other variables. For example, `primaryBorderColor` is derived from the `primaryColor` variable. So if the `primaryColor` variable is customized, Mermaid will adjust `primaryBorderColor` automatically. Adjustments can mean a color inversion, a hue change, a darkening/lightening by 10%, etc.\n\nThe theming engine will only recognize hex colors and not color names. So, the value `#ff0000` will work, but `red` will not.\n\n## Theme Variables\n\n| Variable             | Default value                      | Description                                                                                                                      |\n| -------------------- | ---------------------------------- | -------------------------------------------------------------------------------------------------------------------------------- |\n| darkMode             | false                              | Affects how derived colors are calculated. Set value to `true` for dark mode.                                                    |\n| background           | #f4f4f4                            | Used to calculate color for items that should either be background colored or contrasting to the background                      |\n| fontFamily           | trebuchet ms, verdana, arial       | Font family for diagram text                                                                                                     |\n| fontSize             | 16px                               | Font size in pixels                                                                                                              |\n| primaryColor         | #fff4dd                            | Color to be used as background in nodes, other colors will be derived from this                                                  |\n| primaryTextColor     | calculated from darkMode #ddd/#333 | Color to be used as text color in nodes using `primaryColor`                                                                     |\n| secondaryColor       | calculated from primaryColor       |                                                                                                                                  |\n| primaryBorderColor   | calculated from primaryColor       | Color to be used as border in nodes using `primaryColor`                                                                         |\n| secondaryBorderColor | calculated from secondaryColor     | Color to be used as border in nodes using `secondaryColor`                                                                       |\n| secondaryTextColor   | calculated from secondaryColor     | Color to be used as text color in nodes using `secondaryColor`                                                                   |\n| tertiaryColor        | calculated from primaryColor       |                                                                                                                                  |\n| tertiaryBorderColor  | calculated from tertiaryColor      | Color to be used as border in nodes using `tertiaryColor`                                                                        |\n| tertiaryTextColor    | calculated from tertiaryColor      | Color to be used as text color in nodes using `tertiaryColor`                                                                    |\n| noteBkgColor         | #fff5ad                            | Color used as background in notes                                                                                                |\n| noteTextColor        | #333                               | Text color in note rectangles                                                                                                    |\n| noteBorderColor      | calculated from noteBkgColor       | Border color in note rectangles                                                                                                  |\n| lineColor            | calculated from background         |                                                                                                                                  |\n| textColor            | calculated from primaryTextColor   | Text in diagram over the background for instance text on labels and on signals in sequence diagram or the title in Gantt diagram |\n| mainBkg              | calculated from primaryColor       | Background in flowchart objects like rects/circles, class diagram classes, sequence diagram etc                                  |\n| errorBkgColor        | tertiaryColor                      | Color for syntax error message                                                                                                   |\n| errorTextColor       | tertiaryTextColor                  | Color for syntax error message                                                                                                   |\n\n## Flowchart Variables\n\n| Variable            | Default value                  | Description                 |\n| ------------------- | ------------------------------ | --------------------------- |\n| nodeBorder          | primaryBorderColor             | Node Border Color           |\n| clusterBkg          | tertiaryColor                  | Background in subgraphs     |\n| clusterBorder       | tertiaryBorderColor            | Cluster Border Color        |\n| defaultLinkColor    | lineColor                      | Link Color                  |\n| titleColor          | tertiaryTextColor              | Title Color                 |\n| edgeLabelBackground | calculated from secondaryColor |                             |\n| nodeTextColor       | primaryTextColor               | Color for text inside Nodes |\n\n## Sequence Diagram Variables\n\n| Variable              | Default value                  | Description                 |\n| --------------------- | ------------------------------ | --------------------------- |\n| actorBkg              | mainBkg                        | Actor Background Color      |\n| actorBorder           | primaryBorderColor             | Actor Border Color          |\n| actorTextColor        | primaryTextColor               | Actor Text Color            |\n| actorLineColor        | actorBorder                    | Actor Line Color            |\n| signalColor           | textColor                      | Signal Color                |\n| signalTextColor       | textColor                      | Signal Text Color           |\n| labelBoxBkgColor      | actorBkg                       | Label Box Background Color  |\n| labelBoxBorderColor   | actorBorder                    | Label Box Border Color      |\n| labelTextColor        | actorTextColor                 | Label Text Color            |\n| loopTextColor         | actorTextColor                 | Loop Text Color             |\n| activationBorderColor | calculated from secondaryColor | Activation Border Color     |\n| activationBkgColor    | secondaryColor                 | Activation Background Color |\n| sequenceNumberColor   | calculated from lineColor      | Sequence Number Color       |\n\n## Pie Diagram Variables\n\n| Variable            | Default value                  | Description                                |\n| ------------------- | ------------------------------ | ------------------------------------------ |\n| pie1                | primaryColor                   | Fill for 1st section in pie diagram        |\n| pie2                | secondaryColor                 | Fill for 2nd section in pie diagram        |\n| pie3                | calculated from tertiary       | Fill for 3rd section in pie diagram        |\n| pie4                | calculated from primaryColor   | Fill for 4th section in pie diagram        |\n| pie5                | calculated from secondaryColor | Fill for 5th section in pie diagram        |\n| pie6                | calculated from tertiaryColor  | Fill for 6th section in pie diagram        |\n| pie7                | calculated from primaryColor   | Fill for 7th section in pie diagram        |\n| pie8                | calculated from primaryColor   | Fill for 8th section in pie diagram        |\n| pie9                | calculated from primaryColor   | Fill for 9th section in pie diagram        |\n| pie10               | calculated from primaryColor   | Fill for 10th section in pie diagram       |\n| pie11               | calculated from primaryColor   | Fill for 11th section in pie diagram       |\n| pie12               | calculated from primaryColor   | Fill for 12th section in pie diagram       |\n| pieTitleTextSize    | 25px                           | Title text size                            |\n| pieTitleTextColor   | taskTextDarkColor              | Title text color                           |\n| pieSectionTextSize  | 17px                           | Text size of individual section labels     |\n| pieSectionTextColor | textColor                      | Text color of individual section labels    |\n| pieLegendTextSize   | 17px                           | Text size of labels in diagram legend      |\n| pieLegendTextColor  | taskTextDarkColor              | Text color of labels in diagram legend     |\n| pieStrokeColor      | black                          | Border color of individual pie sections    |\n| pieStrokeWidth      | 2px                            | Border width of individual pie sections    |\n| pieOuterStrokeWidth | 2px                            | Border width of pie diagram's outer circle |\n| pieOuterStrokeColor | black                          | Border color of pie diagram's outer circle |\n| pieOpacity          | 0.7                            | Opacity of individual pie sections         |\n\n## State Colors\n\n| Variable      | Default value    | Description                                  |\n| ------------- | ---------------- | -------------------------------------------- |\n| labelColor    | primaryTextColor |                                              |\n| altBackground | tertiaryColor    | Used for background in deep composite states |\n\n## Class Colors\n\n| Variable  | Default value | Description                     |\n| --------- | ------------- | ------------------------------- |\n| classText | textColor     | Color of Text in class diagrams |\n\n## User Journey Colors\n\n| Variable  | Default value                  | Description                             |\n| --------- | ------------------------------ | --------------------------------------- |\n| fillType0 | primaryColor                   | Fill for 1st section in journey diagram |\n| fillType1 | secondaryColor                 | Fill for 2nd section in journey diagram |\n| fillType2 | calculated from primaryColor   | Fill for 3rd section in journey diagram |\n| fillType3 | calculated from secondaryColor | Fill for 4th section in journey diagram |\n| fillType4 | calculated from primaryColor   | Fill for 5th section in journey diagram |\n| fillType5 | calculated from secondaryColor | Fill for 6th section in journey diagram |\n| fillType6 | calculated from primaryColor   | Fill for 7th section in journey diagram |\n| fillType7 | calculated from secondaryColor | Fill for 8th section in journey diagram |\n";
+const __vite_glob_0_25 = "> **Warning**\n>\n> ## THIS IS AN AUTOGENERATED FILE. DO NOT EDIT.\n>\n> ## Please edit the corresponding file in [/packages/mermaid/src/docs/config/tidy-tree.md](../../packages/mermaid/src/docs/config/tidy-tree.md).\n\n# Tidy-tree Layout\n\nThe **tidy-tree** layout arranges nodes in a hierarchical, tree-like structure. It is especially useful for diagrams where parent-child relationships are important, such as mindmaps.\n\n## Features\n\n- Organizes nodes in a tidy, non-overlapping tree\n- Ideal for mindmaps and hierarchical data\n- Automatically adjusts spacing for readability\n\n## Example Usage\n\n```mermaid-example\n---\nconfig:\n  layout: tidy-tree\n---\nmindmap\nroot((mindmap is a long thing))\n  A\n  B\n  C\n  D\n```\n\n```mermaid\n---\nconfig:\n  layout: tidy-tree\n---\nmindmap\nroot((mindmap is a long thing))\n  A\n  B\n  C\n  D\n```\n\n```mermaid-example\n---\nconfig:\n  layout: tidy-tree\n---\nmindmap\nroot((mindmap))\n    Origins\n      Long history\n      ::icon(fa fa-book)\n      Popularisation\n        British popular psychology author Tony Buzan\n    Research\n      On effectiveness<br/>and features\n      On Automatic creation\n        Uses\n            Creative techniques\n            Strategic planning\n            Argument mapping\n```\n\n```mermaid\n---\nconfig:\n  layout: tidy-tree\n---\nmindmap\nroot((mindmap))\n    Origins\n      Long history\n      ::icon(fa fa-book)\n      Popularisation\n        British popular psychology author Tony Buzan\n    Research\n      On effectiveness<br/>and features\n      On Automatic creation\n        Uses\n            Creative techniques\n            Strategic planning\n            Argument mapping\n```\n\n## Note\n\n- Currently, tidy-tree is primarily supported for mindmap diagrams.\n";
+const __vite_glob_0_26 = '> **Warning**\n>\n> ## THIS IS AN AUTOGENERATED FILE. DO NOT EDIT.\n>\n> ## Please edit the corresponding file in [/packages/mermaid/src/docs/syntax/entityRelationshipDiagram.md](../../packages/mermaid/src/docs/syntax/entityRelationshipDiagram.md).\n\n# Entity Relationship Diagrams\n\n> An entity–relationship model (or ER model) describes interrelated things of interest in a specific domain of knowledge. A basic ER model is composed of entity types (which classify the things of interest) and specifies relationships that can exist between entities (instances of those entity types) [Wikipedia](https://en.wikipedia.org/wiki/Entity%E2%80%93relationship_model).\n\nNote that practitioners of ER modelling almost always refer to _entity types_ simply as _entities_. For example the `CUSTOMER` entity _type_ would be referred to simply as the `CUSTOMER` entity. This is so common it would be inadvisable to do anything else, but technically an entity is an abstract _instance_ of an entity type, and this is what an ER diagram shows - abstract instances, and the relationships between them. This is why entities are always named using singular nouns.\n\nMermaid can render ER diagrams\n\n```mermaid-example\n---\ntitle: Order example\n---\nerDiagram\n    CUSTOMER ||--o{ ORDER : places\n    ORDER ||--|{ LINE-ITEM : contains\n    CUSTOMER }|..|{ DELIVERY-ADDRESS : uses\n```\n\n```mermaid\n---\ntitle: Order example\n---\nerDiagram\n    CUSTOMER ||--o{ ORDER : places\n    ORDER ||--|{ LINE-ITEM : contains\n    CUSTOMER }|..|{ DELIVERY-ADDRESS : uses\n```\n\nEntity names are often capitalised, although there is no accepted standard on this, and it is not required in Mermaid.\n\nRelationships between entities are represented by lines with end markers representing cardinality. Mermaid uses the most popular crow\'s foot notation. The crow\'s foot intuitively conveys the possibility of many instances of the entity that it connects to.\n\nER diagrams can be used for various purposes, ranging from abstract logical models devoid of any implementation details, through to physical models of relational database tables. It can be useful to include attribute definitions on ER diagrams to aid comprehension of the purpose and meaning of entities. These do not necessarily need to be exhaustive; often a small subset of attributes is enough. Mermaid allows them to be defined in terms of their _type_ and _name_.\n\n```mermaid-example\nerDiagram\n    CUSTOMER ||--o{ ORDER : places\n    CUSTOMER {\n        string name\n        string custNumber\n        string sector\n    }\n    ORDER ||--|{ LINE-ITEM : contains\n    ORDER {\n        int orderNumber\n        string deliveryAddress\n    }\n    LINE-ITEM {\n        string productCode\n        int quantity\n        float pricePerUnit\n    }\n```\n\n```mermaid\nerDiagram\n    CUSTOMER ||--o{ ORDER : places\n    CUSTOMER {\n        string name\n        string custNumber\n        string sector\n    }\n    ORDER ||--|{ LINE-ITEM : contains\n    ORDER {\n        int orderNumber\n        string deliveryAddress\n    }\n    LINE-ITEM {\n        string productCode\n        int quantity\n        float pricePerUnit\n    }\n```\n\nWhen including attributes on ER diagrams, you must decide whether to include foreign keys as attributes. This probably depends on how closely you are trying to represent relational table structures. If your diagram is a _logical_ model which is not meant to imply a relational implementation, then it is better to leave these out because the associative relationships already convey the way that entities are associated. For example, a JSON data structure can implement a one-to-many relationship without the need for foreign key properties, using arrays. Similarly an object-oriented programming language may use pointers or references to collections. Even for models that are intended for relational implementation, you might decide that inclusion of foreign key attributes duplicates information already portrayed by the relationships, and does not add meaning to entities. Ultimately, it\'s your choice.\n\n## Syntax\n\n### Entities and Relationships\n\nMermaid syntax for ER diagrams is compatible with PlantUML, with an extension to label the relationship. Each statement consists of the following parts:\n\n```\n    <first-entity> [<relationship> <second-entity> : <relationship-label>]\n```\n\nWhere:\n\n- `first-entity` is the name of an entity. Names support any unicode characters and can include spaces if surrounded by double quotes (e.g. "name with space").\n- `relationship` describes the way that both entities inter-relate. See below.\n- `second-entity` is the name of the other entity.\n- `relationship-label` describes the relationship from the perspective of the first entity.\n\nFor example:\n\n```\n    PROPERTY ||--|{ ROOM : contains\n```\n\nThis statement can be read as _a property contains one or more rooms, and a room is part of one and only one property_. You can see that the label here is from the first entity\'s perspective: a property contains a room, but a room does not contain a property. When considered from the perspective of the second entity, the equivalent label is usually very easy to infer. (Some ER diagrams label relationships from both perspectives, but this is not supported here, and is usually superfluous).\n\nOnly the `first-entity` part of a statement is mandatory. This makes it possible to show an entity with no relationships, which can be useful during iterative construction of diagrams. If any other parts of a statement are specified, then all parts are mandatory.\n\n#### Unicode text\n\nEntity names, relationships, and attributes all support unicode text.\n\n```mermaid-example\nerDiagram\n    "This ❤ Unicode"\n```\n\n```mermaid\nerDiagram\n    "This ❤ Unicode"\n```\n\n#### Markdown formatting\n\nMarkdown formatting and text is also supported.\n\n```mermaid-example\nerDiagram\n    "This **is** _Markdown_"\n```\n\n```mermaid\nerDiagram\n    "This **is** _Markdown_"\n```\n\n### Relationship Syntax\n\nThe `relationship` part of each statement can be broken down into three sub-components:\n\n- the cardinality of the first entity with respect to the second\n- whether the relationship confers identity on a \'child\' entity\n- the cardinality of the second entity with respect to the first\n\nCardinality is a property that describes how many elements of another entity can be related to the entity in question. In the above example a `PROPERTY` can have one or more `ROOM` instances associated to it, whereas a `ROOM` can only be associated with one `PROPERTY`. In each cardinality marker there are two characters. The outermost character represents a maximum value, and the innermost character represents a minimum value. The table below summarises possible cardinalities.\n\n| Value (left) | Value (right) | Meaning                       |\n| :----------: | :-----------: | ----------------------------- |\n|    `\\|o`     |     `o\\|`     | Zero or one                   |\n|    `\\|\\|`    |    `\\|\\|`     | Exactly one                   |\n|     `}o`     |     `o{`      | Zero or more (no upper limit) |\n|    `}\\|`     |     `\\|{`     | One or more (no upper limit)  |\n\n**Aliases**\n\n| Value (left) | Value (right) | Alias for    |\n| :----------: | :-----------: | ------------ |\n| one or zero  |  one or zero  | Zero or one  |\n| zero or one  |  zero or one  | Zero or one  |\n| one or more  |  one or more  | One or more  |\n| one or many  |  one or many  | One or more  |\n|   many(1)    |    many(1)    | One or more  |\n|      1+      |      1+       | One or more  |\n| zero or more | zero or more  | Zero or more |\n| zero or many | zero or many  | Zero or more |\n|   many(0)    |    many(0)    | Zero or more |\n|      0+      |      0+       | Zero or more |\n|   only one   |   only one    | Exactly one  |\n|      1       |       1       | Exactly one  |\n\n### Identification\n\nRelationships may be classified as either _identifying_ or _non-identifying_ and these are rendered with either solid or dashed lines respectively. This is relevant when one of the entities in question cannot have independent existence without the other. For example a firm that insures people to drive cars might need to store data on `NAMED-DRIVER`s. In modelling this we might start out by observing that a `CAR` can be driven by many `PERSON` instances, and a `PERSON` can drive many `CAR`s - both entities can exist without the other, so this is a non-identifying relationship that we might specify in Mermaid as: `PERSON }|..|{ CAR : "driver"`. Note the two dots in the middle of the relationship that will result in a dashed line being drawn between the two entities. But when this many-to-many relationship is resolved into two one-to-many relationships, we observe that a `NAMED-DRIVER` cannot exist without both a `PERSON` and a `CAR` - the relationships become identifying and would be specified using hyphens, which translate to a solid line:\n\n| Value |     Alias for     |\n| :---: | :---------------: |\n|  --   |   _identifying_   |\n|  ..   | _non-identifying_ |\n\n**Aliases**\n\n|     Value     |     Alias for     |\n| :-----------: | :---------------: |\n|      to       |   _identifying_   |\n| optionally to | _non-identifying_ |\n\n```mermaid-example\nerDiagram\n    CAR ||--o{ NAMED-DRIVER : allows\n    PERSON }o..o{ NAMED-DRIVER : is\n```\n\n```mermaid\nerDiagram\n    CAR ||--o{ NAMED-DRIVER : allows\n    PERSON }o..o{ NAMED-DRIVER : is\n```\n\n```mermaid-example\nerDiagram\n    CAR 1 to zero or more NAMED-DRIVER : allows\n    PERSON many(0) optionally to 0+ NAMED-DRIVER : is\n```\n\n```mermaid\nerDiagram\n    CAR 1 to zero or more NAMED-DRIVER : allows\n    PERSON many(0) optionally to 0+ NAMED-DRIVER : is\n```\n\n### Attributes\n\nAttributes can be defined for entities by specifying the entity name followed by a block containing multiple `type name` pairs, where a block is delimited by an opening `{` and a closing `}`. The attributes are rendered inside the entity boxes. For example:\n\n```mermaid-example\nerDiagram\n    CAR ||--o{ NAMED-DRIVER : allows\n    CAR {\n        string registrationNumber\n        string make\n        string model\n    }\n    PERSON ||--o{ NAMED-DRIVER : is\n    PERSON {\n        string firstName\n        string lastName\n        int age\n    }\n```\n\n```mermaid\nerDiagram\n    CAR ||--o{ NAMED-DRIVER : allows\n    CAR {\n        string registrationNumber\n        string make\n        string model\n    }\n    PERSON ||--o{ NAMED-DRIVER : is\n    PERSON {\n        string firstName\n        string lastName\n        int age\n    }\n```\n\nThe `type` values must begin with an alphabetic character and may contain digits, hyphens, underscores, parentheses and square brackets. The `name` values follow a similar format to `type`, but may start with an asterisk as another option to indicate an attribute is a primary key. Other than that, there are no restrictions, and there is no implicit set of valid data types.\n\n#### Optional attribute types (v\\<MERMAID_RELEASE_VERSION>+)\n\nAttribute `type` values may end with `?` to indicate an optional or nullable type.\n\n```mermaid-example\nerDiagram\n    PERSON {\n        string firstName\n        string? middleName\n        string lastName\n    }\n```\n\n```mermaid\nerDiagram\n    PERSON {\n        string firstName\n        string? middleName\n        string lastName\n    }\n```\n\n### Entity Name Aliases\n\nAn alias can be added to an entity using square brackets. If provided, the alias will be showed in the diagram instead of the entity name. Alias names follow all of the same rules as entity names.\n\n```mermaid-example\nerDiagram\n    p[Person] {\n        string firstName\n        string lastName\n    }\n    a["Customer Account"] {\n        string email\n    }\n    p ||--o| a : has\n```\n\n```mermaid\nerDiagram\n    p[Person] {\n        string firstName\n        string lastName\n    }\n    a["Customer Account"] {\n        string email\n    }\n    p ||--o| a : has\n```\n\n#### Attribute Keys and Comments\n\nAttributes may also have a `key` or comment defined. Keys can be `PK`, `FK` or `UK`, for Primary Key, Foreign Key or Unique Key (markdown formatting and unicode is not supported for keys). To specify multiple key constraints on a single attribute, separate them with a comma (e.g., `PK, FK`). A `comment` is defined by double quotes at the end of an attribute. Comments themselves cannot have double-quote characters in them.\n\n```mermaid-example\nerDiagram\n    CAR ||--o{ NAMED-DRIVER : allows\n    CAR {\n        string registrationNumber PK\n        string make\n        string model\n        string[] parts\n    }\n    PERSON ||--o{ NAMED-DRIVER : is\n    PERSON {\n        string driversLicense PK "The license #"\n        string(99) firstName "Only 99 characters are allowed"\n        string lastName\n        string phone UK\n        int age\n    }\n    NAMED-DRIVER {\n        string carRegistrationNumber PK, FK\n        string driverLicence PK, FK\n    }\n    MANUFACTURER only one to zero or more CAR : makes\n```\n\n```mermaid\nerDiagram\n    CAR ||--o{ NAMED-DRIVER : allows\n    CAR {\n        string registrationNumber PK\n        string make\n        string model\n        string[] parts\n    }\n    PERSON ||--o{ NAMED-DRIVER : is\n    PERSON {\n        string driversLicense PK "The license #"\n        string(99) firstName "Only 99 characters are allowed"\n        string lastName\n        string phone UK\n        int age\n    }\n    NAMED-DRIVER {\n        string carRegistrationNumber PK, FK\n        string driverLicence PK, FK\n    }\n    MANUFACTURER only one to zero or more CAR : makes\n```\n\n### Direction\n\nThe direction statement declares the direction of the diagram.\n\nThis declares that the diagram is oriented from top to bottom (`TB`). This can be reversed to be oriented from bottom to top (`BT`).\n\n```mermaid-example\nerDiagram\n    direction TB\n    CUSTOMER ||--o{ ORDER : places\n    CUSTOMER {\n        string name\n        string custNumber\n        string sector\n    }\n    ORDER ||--|{ LINE-ITEM : contains\n    ORDER {\n        int orderNumber\n        string deliveryAddress\n    }\n    LINE-ITEM {\n        string productCode\n        int quantity\n        float pricePerUnit\n    }\n```\n\n```mermaid\nerDiagram\n    direction TB\n    CUSTOMER ||--o{ ORDER : places\n    CUSTOMER {\n        string name\n        string custNumber\n        string sector\n    }\n    ORDER ||--|{ LINE-ITEM : contains\n    ORDER {\n        int orderNumber\n        string deliveryAddress\n    }\n    LINE-ITEM {\n        string productCode\n        int quantity\n        float pricePerUnit\n    }\n```\n\nThis declares that the diagram is oriented from left to right (`LR`). This can be reversed to be oriented from right to left (`RL`).\n\n```mermaid-example\nerDiagram\n    direction LR\n    CUSTOMER ||--o{ ORDER : places\n    CUSTOMER {\n        string name\n        string custNumber\n        string sector\n    }\n    ORDER ||--|{ LINE-ITEM : contains\n    ORDER {\n        int orderNumber\n        string deliveryAddress\n    }\n    LINE-ITEM {\n        string productCode\n        int quantity\n        float pricePerUnit\n    }\n```\n\n```mermaid\nerDiagram\n    direction LR\n    CUSTOMER ||--o{ ORDER : places\n    CUSTOMER {\n        string name\n        string custNumber\n        string sector\n    }\n    ORDER ||--|{ LINE-ITEM : contains\n    ORDER {\n        int orderNumber\n        string deliveryAddress\n    }\n    LINE-ITEM {\n        string productCode\n        int quantity\n        float pricePerUnit\n    }\n```\n\nPossible diagram orientations are:\n\n- TB - Top to bottom\n- BT - Bottom to top\n- RL - Right to left\n- LR - Left to right\n\n### Subgraphs (v\\<MERMAID_RELEASE_VERSION>+)\n\nSubgraphs allow grouping entities into logical sections within an ER diagram. They are useful for organizing\ncomplex diagrams and improving readability.\n\nSubgraphs can contain entities, relationships, and even other subgraphs (nested subgraphs).\n\n```\nsubgraph title\n    graph definition\nend\n```\n\nAn example below:\n\n```mermaid-example\nerDiagram\n    subgraph title1\n        CUSTOMER\n        CUSTOMER {\n            string name\n            string custNumber\n            string sector\n        }\n    end\n    subgraph title2\n        CAR ||--o{ NAMED-DRIVER : allows\n        subgraph title3\n            PERSON\n            PERSON {\n                string firstName\n                string lastName\n                int age\n            }\n        end\n    end\n```\n\n```mermaid\nerDiagram\n    subgraph title1\n        CUSTOMER\n        CUSTOMER {\n            string name\n            string custNumber\n            string sector\n        }\n    end\n    subgraph title2\n        CAR ||--o{ NAMED-DRIVER : allows\n        subgraph title3\n            PERSON\n            PERSON {\n                string firstName\n                string lastName\n                int age\n            }\n        end\n    end\n```\n\nA subgraph always has an `id`, and optionally a `title`.\n\nIf the subgraph name is a single word, it is used as both id and title:\n\n```mermaid-example\nerDiagram\n    subgraph title1\n        CUSTOMER\n    end\n```\n\n```mermaid\nerDiagram\n    subgraph title1\n        CUSTOMER\n    end\n```\n\nIf the subgraph identifier contains more than one word, it must be written in `quotes`. In this case, the quoted value is used both as the id and the title.\n\n```mermaid-example\nerDiagram\n    subgraph "Customer Domain"\n        CUSTOMER\n    end\n```\n\n```mermaid\nerDiagram\n    subgraph "Customer Domain"\n        CUSTOMER\n    end\n```\n\nYou can also set an explicit id for the subgraph.\n\n```mermaid-example\nerDiagram\n    subgraph id1 [title 1]\n        CUSTOMER\n    end\n```\n\n```mermaid\nerDiagram\n    subgraph id1 [title 1]\n        CUSTOMER\n    end\n```\n\n> **Note**\n> Subgraphs are always referenced by their id, never by their title.\n>\n> This is important when defining relationships involving subgraphs.\n>\n> **If a subgraph id contains spaces, it must be referenced using quotes:**\n>\n> `"Customer Domain" ||--o{ ORDER : contains`\n\n#### Relationships involving subgraphs\n\nIt is also possible to define relationships to and from subgraphs.\n\n```mermaid-example\nerDiagram\n    subgraph title1\n        A1 ||--|| A2 : links\n    end\n\n    subgraph title2\n        B1 ||--|| B2 : links\n    end\n\n    subgraph title3\n        C1 ||--|| C2 : links\n    end\n\n    title1 ||--|| title2 : links\n    title2 ||--|| title3 : links\n    title2 ||--|| C2 : links\n```\n\n```mermaid\nerDiagram\n    subgraph title1\n        A1 ||--|| A2 : links\n    end\n\n    subgraph title2\n        B1 ||--|| B2 : links\n    end\n\n    subgraph title3\n        C1 ||--|| C2 : links\n    end\n\n    title1 ||--|| title2 : links\n    title2 ||--|| title3 : links\n    title2 ||--|| C2 : links\n```\n\n#### Direction in subgraphs\n\nA subgraph can define its own layout direction.\n\n```mermaid-example\nerDiagram\n    direction LR\n    subgraph TOP\n        direction TB\n        subgraph B1\n            direction RL\n            I1 ||--|| F1 : links\n        end\n        subgraph B2\n            direction BT\n            I2 ||--|| F2 : links\n        end\n    end\n    A ||--|| TOP : links\n    TOP ||--|| B : links\n    B1 ||--|| B2 : links\n```\n\n```mermaid\nerDiagram\n    direction LR\n    subgraph TOP\n        direction TB\n        subgraph B1\n            direction RL\n            I1 ||--|| F1 : links\n        end\n        subgraph B2\n            direction BT\n            I2 ||--|| F2 : links\n        end\n    end\n    A ||--|| TOP : links\n    TOP ||--|| B : links\n    B1 ||--|| B2 : links\n```\n\n### Styling a node\n\nIt is possible to apply specific styles such as a thicker border or a different background color to a node.\n\n```mermaid-example\nerDiagram\n    id1||--||id2 : label\n    style id1 fill:#f9f,stroke:#333,stroke-width:4px\n    style id2 fill:#bbf,stroke:#f66,stroke-width:2px,color:#fff,stroke-dasharray: 5 5\n```\n\n```mermaid\nerDiagram\n    id1||--||id2 : label\n    style id1 fill:#f9f,stroke:#333,stroke-width:4px\n    style id2 fill:#bbf,stroke:#f66,stroke-width:2px,color:#fff,stroke-dasharray: 5 5\n```\n\nIt is also possible to attach styles to a list of nodes in one statement:\n\n```\n    style nodeId1,nodeId2 styleList\n```\n\n#### Classes\n\nMore convenient than defining the style every time is to define a class of styles and attach this class to the nodes that\nshould have a different look.\n\nA class definition looks like the example below:\n\n```\n    classDef className fill:#f9f,stroke:#333,stroke-width:4px\n```\n\nIt is also possible to define multiple classes in one statement:\n\n```\n    classDef firstClassName,secondClassName font-size:12pt\n```\n\nAttachment of a class to a node is done as per below:\n\n```\n    class nodeId1 className\n```\n\nIt is also possible to attach a class to a list of nodes in one statement:\n\n```\n    class nodeId1,nodeId2 className\n```\n\nMultiple classes can be attached at the same time as well:\n\n```\n    class nodeId1,nodeId2 className1,className2\n```\n\nA shorter form of adding a class is to attach the classname to the node using the `:::`operator as per below:\n\n```mermaid-example\nerDiagram\n    direction TB\n    CAR:::someclass {\n        string registrationNumber\n        string make\n        string model\n    }\n    PERSON:::someclass {\n        string firstName\n        string lastName\n        int age\n    }\n    HOUSE:::someclass\n\n    classDef someclass fill:#f96\n```\n\n```mermaid\nerDiagram\n    direction TB\n    CAR:::someclass {\n        string registrationNumber\n        string make\n        string model\n    }\n    PERSON:::someclass {\n        string firstName\n        string lastName\n        int age\n    }\n    HOUSE:::someclass\n\n    classDef someclass fill:#f96\n```\n\nThis form can be used when declaring relationships between entities:\n\n```mermaid-example\nerDiagram\n    CAR {\n        string registrationNumber\n        string make\n        string model\n    }\n    PERSON {\n        string firstName\n        string lastName\n        int age\n    }\n    PERSON:::foo ||--|| CAR : owns\n    PERSON o{--|| HOUSE:::bar : has\n\n    classDef foo stroke:#f00\n    classDef bar stroke:#0f0\n    classDef foobar stroke:#00f\n```\n\n```mermaid\nerDiagram\n    CAR {\n        string registrationNumber\n        string make\n        string model\n    }\n    PERSON {\n        string firstName\n        string lastName\n        int age\n    }\n    PERSON:::foo ||--|| CAR : owns\n    PERSON o{--|| HOUSE:::bar : has\n\n    classDef foo stroke:#f00\n    classDef bar stroke:#0f0\n    classDef foobar stroke:#00f\n```\n\nSimilar to the class statement, the shorthand syntax can also apply multiple classes at once:\n\n```\n    nodeId:::className1,className2\n```\n\n### Default class\n\nIf a class is named default it will be assigned to all classes without specific class definitions.\n\n```\n    classDef default fill:#f9f,stroke:#333,stroke-width:4px;\n```\n\n> **Note:** Custom styles from style or other class statements take priority and will overwrite the default styles. (e.g. The `default` class gives nodes a background color of pink but the `blue` class will give that node a background color of blue if applied.)\n\n```mermaid-example\nerDiagram\n    CAR {\n        string registrationNumber\n        string make\n        string model\n    }\n    PERSON {\n        string firstName\n        string lastName\n        int age\n    }\n    PERSON:::foo ||--|| CAR : owns\n    PERSON o{--|| HOUSE:::bar : has\n\n    classDef default fill:#f9f,stroke-width:4px\n    classDef foo stroke:#f00\n    classDef bar stroke:#0f0\n    classDef foobar stroke:#00f\n```\n\n```mermaid\nerDiagram\n    CAR {\n        string registrationNumber\n        string make\n        string model\n    }\n    PERSON {\n        string firstName\n        string lastName\n        int age\n    }\n    PERSON:::foo ||--|| CAR : owns\n    PERSON o{--|| HOUSE:::bar : has\n\n    classDef default fill:#f9f,stroke-width:4px\n    classDef foo stroke:#f00\n    classDef bar stroke:#0f0\n    classDef foobar stroke:#00f\n```\n\n## Configuration\n\n### Layout\n\nThe layout of the diagram is handled by [`render()`](../config/setup/mermaid/interfaces/Mermaid.md#render). The default layout is dagre.\n\nFor larger or more-complex diagrams, you can alternatively apply the ELK (Eclipse Layout Kernel) layout using your YAML frontmatter\'s `config`. For more information, see [Customizing ELK Layout](../intro/syntax-reference.md#customizing-elk-layout).\n\n```yaml\n---\nconfig:\n  layout: elk\n---\n```\n\nYour Mermaid code should be similar to the following:\n\n```mermaid-example\n---\ntitle: Order example\nconfig:\n    layout: elk\n---\nerDiagram\n    CUSTOMER ||--o{ ORDER : places\n    ORDER ||--|{ LINE-ITEM : contains\n    CUSTOMER }|..|{ DELIVERY-ADDRESS : uses\n```\n\n```mermaid\n---\ntitle: Order example\nconfig:\n    layout: elk\n---\nerDiagram\n    CUSTOMER ||--o{ ORDER : places\n    ORDER ||--|{ LINE-ITEM : contains\n    CUSTOMER }|..|{ DELIVERY-ADDRESS : uses\n```\n\n> **Note**\n> Note that the site needs to use mermaid version 9.4+ for this to work and have this featured enabled in the lazy-loading configuration.\n\n<!--- cspell:locale en,en-gb --->\n';
+const __vite_glob_0_27 = "> **Warning**\n>\n> ## THIS IS AN AUTOGENERATED FILE. DO NOT EDIT.\n>\n> ## Please edit the corresponding file in [/packages/mermaid/src/docs/syntax/eventmodeling.md](../../packages/mermaid/src/docs/syntax/eventmodeling.md).\n\n# Event Modeling Diagram (v11.15.0+)\n\n## Introduction\n\n> **Event Modeling** (EM) is a method of describing systems using an example of how information has changed within them over time. Event Modeling specifically omits transient details and looks at what the information flow is and what the user sees at any particular point in time.\n\nYou can read more at [Event Modeling web page](https://eventmodeling.org/).\n\nEvent Modeling diagram is composed of a few main entities:\n\n- Trigger - UI and Processor\n- Command\n- View / Read Model\n- Event\n\nEntities are organized in swimlanes forming a timeline usually based on the following patterns:\n\n- State View\n- State Change\n- Translation\n- Automation\n\nYou can find more details in the [cheat sheet](https://eventmodeling.org/posts/event-modeling-cheatsheet/).\n\nThe purpose of the Domain Specific Language (DSL) supporting the drawing of the Event Modeling diagram is the rapid creation. Relations among the entities are inferred by default, so the distraction while you design is limited. Further detail to the entities can be added gradually.\n\nThe grammar for the DSL is also maintained in a [separate project](https://github.com/lgazo/event-modeling-dsl) with the intention to provide also different types of output, VS Code (and potentially other) IDEs, etc.\n\n## Basic Syntax\n\nThe DSL supports two types of syntaxes - compact and relaxed one. Both will be mentioned in the examples and both can be used interchangeably.\n\n### Timeline\n\nThe timeline is the key part of the diagram and it is composed of **Time Frame** definitions. Speedy Time Frame typing is the key of the compact notation. For compact notation you type the `tf` token. For the relaxed notation you type `timeframe` token.\n\n```md\neventmodeling\n\ntf 01 ui CartUI\ntf 02 cmd AddItem\ntf 03 evt ItemAdded\n```\n\nrendering to\n\n```mermaid-example\neventmodeling\n\ntf 01 ui CartUI\ntf 02 cmd AddItem\ntf 03 evt ItemAdded\n```\n\n```mermaid\neventmodeling\n\ntf 01 ui CartUI\ntf 02 cmd AddItem\ntf 03 evt ItemAdded\n```\n\nEach Time Frame is referenced by a **unique number** in order to distinguish one from another and also to be able to reference it when needed. Depending on the complexity of the diagram it should be enough to have just two digit number or more. Imagine you are typing a BASIC program on your ZX Spectrum always starting with a two digit number, but the order of the numbers does not matter, just the uniqueness in the whole timeline.\n\nThe Time Frame also contains an **Entity Identifier**, e.g. in case of `01` Time Frame it is `CartUI`. One Entity Identifier can be used multiple times in the timeline for example when you want to express invocations of the same event in different points in time.\n\nRelaxed notation would look like this:\n\n```md\neventmodeling\n\ntimeframe 01 ui CartUI\ntimeframe 02 command AddItem\ntimeframe 03 event ItemAdded\n```\n\n### Inline data\n\nIt is possible to provide data examples for individual Time Frames. An Inline Data is wrapped in curly brackets on the same line as the Time Frame.\n\nCompact version:\n\n```mermaid-example\neventmodeling\n\ntf 01 ui CartUI\ntf 02 cmd AddItem { description: string }\ntf 03 evt ItemAdded { description: string }\n```\n\n```mermaid\neventmodeling\n\ntf 01 ui CartUI\ntf 02 cmd AddItem { description: string }\ntf 03 evt ItemAdded { description: string }\n```\n\nRelaxed version:\n\n```mermaid-example\neventmodeling\n\ntimeframe 01 ui CartUI\ntimeframe 02 command AddItem { description: string }\ntimeframe 03 event ItemAdded { description: string }\n```\n\n```mermaid\neventmodeling\n\ntimeframe 01 ui CartUI\ntimeframe 02 command AddItem { description: string }\ntimeframe 03 event ItemAdded { description: string }\n```\n\n### Data block\n\nIf you need to provide more complex data description, you can define the **Data Block** separately. Data Block is referenced from a Time Frame by providing the identifier inside of double-square brackets `[[identifier]]`, similar to wiki links convention in Markdown.\n\nIn case the same entity is repeated you need to uniquely identify the data blocks, therefore the Data Block identifier is suffixed with a number.\n\nCompact version:\n\n```mermaid-example\neventmodeling\n\ntf 01 ui CartUI\ntf 02 cmd AddItem [[AddItem01]]\ntf 03 evt ItemAdded [[ItemAdded]]\ntf 04 cmd AddItem [[AddItem02]]\ntf 05 evt ItemAdded [[ItemAdded]]\n\ndata AddItem01 {\n  description: 'john'\n  image: 'avatar_john'\n  price: 20.4\n}\n\ndata AddItem02 {\n  description: 'jack'\n  image: 'avatar_jack'\n  price: 12.5\n}\n\ndata ItemAdded {\n  description: string\n  image: string\n  price: number\n}\n```\n\n```mermaid\neventmodeling\n\ntf 01 ui CartUI\ntf 02 cmd AddItem [[AddItem01]]\ntf 03 evt ItemAdded [[ItemAdded]]\ntf 04 cmd AddItem [[AddItem02]]\ntf 05 evt ItemAdded [[ItemAdded]]\n\ndata AddItem01 {\n  description: 'john'\n  image: 'avatar_john'\n  price: 20.4\n}\n\ndata AddItem02 {\n  description: 'jack'\n  image: 'avatar_jack'\n  price: 12.5\n}\n\ndata ItemAdded {\n  description: string\n  image: string\n  price: number\n}\n```\n\nRelaxed version:\n\n```mermaid-example\neventmodeling\n\ntimeframe 01 ui CartUI\ntimeframe 02 command AddItem [[AddItem01]]\ntimeframe 03 event ItemAdded [[ItemAdded]]\ntimeframe 04 command AddItem [[AddItem02]]\ntimeframe 05 event ItemAdded [[ItemAdded]]\n\ndata AddItem01 {\n  description: 'john'\n  image: 'avatar_john'\n  price: 20.4\n}\n\ndata AddItem02 {\n  description: 'jack'\n  image: 'avatar_jack'\n  price: 12.5\n}\n\ndata ItemAdded {\n  description: string\n  image: string\n  price: number\n}\n```\n\n```mermaid\neventmodeling\n\ntimeframe 01 ui CartUI\ntimeframe 02 command AddItem [[AddItem01]]\ntimeframe 03 event ItemAdded [[ItemAdded]]\ntimeframe 04 command AddItem [[AddItem02]]\ntimeframe 05 event ItemAdded [[ItemAdded]]\n\ndata AddItem01 {\n  description: 'john'\n  image: 'avatar_john'\n  price: 20.4\n}\n\ndata AddItem02 {\n  description: 'jack'\n  image: 'avatar_jack'\n  price: 12.5\n}\n\ndata ItemAdded {\n  description: string\n  image: string\n  price: number\n}\n```\n\n### Resetting the flow\n\nBy default the diagram builds the relations based on the inference. But modeling a more complex business flow requires to break such inference from time to time. For that you can use a different type of Time Frame called **Reset Frame**. It is represented by a `rf` / `resetframe` token.\n\nCompact version:\n\n```mermaid-example\neventmodeling\n\ntf 01 ui CartUI\ntf 02 cmd AddItem\ntf 03 evt ItemAdded\n\nrf 04 evt External.InventoryChanged\ntf 05 pcr InventoryProcessor\ntf 06 cmd ChangeInventory\ntf 07 evt Cart.InventoryChanged\n```\n\n```mermaid\neventmodeling\n\ntf 01 ui CartUI\ntf 02 cmd AddItem\ntf 03 evt ItemAdded\n\nrf 04 evt External.InventoryChanged\ntf 05 pcr InventoryProcessor\ntf 06 cmd ChangeInventory\ntf 07 evt Cart.InventoryChanged\n```\n\nRelaxed version:\n\n```mermaid-example\neventmodeling\n\ntimeframe 01 ui CartUI\ntimeframe 02 command AddItem\ntimeframe 03 event ItemAdded\n\nresetframe 04 event External.InventoryChanged\ntimeframe 05 processor InventoryProcessor\ntimeframe 06 command ChangeInventory\ntimeframe 07 event Cart.InventoryChanged\n```\n\n```mermaid\neventmodeling\n\ntimeframe 01 ui CartUI\ntimeframe 02 command AddItem\ntimeframe 03 event ItemAdded\n\nresetframe 04 event External.InventoryChanged\ntimeframe 05 processor InventoryProcessor\ntimeframe 06 command ChangeInventory\ntimeframe 07 event Cart.InventoryChanged\n```\n\n### Multiple relations\n\nThere are situations where you need to specify multiple relations for an entity. For example when a **Read Model** is built of multiple **Events**. You can use `->>` token for that.\n\n```mermaid-example\neventmodeling\n\nrf 02 evt CartCreated\nrf 03 evt ItemAdded\nrf 04 evt ItemRemoved\nrf 05 evt CartCleared\ntf 01 rmo CartUI ->> 02 ->> 03 ->> 04 ->> 05\n```\n\n```mermaid\neventmodeling\n\nrf 02 evt CartCreated\nrf 03 evt ItemAdded\nrf 04 evt ItemRemoved\nrf 05 evt CartCleared\ntf 01 rmo CartUI ->> 02 ->> 03 ->> 04 ->> 05\n```\n\n## Event Modeling patterns\n\nThis chapter briefly summarizes each Event Modeling pattern.\n\n### State Change\n\n```mermaid-example\neventmodeling\n\ntf 01 ui CartUI\ntf 02 cmd AddItem\ntf 03 evt ItemAdded\n```\n\n```mermaid\neventmodeling\n\ntf 01 ui CartUI\ntf 02 cmd AddItem\ntf 03 evt ItemAdded\n```\n\n### State View\n\n```mermaid-example\neventmodeling\n\ntf 03 evt ItemAdded\ntf 02 rmo CartItems\ntf 04 ui CartUI\n```\n\n```mermaid\neventmodeling\n\ntf 03 evt ItemAdded\ntf 02 rmo CartItems\ntf 04 ui CartUI\n```\n\n### Translation\n\n```mermaid-example\neventmodeling\n\ntf 03 evt External.InventoryChanged\ntf 02 pcr InventoryProcessor\ntf 04 cmd ChangeInventory\ntf 05 evt Cart.InventoryChanged\n```\n\n```mermaid\neventmodeling\n\ntf 03 evt External.InventoryChanged\ntf 02 pcr InventoryProcessor\ntf 04 cmd ChangeInventory\ntf 05 evt Cart.InventoryChanged\n```\n\n## Details of the Syntax\n\n### Entity types\n\nEntity type is determined by the third column in the Time Frame grammar.\n\nCompact version:\n\n```md\ntf 01 pcr InventoryProcessor\n```\n\nRelaxed version:\n\n```md\ntimeframe 01 processor InventoryProcessor\n```\n\nEntities are assigned to default swimlanes unless a **Namespace** is specified in the Entity Identifier.\n\nThere are the following types available:\n\n- `ui`: UI - belongs to UI/Automation swimlane\n- `pcr` / `processor`: Processor - belongs to UI/Automation swimlane\n- `cmd` / `command`: Command - belongs to Command/Read Model swimlane\n- `rmo` / `readmodel`: Read Model - belongs to Command/Read Model swimlane\n- `evt` / `event`: Event - belongs to Events swimlane\n\n### Swimlanes and Namespaces\n\nThere are three basic **Swimlanes** inferred from the Entity Type.\n\n- UI/Automation\n- Command/Read Model\n- Events\n\nAs your diagram grows and you explore the depths of a particular software system, you want to categorize your Entities as well. In order to do that, you can use **Namespace** identifier as part of the Entity Identifier.\n\n```md\nInventory.InventoryChanged\n```\n\n**Namespace** is the first part before the `.` of the Entity Identifier. Each combination of the Namespace and Entity type forms new Swimlane. The order how they are specified in the text definition specifies the order of the Swimlanes in the diagram.\n\n```mermaid-example\neventmodeling\n\nrf 01 evt Inventory.InventoryChanged\nrf 02 evt External.InventoryChanged\n```\n\n```mermaid\neventmodeling\n\nrf 01 evt Inventory.InventoryChanged\nrf 02 evt External.InventoryChanged\n```\n\n### Data block data types\n\nA **Data** is always wrapped in curly brackets. It can be prepended by a data type in backticks. The pattern applies for **Inline Data** as well as for **Data Block**.\n\n```md\ntf 01 rmo UserAdded `json`{ \"name\": \"foo\" }\n```\n\nor for Data Block\n\n```md\ndata UserAdded01 `json`{\n\"name\": \"foo\"\n}\n```\n\n> **Warning**\n> There is no special treatment in the diagram renderer at the moment for a specific data type.\n\nSupported types are:\n\n- `json`\n- `jsobj`\n- `figma`\n- `salt`\n- `uri`\n- `md`\n- `html`\n- `text`\n";
+const __vite_glob_0_28 = '> **Warning**\n>\n> ## THIS IS AN AUTOGENERATED FILE. DO NOT EDIT.\n>\n> ## Please edit the corresponding file in [/packages/mermaid/src/docs/syntax/examples.md](../../packages/mermaid/src/docs/syntax/examples.md).\n\n# Examples\n\nThis page contains a collection of examples of diagrams and charts that can be created through mermaid and its myriad applications.\n\n**If you wish to learn how to support mermaid on your webpage, read the [Beginner\'s Guide](../config/usage.md?id=usage).**\n\n**If you wish to learn about mermaid\'s syntax, Read the [Diagram Syntax](../syntax/flowchart.md?id=flowcharts-basic-syntax) section.**\n\n## Basic Pie Chart\n\n```mermaid-example\npie title NETFLIX\n         "Time spent looking for movie" : 90\n         "Time spent watching it" : 10\n```\n\n```mermaid\npie title NETFLIX\n         "Time spent looking for movie" : 90\n         "Time spent watching it" : 10\n```\n\n```mermaid-example\npie title What Voldemort doesn\'t have?\n         "FRIENDS" : 2\n         "FAMILY" : 3\n         "NOSE" : 45\n```\n\n```mermaid\npie title What Voldemort doesn\'t have?\n         "FRIENDS" : 2\n         "FAMILY" : 3\n         "NOSE" : 45\n```\n\n## Basic sequence diagram\n\n```mermaid-example\nsequenceDiagram\n    Alice ->> Bob: Hello Bob, how are you?\n    Bob-->>John: How about you John?\n    Bob--x Alice: I am good thanks!\n    Bob-x John: I am good thanks!\n    Note right of John: Bob thinks a long<br/>long time, so long<br/>that the text does<br/>not fit on a row.\n\n    Bob-->Alice: Checking with John...\n    Alice->John: Yes... John, how are you?\n```\n\n```mermaid\nsequenceDiagram\n    Alice ->> Bob: Hello Bob, how are you?\n    Bob-->>John: How about you John?\n    Bob--x Alice: I am good thanks!\n    Bob-x John: I am good thanks!\n    Note right of John: Bob thinks a long<br/>long time, so long<br/>that the text does<br/>not fit on a row.\n\n    Bob-->Alice: Checking with John...\n    Alice->John: Yes... John, how are you?\n```\n\n## Basic flowchart\n\n```mermaid-example\ngraph LR\n    A[Square Rect] -- Link text --> B((Circle))\n    A --> C(Round Rect)\n    B --> D{Rhombus}\n    C --> D\n```\n\n```mermaid\ngraph LR\n    A[Square Rect] -- Link text --> B((Circle))\n    A --> C(Round Rect)\n    B --> D{Rhombus}\n    C --> D\n```\n\n## Larger flowchart with some styling\n\n```mermaid-example\ngraph TB\n    sq[Square shape] --> ci((Circle shape))\n\n    subgraph A\n        od>Odd shape]-- Two line<br/>edge comment --> ro\n        di{Diamond with <br/> line break} -.-> ro(Rounded<br>square<br>shape)\n        di==>ro2(Rounded square shape)\n    end\n\n    %% Notice that no text in shape are added here instead that is appended further down\n    e --> od3>Really long text with linebreak<br>in an Odd shape]\n\n    %% Comments after double percent signs\n    e((Inner / circle<br>and some odd <br>special characters)) --> f(,.?!+-*ز)\n\n    cyr[Cyrillic]-->cyr2((Circle shape Начало));\n\n     classDef green fill:#9f6,stroke:#333,stroke-width:2px;\n     classDef orange fill:#f96,stroke:#333,stroke-width:4px;\n     class sq,e green\n     class di orange\n```\n\n```mermaid\ngraph TB\n    sq[Square shape] --> ci((Circle shape))\n\n    subgraph A\n        od>Odd shape]-- Two line<br/>edge comment --> ro\n        di{Diamond with <br/> line break} -.-> ro(Rounded<br>square<br>shape)\n        di==>ro2(Rounded square shape)\n    end\n\n    %% Notice that no text in shape are added here instead that is appended further down\n    e --> od3>Really long text with linebreak<br>in an Odd shape]\n\n    %% Comments after double percent signs\n    e((Inner / circle<br>and some odd <br>special characters)) --> f(,.?!+-*ز)\n\n    cyr[Cyrillic]-->cyr2((Circle shape Начало));\n\n     classDef green fill:#9f6,stroke:#333,stroke-width:2px;\n     classDef orange fill:#f96,stroke:#333,stroke-width:4px;\n     class sq,e green\n     class di orange\n```\n\n## SequenceDiagram: Loops, alt and opt\n\n```mermaid-example\nsequenceDiagram\n    loop Daily query\n        Alice->>Bob: Hello Bob, how are you?\n        alt is sick\n            Bob->>Alice: Not so good :(\n        else is well\n            Bob->>Alice: Feeling fresh like a daisy\n        end\n\n        opt Extra response\n            Bob->>Alice: Thanks for asking\n        end\n    end\n```\n\n```mermaid\nsequenceDiagram\n    loop Daily query\n        Alice->>Bob: Hello Bob, how are you?\n        alt is sick\n            Bob->>Alice: Not so good :(\n        else is well\n            Bob->>Alice: Feeling fresh like a daisy\n        end\n\n        opt Extra response\n            Bob->>Alice: Thanks for asking\n        end\n    end\n```\n\n## SequenceDiagram: Message to self in loop\n\n```mermaid-example\nsequenceDiagram\n    participant Alice\n    participant Bob\n    Alice->>John: Hello John, how are you?\n    loop HealthCheck\n        John->>John: Fight against hypochondria\n    end\n    Note right of John: Rational thoughts<br/>prevail...\n    John-->>Alice: Great!\n    John->>Bob: How about you?\n    Bob-->>John: Jolly good!\n```\n\n```mermaid\nsequenceDiagram\n    participant Alice\n    participant Bob\n    Alice->>John: Hello John, how are you?\n    loop HealthCheck\n        John->>John: Fight against hypochondria\n    end\n    Note right of John: Rational thoughts<br/>prevail...\n    John-->>Alice: Great!\n    John->>Bob: How about you?\n    Bob-->>John: Jolly good!\n```\n\n## Sequence Diagram: Blogging app service communication\n\n```mermaid-example\nsequenceDiagram\n    participant web as Web Browser\n    participant blog as Blog Service\n    participant account as Account Service\n    participant mail as Mail Service\n    participant db as Storage\n\n    Note over web,db: The user must be logged in to submit blog posts\n    web->>+account: Logs in using credentials\n    account->>db: Query stored accounts\n    db->>account: Respond with query result\n\n    alt Credentials not found\n        account->>web: Invalid credentials\n    else Credentials found\n        account->>-web: Successfully logged in\n\n        Note over web,db: When the user is authenticated, they can now submit new posts\n        web->>+blog: Submit new post\n        blog->>db: Store post data\n\n        par Notifications\n            blog--)mail: Send mail to blog subscribers\n            blog--)db: Store in-site notifications\n        and Response\n            blog-->>-web: Successfully posted\n        end\n    end\n\n```\n\n```mermaid\nsequenceDiagram\n    participant web as Web Browser\n    participant blog as Blog Service\n    participant account as Account Service\n    participant mail as Mail Service\n    participant db as Storage\n\n    Note over web,db: The user must be logged in to submit blog posts\n    web->>+account: Logs in using credentials\n    account->>db: Query stored accounts\n    db->>account: Respond with query result\n\n    alt Credentials not found\n        account->>web: Invalid credentials\n    else Credentials found\n        account->>-web: Successfully logged in\n\n        Note over web,db: When the user is authenticated, they can now submit new posts\n        web->>+blog: Submit new post\n        blog->>db: Store post data\n\n        par Notifications\n            blog--)mail: Send mail to blog subscribers\n            blog--)db: Store in-site notifications\n        and Response\n            blog-->>-web: Successfully posted\n        end\n    end\n\n```\n\n## A commit flow diagram.\n\n```mermaid-example\ngitGraph:\n    commit "Ashish"\n    branch newbranch\n    checkout newbranch\n    commit id:"1111"\n    commit tag:"test"\n    checkout main\n    commit type: HIGHLIGHT\n    commit\n    merge newbranch\n    commit\n    branch b2\n    commit\n```\n\n```mermaid\ngitGraph:\n    commit "Ashish"\n    branch newbranch\n    checkout newbranch\n    commit id:"1111"\n    commit tag:"test"\n    checkout main\n    commit type: HIGHLIGHT\n    commit\n    merge newbranch\n    commit\n    branch b2\n    commit\n```\n\n<!--- cspell:ignore Ashish newbranch --->\n';
+const __vite_glob_0_29 = '> **Warning**\n>\n> ## THIS IS AN AUTOGENERATED FILE. DO NOT EDIT.\n>\n> ## Please edit the corresponding file in [/packages/mermaid/src/docs/syntax/flowchart.md](../../packages/mermaid/src/docs/syntax/flowchart.md).\n\n# Flowcharts - Basic Syntax\n\nFlowcharts are composed of **nodes** (geometric shapes) and **edges** (arrows or lines). The Mermaid code defines how nodes and edges are made and accommodates different arrow types, multi-directional arrows, and any linking to and from subgraphs.\n\n> **Warning**\n> If you are using the word "end" in a Flowchart node, capitalize the entire word or any of the letters (e.g., "End" or "END"), or apply this [workaround](https://github.com/mermaid-js/mermaid/issues/1444#issuecomment-639528897). Typing "end" in all lowercase letters will break the Flowchart.\n\n> **Warning**\n> If you are using the letter "o" or "x" as the first letter in a connecting Flowchart node, add a space before the letter or capitalize the letter (e.g., "dev--- ops", "dev---Ops").\n>\n> Typing "A---oB" will create a [circle edge](#circle-edge-example).\n>\n> Typing "A---xB" will create a [cross edge](#cross-edge-example).\n\n### A node (default)\n\n```mermaid-example\n---\ntitle: Node\n---\nflowchart LR\n    id\n```\n\n```mermaid\n---\ntitle: Node\n---\nflowchart LR\n    id\n```\n\n> **Note**\n> The id is what is displayed in the box.\n\n> **💡 Tip**\n> Instead of `flowchart` one can also use `graph`.\n\n### A node with text\n\nIt is also possible to set text in the box that differs from the id. If this is done several times, it is the last text\nfound for the node that will be used. Also if you define edges for the node later on, you can omit text definitions. The\none previously defined will be used when rendering the box.\n\n```mermaid-example\n---\ntitle: Node with text\n---\nflowchart LR\n    id1[This is the text in the box]\n```\n\n```mermaid\n---\ntitle: Node with text\n---\nflowchart LR\n    id1[This is the text in the box]\n```\n\n#### Unicode text\n\nUse `"` to enclose the unicode text.\n\n```mermaid-example\nflowchart LR\n    id["This ❤ Unicode"]\n```\n\n```mermaid\nflowchart LR\n    id["This ❤ Unicode"]\n```\n\n#### Markdown formatting\n\nUse double quotes and backticks "\\` text \\`" to enclose the markdown text.\n\n```mermaid-example\n---\nconfig:\n  htmlLabels: false\n---\nflowchart LR\n    markdown["`This **is** _Markdown_`"]\n    newLines["`Line1\n    Line 2\n    Line 3`"]\n    markdown --> newLines\n```\n\n```mermaid\n---\nconfig:\n  htmlLabels: false\n---\nflowchart LR\n    markdown["`This **is** _Markdown_`"]\n    newLines["`Line1\n    Line 2\n    Line 3`"]\n    markdown --> newLines\n```\n\n### Direction\n\nThis statement declares the direction of the Flowchart.\n\nThis declares the flowchart is oriented from top to bottom (`TD` or `TB`).\n\n```mermaid-example\nflowchart TD\n    Start --> Stop\n```\n\n```mermaid\nflowchart TD\n    Start --> Stop\n```\n\nThis declares the flowchart is oriented from left to right (`LR`).\n\n```mermaid-example\nflowchart LR\n    Start --> Stop\n```\n\n```mermaid\nflowchart LR\n    Start --> Stop\n```\n\nPossible FlowChart orientations are:\n\n- TB - Top to bottom\n- TD - Top-down/ same as top to bottom\n- BT - Bottom to top\n- RL - Right to left\n- LR - Left to right\n\n## Node shapes\n\n### A node with round edges\n\n```mermaid-example\nflowchart LR\n    id1(This is the text in the box)\n```\n\n```mermaid\nflowchart LR\n    id1(This is the text in the box)\n```\n\n### A stadium-shaped node\n\n```mermaid-example\nflowchart LR\n    id1([This is the text in the box])\n```\n\n```mermaid\nflowchart LR\n    id1([This is the text in the box])\n```\n\n### A node in a subroutine shape\n\n```mermaid-example\nflowchart LR\n    id1[[This is the text in the box]]\n```\n\n```mermaid\nflowchart LR\n    id1[[This is the text in the box]]\n```\n\n### A node in a cylindrical shape\n\n```mermaid-example\nflowchart LR\n    id1[(Database)]\n```\n\n```mermaid\nflowchart LR\n    id1[(Database)]\n```\n\n### A node in the form of a circle\n\n```mermaid-example\nflowchart LR\n    id1((This is the text in the circle))\n```\n\n```mermaid\nflowchart LR\n    id1((This is the text in the circle))\n```\n\n### A node in an asymmetric shape\n\n```mermaid-example\nflowchart LR\n    id1>This is the text in the box]\n```\n\n```mermaid\nflowchart LR\n    id1>This is the text in the box]\n```\n\nCurrently only the shape above is possible and not its mirror. _This might change with future releases._\n\n### A node (rhombus)\n\n```mermaid-example\nflowchart LR\n    id1{This is the text in the box}\n```\n\n```mermaid\nflowchart LR\n    id1{This is the text in the box}\n```\n\n### A hexagon node\n\n```mermaid-example\nflowchart LR\n    id1{{This is the text in the box}}\n```\n\n```mermaid\nflowchart LR\n    id1{{This is the text in the box}}\n```\n\n### Parallelogram\n\n```mermaid-example\nflowchart TD\n    id1[/This is the text in the box/]\n```\n\n```mermaid\nflowchart TD\n    id1[/This is the text in the box/]\n```\n\n### Parallelogram alt\n\n```mermaid-example\nflowchart TD\n    id1[\\This is the text in the box\\]\n```\n\n```mermaid\nflowchart TD\n    id1[\\This is the text in the box\\]\n```\n\n### Trapezoid\n\n```mermaid-example\nflowchart TD\n    A[/Christmas\\]\n```\n\n```mermaid\nflowchart TD\n    A[/Christmas\\]\n```\n\n### Trapezoid alt\n\n```mermaid-example\nflowchart TD\n    B[\\Go shopping/]\n```\n\n```mermaid\nflowchart TD\n    B[\\Go shopping/]\n```\n\n### Double circle\n\n```mermaid-example\nflowchart TD\n    id1(((This is the text in the circle)))\n```\n\n```mermaid\nflowchart TD\n    id1(((This is the text in the circle)))\n```\n\n## Expanded Node Shapes in Mermaid Flowcharts (v11.3.0+)\n\nMermaid introduces 30 new shapes to enhance the flexibility and precision of flowchart creation. These new shapes provide more options to represent processes, decisions, events, data storage visually, and other elements within your flowcharts, improving clarity and semantic meaning.\n\nNew Syntax for Shape Definition\n\nMermaid now supports a general syntax for defining shape types to accommodate the growing number of shapes. This syntax allows you to assign specific shapes to nodes using a clear and flexible format:\n\n```\nA@{ shape: rect }\n```\n\nThis syntax creates a node A as a rectangle. It renders in the same way as `A["A"]`, or `A`.\n\n### Complete List of New Shapes\n\nBelow is a comprehensive list of the newly introduced shapes and their corresponding semantic meanings, short names, and aliases:\n\n| **Semantic Name**                 | **Shape Name**         | **Short Name** | **Description**                | **Alias Supported**                                              |\n| --------------------------------- | ---------------------- | -------------- | ------------------------------ | ---------------------------------------------------------------- |\n| Bang                              | Bang                   | `bang`         | Bang                           | `bang`                                                           |\n| Card                              | Notched Rectangle      | `notch-rect`   | Represents a card              | `card`, `notched-rectangle`                                      |\n| Cloud                             | Cloud                  | `cloud`        | cloud                          | `cloud`                                                          |\n| Collate                           | Hourglass              | `hourglass`    | Represents a collate operation | `collate`, `hourglass`                                           |\n| Com Link                          | Lightning Bolt         | `bolt`         | Communication link             | `com-link`, `lightning-bolt`                                     |\n| Comment                           | Curly Brace            | `brace`        | Adds a comment                 | `brace-l`, `comment`                                             |\n| Comment Right                     | Curly Brace            | `brace-r`      | Adds a comment                 |                                                                  |\n| Comment with braces on both sides | Curly Braces           | `braces`       | Adds a comment                 |                                                                  |\n| Data Input/Output                 | Lean Right             | `lean-r`       | Represents input or output     | `in-out`, `lean-right`                                           |\n| Data Input/Output                 | Lean Left              | `lean-l`       | Represents output or input     | `lean-left`, `out-in`                                            |\n| Data Store                        | Data Store             | `datastore`    | Data flow diagram data store   | `data-store`                                                     |\n| Database                          | Cylinder               | `cyl`          | Database storage               | `cylinder`, `database`, `db`                                     |\n| Decision                          | Diamond                | `diam`         | Decision-making step           | `decision`, `diamond`, `question`                                |\n| Delay                             | Half-Rounded Rectangle | `delay`        | Represents a delay             | `half-rounded-rectangle`                                         |\n| Direct Access Storage             | Horizontal Cylinder    | `h-cyl`        | Direct access storage          | `das`, `horizontal-cylinder`                                     |\n| Disk Storage                      | Lined Cylinder         | `lin-cyl`      | Disk storage                   | `disk`, `lined-cylinder`                                         |\n| Display                           | Curved Trapezoid       | `curv-trap`    | Represents a display           | `curved-trapezoid`, `display`                                    |\n| Divided Process                   | Divided Rectangle      | `div-rect`     | Divided process shape          | `div-proc`, `divided-process`, `divided-rectangle`               |\n| Document                          | Document               | `doc`          | Represents a document          | `doc`, `document`                                                |\n| Event                             | Rounded Rectangle      | `rounded`      | Represents an event            | `event`                                                          |\n| Extract                           | Triangle               | `tri`          | Extraction process             | `extract`, `triangle`                                            |\n| Fork/Join                         | Filled Rectangle       | `fork`         | Fork or join in process flow   | `join`                                                           |\n| Internal Storage                  | Window Pane            | `win-pane`     | Internal storage               | `internal-storage`, `window-pane`                                |\n| Junction                          | Filled Circle          | `f-circ`       | Junction point                 | `filled-circle`, `junction`                                      |\n| Lined Document                    | Lined Document         | `lin-doc`      | Lined document                 | `lined-document`                                                 |\n| Lined/Shaded Process              | Lined Rectangle        | `lin-rect`     | Lined process shape            | `lin-proc`, `lined-process`, `lined-rectangle`, `shaded-process` |\n| Loop Limit                        | Trapezoidal Pentagon   | `notch-pent`   | Loop limit step                | `loop-limit`, `notched-pentagon`                                 |\n| Manual File                       | Flipped Triangle       | `flip-tri`     | Manual file operation          | `flipped-triangle`, `manual-file`                                |\n| Manual Input                      | Sloped Rectangle       | `sl-rect`      | Manual input step              | `manual-input`, `sloped-rectangle`                               |\n| Manual Operation                  | Trapezoid Base Top     | `trap-t`       | Represents a manual task       | `inv-trapezoid`, `manual`, `trapezoid-top`                       |\n| Multi-Document                    | Stacked Document       | `docs`         | Multiple documents             | `documents`, `st-doc`, `stacked-document`                        |\n| Multi-Process                     | Stacked Rectangle      | `st-rect`      | Multiple processes             | `processes`, `procs`, `stacked-rectangle`                        |\n| Odd                               | Odd                    | `odd`          | Odd shape                      |                                                                  |\n| Paper Tape                        | Flag                   | `flag`         | Paper tape                     | `paper-tape`                                                     |\n| Prepare Conditional               | Hexagon                | `hex`          | Preparation or condition step  | `hexagon`, `prepare`                                             |\n| Priority Action                   | Trapezoid Base Bottom  | `trap-b`       | Priority action                | `priority`, `trapezoid`, `trapezoid-bottom`                      |\n| Process                           | Rectangle              | `rect`         | Standard process shape         | `proc`, `process`, `rectangle`                                   |\n| Start                             | Circle                 | `circle`       | Starting point                 | `circ`                                                           |\n| Start                             | Small Circle           | `sm-circ`      | Small starting point           | `small-circle`, `start`                                          |\n| Stop                              | Double Circle          | `dbl-circ`     | Represents a stop point        | `double-circle`                                                  |\n| Stop                              | Framed Circle          | `fr-circ`      | Stop point                     | `framed-circle`, `stop`                                          |\n| Stored Data                       | Bow Tie Rectangle      | `bow-rect`     | Stored data                    | `bow-tie-rectangle`, `stored-data`                               |\n| Subprocess                        | Framed Rectangle       | `fr-rect`      | Subprocess                     | `framed-rectangle`, `subproc`, `subprocess`, `subroutine`        |\n| Summary                           | Crossed Circle         | `cross-circ`   | Summary                        | `crossed-circle`, `summary`                                      |\n| Tagged Document                   | Tagged Document        | `tag-doc`      | Tagged document                | `tag-doc`, `tagged-document`                                     |\n| Tagged Process                    | Tagged Rectangle       | `tag-rect`     | Tagged process                 | `tag-proc`, `tagged-process`, `tagged-rectangle`                 |\n| Terminal Point                    | Stadium                | `stadium`      | Terminal point                 | `pill`, `terminal`                                               |\n| Text Block                        | Text Block             | `text`         | Text block                     |                                                                  |\n\n### Example Flowchart with New Shapes\n\nHere’s an example flowchart that utilizes some of the newly introduced shapes:\n\n```mermaid-example\nflowchart RL\n    A@{ shape: manual-file, label: "File Handling"}\n    B@{ shape: manual-input, label: "User Input"}\n    C@{ shape: docs, label: "Multiple Documents"}\n    D@{ shape: procs, label: "Process Automation"}\n    E@{ shape: paper-tape, label: "Paper Records"}\n```\n\n```mermaid\nflowchart RL\n    A@{ shape: manual-file, label: "File Handling"}\n    B@{ shape: manual-input, label: "User Input"}\n    C@{ shape: docs, label: "Multiple Documents"}\n    D@{ shape: procs, label: "Process Automation"}\n    E@{ shape: paper-tape, label: "Paper Records"}\n```\n\n### Process\n\n```mermaid-example\nflowchart TD\n    A@{ shape: rect, label: "This is a process" }\n```\n\n```mermaid\nflowchart TD\n    A@{ shape: rect, label: "This is a process" }\n```\n\n### Event\n\n```mermaid-example\nflowchart TD\n    A@{ shape: rounded, label: "This is an event" }\n```\n\n```mermaid\nflowchart TD\n    A@{ shape: rounded, label: "This is an event" }\n```\n\n### Terminal Point (Stadium)\n\n```mermaid-example\nflowchart TD\n    A@{ shape: stadium, label: "Terminal point" }\n```\n\n```mermaid\nflowchart TD\n    A@{ shape: stadium, label: "Terminal point" }\n```\n\n### Subprocess\n\n```mermaid-example\nflowchart TD\n    A@{ shape: subproc, label: "This is a subprocess" }\n```\n\n```mermaid\nflowchart TD\n    A@{ shape: subproc, label: "This is a subprocess" }\n```\n\n### Database (Cylinder)\n\n```mermaid-example\nflowchart TD\n    A@{ shape: cyl, label: "Database" }\n```\n\n```mermaid\nflowchart TD\n    A@{ shape: cyl, label: "Database" }\n```\n\n### Start (Circle)\n\n```mermaid-example\nflowchart TD\n    A@{ shape: circle, label: "Start" }\n```\n\n```mermaid\nflowchart TD\n    A@{ shape: circle, label: "Start" }\n```\n\n### Odd\n\n```mermaid-example\nflowchart TD\n    A@{ shape: odd, label: "Odd shape" }\n```\n\n```mermaid\nflowchart TD\n    A@{ shape: odd, label: "Odd shape" }\n```\n\n### Decision (Diamond)\n\n```mermaid-example\nflowchart TD\n    A@{ shape: diamond, label: "Decision" }\n```\n\n```mermaid\nflowchart TD\n    A@{ shape: diamond, label: "Decision" }\n```\n\n### Prepare Conditional (Hexagon)\n\n```mermaid-example\nflowchart TD\n    A@{ shape: hex, label: "Prepare conditional" }\n```\n\n```mermaid\nflowchart TD\n    A@{ shape: hex, label: "Prepare conditional" }\n```\n\n### Data Input/Output (Lean Right)\n\n```mermaid-example\nflowchart TD\n    A@{ shape: lean-r, label: "Input/Output" }\n```\n\n```mermaid\nflowchart TD\n    A@{ shape: lean-r, label: "Input/Output" }\n```\n\n### Data Input/Output (Lean Left)\n\n```mermaid-example\nflowchart TD\n    A@{ shape: lean-l, label: "Output/Input" }\n```\n\n```mermaid\nflowchart TD\n    A@{ shape: lean-l, label: "Output/Input" }\n```\n\n### Datastore (Top and bottom border)\n\n```mermaid-example\nflowchart TD\n    A@{ shape: datastore, label: "Datastore" }\n```\n\n```mermaid\nflowchart TD\n    A@{ shape: datastore, label: "Datastore" }\n```\n\n### Priority Action (Trapezoid Base Bottom)\n\n```mermaid-example\nflowchart TD\n    A@{ shape: trap-b, label: "Priority action" }\n```\n\n```mermaid\nflowchart TD\n    A@{ shape: trap-b, label: "Priority action" }\n```\n\n### Manual Operation (Trapezoid Base Top)\n\n```mermaid-example\nflowchart TD\n    A@{ shape: trap-t, label: "Manual operation" }\n```\n\n```mermaid\nflowchart TD\n    A@{ shape: trap-t, label: "Manual operation" }\n```\n\n### Stop (Double Circle)\n\n```mermaid-example\nflowchart TD\n    A@{ shape: dbl-circ, label: "Stop" }\n```\n\n```mermaid\nflowchart TD\n    A@{ shape: dbl-circ, label: "Stop" }\n```\n\n### Text Block\n\n```mermaid-example\nflowchart TD\n    A@{ shape: text, label: "This is a text block" }\n```\n\n```mermaid\nflowchart TD\n    A@{ shape: text, label: "This is a text block" }\n```\n\n### Card (Notched Rectangle)\n\n```mermaid-example\nflowchart TD\n    A@{ shape: notch-rect, label: "Card" }\n```\n\n```mermaid\nflowchart TD\n    A@{ shape: notch-rect, label: "Card" }\n```\n\n### Lined/Shaded Process\n\n```mermaid-example\nflowchart TD\n    A@{ shape: lin-rect, label: "Lined process" }\n```\n\n```mermaid\nflowchart TD\n    A@{ shape: lin-rect, label: "Lined process" }\n```\n\n### Start (Small Circle)\n\n```mermaid-example\nflowchart TD\n    A@{ shape: sm-circ, label: "Small start" }\n```\n\n```mermaid\nflowchart TD\n    A@{ shape: sm-circ, label: "Small start" }\n```\n\n### Stop (Framed Circle)\n\n```mermaid-example\nflowchart TD\n    A@{ shape: framed-circle, label: "Stop" }\n```\n\n```mermaid\nflowchart TD\n    A@{ shape: framed-circle, label: "Stop" }\n```\n\n### Fork/Join (Long Rectangle)\n\n```mermaid-example\nflowchart TD\n    A@{ shape: fork, label: "Fork or Join" }\n```\n\n```mermaid\nflowchart TD\n    A@{ shape: fork, label: "Fork or Join" }\n```\n\n### Collate (Hourglass)\n\n```mermaid-example\nflowchart TD\n    A@{ shape: hourglass, label: "Collate" }\n```\n\n```mermaid\nflowchart TD\n    A@{ shape: hourglass, label: "Collate" }\n```\n\n### Comment (Curly Brace)\n\n```mermaid-example\nflowchart TD\n    A@{ shape: comment, label: "Comment" }\n```\n\n```mermaid\nflowchart TD\n    A@{ shape: comment, label: "Comment" }\n```\n\n### Comment Right (Curly Brace Right)\n\n```mermaid-example\nflowchart TD\n    A@{ shape: brace-r, label: "Comment" }\n```\n\n```mermaid\nflowchart TD\n    A@{ shape: brace-r, label: "Comment" }\n```\n\n### Comment with braces on both sides\n\n```mermaid-example\nflowchart TD\n    A@{ shape: braces, label: "Comment" }\n```\n\n```mermaid\nflowchart TD\n    A@{ shape: braces, label: "Comment" }\n```\n\n### Com Link (Lightning Bolt)\n\n```mermaid-example\nflowchart TD\n    A@{ shape: bolt, label: "Communication link" }\n```\n\n```mermaid\nflowchart TD\n    A@{ shape: bolt, label: "Communication link" }\n```\n\n### Document\n\n```mermaid-example\nflowchart TD\n    A@{ shape: doc, label: "Document" }\n```\n\n```mermaid\nflowchart TD\n    A@{ shape: doc, label: "Document" }\n```\n\n### Delay (Half-Rounded Rectangle)\n\n```mermaid-example\nflowchart TD\n    A@{ shape: delay, label: "Delay" }\n```\n\n```mermaid\nflowchart TD\n    A@{ shape: delay, label: "Delay" }\n```\n\n### Direct Access Storage (Horizontal Cylinder)\n\n```mermaid-example\nflowchart TD\n    A@{ shape: das, label: "Direct access storage" }\n```\n\n```mermaid\nflowchart TD\n    A@{ shape: das, label: "Direct access storage" }\n```\n\n### Disk Storage (Lined Cylinder)\n\n```mermaid-example\nflowchart TD\n    A@{ shape: lin-cyl, label: "Disk storage" }\n```\n\n```mermaid\nflowchart TD\n    A@{ shape: lin-cyl, label: "Disk storage" }\n```\n\n### Display (Curved Trapezoid)\n\n```mermaid-example\nflowchart TD\n    A@{ shape: curv-trap, label: "Display" }\n```\n\n```mermaid\nflowchart TD\n    A@{ shape: curv-trap, label: "Display" }\n```\n\n### Divided Process (Divided Rectangle)\n\n```mermaid-example\nflowchart TD\n    A@{ shape: div-rect, label: "Divided process" }\n```\n\n```mermaid\nflowchart TD\n    A@{ shape: div-rect, label: "Divided process" }\n```\n\n### Extract (Small Triangle)\n\n```mermaid-example\nflowchart TD\n    A@{ shape: tri, label: "Extract" }\n```\n\n```mermaid\nflowchart TD\n    A@{ shape: tri, label: "Extract" }\n```\n\n### Internal Storage (Window Pane)\n\n```mermaid-example\nflowchart TD\n    A@{ shape: win-pane, label: "Internal storage" }\n```\n\n```mermaid\nflowchart TD\n    A@{ shape: win-pane, label: "Internal storage" }\n```\n\n### Junction (Filled Circle)\n\n```mermaid-example\nflowchart TD\n    A@{ shape: f-circ, label: "Junction" }\n```\n\n```mermaid\nflowchart TD\n    A@{ shape: f-circ, label: "Junction" }\n```\n\n### Lined Document\n\n```mermaid-example\nflowchart TD\n    A@{ shape: lin-doc, label: "Lined document" }\n```\n\n```mermaid\nflowchart TD\n    A@{ shape: lin-doc, label: "Lined document" }\n```\n\n### Loop Limit (Notched Pentagon)\n\n```mermaid-example\nflowchart TD\n    A@{ shape: notch-pent, label: "Loop limit" }\n```\n\n```mermaid\nflowchart TD\n    A@{ shape: notch-pent, label: "Loop limit" }\n```\n\n### Manual File (Flipped Triangle)\n\n```mermaid-example\nflowchart TD\n    A@{ shape: flip-tri, label: "Manual file" }\n```\n\n```mermaid\nflowchart TD\n    A@{ shape: flip-tri, label: "Manual file" }\n```\n\n### Manual Input (Sloped Rectangle)\n\n```mermaid-example\nflowchart TD\n    A@{ shape: sl-rect, label: "Manual input" }\n```\n\n```mermaid\nflowchart TD\n    A@{ shape: sl-rect, label: "Manual input" }\n```\n\n### Multi-Document (Stacked Document)\n\n```mermaid-example\nflowchart TD\n    A@{ shape: docs, label: "Multiple documents" }\n```\n\n```mermaid\nflowchart TD\n    A@{ shape: docs, label: "Multiple documents" }\n```\n\n### Multi-Process (Stacked Rectangle)\n\n```mermaid-example\nflowchart TD\n    A@{ shape: processes, label: "Multiple processes" }\n```\n\n```mermaid\nflowchart TD\n    A@{ shape: processes, label: "Multiple processes" }\n```\n\n### Paper Tape (Flag)\n\n```mermaid-example\nflowchart TD\n    A@{ shape: flag, label: "Paper tape" }\n```\n\n```mermaid\nflowchart TD\n    A@{ shape: flag, label: "Paper tape" }\n```\n\n### Stored Data (Bow Tie Rectangle)\n\n```mermaid-example\nflowchart TD\n    A@{ shape: bow-rect, label: "Stored data" }\n```\n\n```mermaid\nflowchart TD\n    A@{ shape: bow-rect, label: "Stored data" }\n```\n\n### Summary (Crossed Circle)\n\n```mermaid-example\nflowchart TD\n    A@{ shape: cross-circ, label: "Summary" }\n```\n\n```mermaid\nflowchart TD\n    A@{ shape: cross-circ, label: "Summary" }\n```\n\n### Tagged Document\n\n```mermaid-example\nflowchart TD\n    A@{ shape: tag-doc, label: "Tagged document" }\n```\n\n```mermaid\nflowchart TD\n    A@{ shape: tag-doc, label: "Tagged document" }\n```\n\n### Tagged Process (Tagged Rectangle)\n\n```mermaid-example\nflowchart TD\n    A@{ shape: tag-rect, label: "Tagged process" }\n```\n\n```mermaid\nflowchart TD\n    A@{ shape: tag-rect, label: "Tagged process" }\n```\n\n## Special shapes in Mermaid Flowcharts (v11.3.0+)\n\nMermaid also introduces 2 special shapes to enhance your flowcharts: **icon** and **image**. These shapes allow you to include icons and images directly within your flowcharts, providing more visual context and clarity.\n\n### Icon Shape\n\nYou can use the `icon` shape to include an icon in your flowchart. To use icons, you need to register the icon pack first. Follow the instructions to [add custom icons](../config/icons.md). The syntax for defining an icon shape is as follows:\n\n```mermaid-example\nflowchart TD\n    A@{ icon: "fa:user", form: "square", label: "User Icon", pos: "t", h: 60 }\n```\n\n```mermaid\nflowchart TD\n    A@{ icon: "fa:user", form: "square", label: "User Icon", pos: "t", h: 60 }\n```\n\n#### Parameters\n\n- **icon**: The name of the icon from the registered icon pack.\n- **form**: Specifies the background shape of the icon. If not defined there will be no background to icon. Options include:\n  - `square`\n  - `circle`\n  - `rounded`\n- **label**: The text label associated with the icon. This can be any string. If not defined, no label will be displayed.\n- **pos**: The position of the label. If not defined label will default to bottom of icon. Possible values are:\n  - `t`\n  - `b`\n- **h**: The height of the icon. If not defined this will default to 48 which is minimum.\n\n### Image Shape\n\nYou can use the `image` shape to include an image in your flowchart. The syntax for defining an image shape is as follows:\n\n```\nflowchart TD\n    A@{ img: "https://example.com/image.png", label: "Image Label", pos: "t", w: 60, h: 60, constraint: "off" }\n```\n\n#### Parameters\n\n- **img**: The URL of the image to be displayed.\n- **label**: The text label associated with the image. This can be any string. If not defined, no label will be displayed.\n- **pos**: The position of the label. If not defined, the label will default to the bottom of the image. Possible values are:\n  - `t`\n  - `b`\n- **w**: The width of the image. If not defined, this will default to the natural width of the image.\n- **h**: The height of the image. If not defined, this will default to the natural height of the image.\n- **constraint**: Determines if the image should constrain the node size. This setting also ensures the image maintains its original aspect ratio, adjusting the width (`w`) accordingly to the height (`h`). If not defined, this will default to `off` Possible values are:\n  - `on`\n  - `off`\n\nIf you want to resize an image, but keep the same aspect ratio, set `h`, and set `constraint: on` to constrain the aspect ratio. E.g.\n\n```mermaid-example\nflowchart TD\n  %% My image with a constrained aspect ratio\n  A@{ img: "https://mermaid.js.org/favicon.svg", label: "My example image label", pos: "t", h: 60, constraint: "on" }\n```\n\n```mermaid\nflowchart TD\n  %% My image with a constrained aspect ratio\n  A@{ img: "https://mermaid.js.org/favicon.svg", label: "My example image label", pos: "t", h: 60, constraint: "on" }\n```\n\n## Links between nodes\n\nNodes can be connected with links/edges. It is possible to have different types of links or attach a text string to a link.\n\n### A link with arrow head\n\n```mermaid-example\nflowchart LR\n    A-->B\n```\n\n```mermaid\nflowchart LR\n    A-->B\n```\n\n### An open link\n\n```mermaid-example\nflowchart LR\n    A --- B\n```\n\n```mermaid\nflowchart LR\n    A --- B\n```\n\n### Text on links\n\n```mermaid-example\nflowchart LR\n    A-- This is the text! ---B\n```\n\n```mermaid\nflowchart LR\n    A-- This is the text! ---B\n```\n\nor\n\n```mermaid-example\nflowchart LR\n    A---|This is the text|B\n```\n\n```mermaid\nflowchart LR\n    A---|This is the text|B\n```\n\n### A link with arrow head and text\n\n```mermaid-example\nflowchart LR\n    A-->|text|B\n```\n\n```mermaid\nflowchart LR\n    A-->|text|B\n```\n\nor\n\n```mermaid-example\nflowchart LR\n    A-- text -->B\n```\n\n```mermaid\nflowchart LR\n    A-- text -->B\n```\n\n### Dotted link\n\n```mermaid-example\nflowchart LR\n   A-.->B;\n```\n\n```mermaid\nflowchart LR\n   A-.->B;\n```\n\n### Dotted link with text\n\n```mermaid-example\nflowchart LR\n   A-. text .-> B\n```\n\n```mermaid\nflowchart LR\n   A-. text .-> B\n```\n\n### Thick link\n\n```mermaid-example\nflowchart LR\n   A ==> B\n```\n\n```mermaid\nflowchart LR\n   A ==> B\n```\n\n### Thick link with text\n\n```mermaid-example\nflowchart LR\n   A == text ==> B\n```\n\n```mermaid\nflowchart LR\n   A == text ==> B\n```\n\n### An invisible link\n\nThis can be a useful tool in some instances where you want to alter the default positioning of a node.\n\n```mermaid-example\nflowchart LR\n    A ~~~ B\n```\n\n```mermaid\nflowchart LR\n    A ~~~ B\n```\n\n### Chaining of links\n\nIt is possible declare many links in the same line as per below:\n\n```mermaid-example\nflowchart LR\n   A -- text --> B -- text2 --> C\n```\n\n```mermaid\nflowchart LR\n   A -- text --> B -- text2 --> C\n```\n\nIt is also possible to declare multiple nodes links in the same line as per below:\n\n```mermaid-example\nflowchart LR\n   a --> b & c--> d\n```\n\n```mermaid\nflowchart LR\n   a --> b & c--> d\n```\n\nYou can then describe dependencies in a very expressive way. Like the one-liner below:\n\n```mermaid-example\nflowchart TB\n    A & B--> C & D\n```\n\n```mermaid\nflowchart TB\n    A & B--> C & D\n```\n\nIf you describe the same diagram using the basic syntax, it will take four lines. A\nword of warning, one could go overboard with this making the flowchart harder to read in\nmarkdown form. The Swedish word `lagom` comes to mind. It means, not too much and not too little.\nThis goes for expressive syntaxes as well.\n\n```mermaid-example\nflowchart TB\n    A --> C\n    A --> D\n    B --> C\n    B --> D\n```\n\n```mermaid\nflowchart TB\n    A --> C\n    A --> D\n    B --> C\n    B --> D\n```\n\n### Attaching an ID to Edges\n\nMermaid now supports assigning IDs to edges, similar to how IDs and metadata can be attached to nodes. This feature lays the groundwork for more advanced styling, classes, and animation capabilities on edges.\n\n**Syntax:**\n\nTo give an edge an ID, prepend the edge syntax with the ID followed by an `@` character. For example:\n\n```mermaid-example\nflowchart LR\n  A e1@--> B\n```\n\n```mermaid\nflowchart LR\n  A e1@--> B\n```\n\nIn this example, `e1` is the ID of the edge connecting `A` to `B`. You can then use this ID in later definitions or style statements, just like with nodes.\n\n### Turning an Animation On\n\nOnce you have assigned an ID to an edge, you can turn on animations for that edge by defining the edge’s properties:\n\n```mermaid-example\nflowchart LR\n  A e1@==> B\n  e1@{ animate: true }\n```\n\n```mermaid\nflowchart LR\n  A e1@==> B\n  e1@{ animate: true }\n```\n\nThis tells Mermaid that the edge `e1` should be animated.\n\n### Selecting Type of Animation\n\nIn the initial version, two animation speeds are supported: `fast` and `slow`. Selecting a specific animation type is a shorthand for enabling animation and setting the animation speed in one go.\n\n**Examples:**\n\n```mermaid-example\nflowchart LR\n  A e1@--> B\n  e1@{ animation: fast }\n```\n\n```mermaid\nflowchart LR\n  A e1@--> B\n  e1@{ animation: fast }\n```\n\nThis is equivalent to `{ animate: true, animation: fast }`.\n\n### Using classDef Statements for Animations\n\nYou can also animate edges by assigning a class to them and then defining animation properties in a `classDef` statement. For example:\n\n```mermaid-example\nflowchart LR\n  A e1@--> B\n  classDef animate stroke-dasharray: 9,5,stroke-dashoffset: 900,animation: dash 25s linear infinite;\n  class e1 animate\n```\n\n```mermaid\nflowchart LR\n  A e1@--> B\n  classDef animate stroke-dasharray: 9,5,stroke-dashoffset: 900,animation: dash 25s linear infinite;\n  class e1 animate\n```\n\nIn this snippet:\n\n- `e1@-->` creates an edge with ID `e1`.\n- `classDef animate` defines a class named `animate` with styling and animation properties.\n- `class e1 animate` applies the `animate` class to the edge `e1`.\n\n**Note on Escaping Commas:**\nWhen setting the `stroke-dasharray` property, remember to escape commas as `\\,` since commas are used as delimiters in Mermaid’s style definitions.\n\n## New arrow types\n\nThere are new types of arrows supported:\n\n- circle edge\n- cross edge\n\n### Circle edge example\n\n```mermaid-example\nflowchart LR\n    A --o B\n```\n\n```mermaid\nflowchart LR\n    A --o B\n```\n\n### Cross edge example\n\n```mermaid-example\nflowchart LR\n    A --x B\n```\n\n```mermaid\nflowchart LR\n    A --x B\n```\n\n## Multi directional arrows\n\nThere is the possibility to use multidirectional arrows.\n\n```mermaid-example\nflowchart LR\n    A o--o B\n    B <--> C\n    C x--x D\n```\n\n```mermaid\nflowchart LR\n    A o--o B\n    B <--> C\n    C x--x D\n```\n\n### Minimum length of a link\n\nEach node in the flowchart is ultimately assigned to a rank in the rendered\ngraph, i.e. to a vertical or horizontal level (depending on the flowchart\norientation), based on the nodes to which it is linked. By default, links\ncan span any number of ranks, but you can ask for any link to be longer\nthan the others by adding extra dashes in the link definition.\n\nIn the following example, two extra dashes are added in the link from node _B_\nto node _E_, so that it spans two more ranks than regular links:\n\n```mermaid-example\nflowchart TD\n    A[Start] --> B{Is it?}\n    B -->|Yes| C[OK]\n    C --> D[Rethink]\n    D --> B\n    B ---->|No| E[End]\n```\n\n```mermaid\nflowchart TD\n    A[Start] --> B{Is it?}\n    B -->|Yes| C[OK]\n    C --> D[Rethink]\n    D --> B\n    B ---->|No| E[End]\n```\n\n> **Note** Links may still be made longer than the requested number of ranks\n> by the rendering engine to accommodate other requests.\n\nWhen the link label is written in the middle of the link, the extra dashes must\nbe added on the right side of the link. The following example is equivalent to\nthe previous one:\n\n```mermaid-example\nflowchart TD\n    A[Start] --> B{Is it?}\n    B -- Yes --> C[OK]\n    C --> D[Rethink]\n    D --> B\n    B -- No ----> E[End]\n```\n\n```mermaid\nflowchart TD\n    A[Start] --> B{Is it?}\n    B -- Yes --> C[OK]\n    C --> D[Rethink]\n    D --> B\n    B -- No ----> E[End]\n```\n\nFor dotted or thick links, the characters to add are equals signs or dots,\nas summed up in the following table:\n\n| Length            |   1    |    2    |    3     |\n| ----------------- | :----: | :-----: | :------: |\n| Normal            | `---`  | `----`  | `-----`  |\n| Normal with arrow | `-->`  | `--->`  | `---->`  |\n| Thick             | `===`  | `====`  | `=====`  |\n| Thick with arrow  | `==>`  | `===>`  | `====>`  |\n| Dotted            | `-.-`  | `-..-`  | `-...-`  |\n| Dotted with arrow | `-.->` | `-..->` | `-...->` |\n\n## Special characters that break syntax\n\nIt is possible to put text within quotes in order to render more troublesome characters. As in the example below:\n\n```mermaid-example\nflowchart LR\n    id1["This is the (text) in the box"]\n```\n\n```mermaid\nflowchart LR\n    id1["This is the (text) in the box"]\n```\n\n### Entity codes to escape characters\n\nIt is possible to escape characters using the syntax exemplified here.\n\n```mermaid-example\n    flowchart LR\n        A["A double quote:#quot;"] --> B["A dec char:#9829;"]\n```\n\n```mermaid\n    flowchart LR\n        A["A double quote:#quot;"] --> B["A dec char:#9829;"]\n```\n\nNumbers given are base 10, so `#` can be encoded as `#35;`. It is also supported to use HTML character names.\n\n## Subgraphs\n\n```\nsubgraph title\n    graph definition\nend\n```\n\nAn example below:\n\n```mermaid-example\nflowchart TB\n    c1-->a2\n    subgraph one\n    a1-->a2\n    end\n    subgraph two\n    b1-->b2\n    end\n    subgraph three\n    c1-->c2\n    end\n```\n\n```mermaid\nflowchart TB\n    c1-->a2\n    subgraph one\n    a1-->a2\n    end\n    subgraph two\n    b1-->b2\n    end\n    subgraph three\n    c1-->c2\n    end\n```\n\nYou can also set an explicit id for the subgraph.\n\n```mermaid-example\nflowchart TB\n    c1-->a2\n    subgraph ide1 [one]\n    a1-->a2\n    end\n```\n\n```mermaid\nflowchart TB\n    c1-->a2\n    subgraph ide1 [one]\n    a1-->a2\n    end\n```\n\n### flowcharts\n\nWith the graphtype flowchart it is also possible to set edges to and from subgraphs as in the flowchart below.\n\n```mermaid-example\nflowchart TB\n    c1-->a2\n    subgraph one\n    a1-->a2\n    end\n    subgraph two\n    b1-->b2\n    end\n    subgraph three\n    c1-->c2\n    end\n    one --> two\n    three --> two\n    two --> c2\n```\n\n```mermaid\nflowchart TB\n    c1-->a2\n    subgraph one\n    a1-->a2\n    end\n    subgraph two\n    b1-->b2\n    end\n    subgraph three\n    c1-->c2\n    end\n    one --> two\n    three --> two\n    two --> c2\n```\n\n### Direction in subgraphs\n\nWith the graphtype flowcharts you can use the direction statement to set the direction which the subgraph will render like in this example.\n\n```mermaid-example\nflowchart LR\n  subgraph TOP\n    direction TB\n    subgraph B1\n        direction RL\n        i1 -->f1\n    end\n    subgraph B2\n        direction BT\n        i2 -->f2\n    end\n  end\n  A --> TOP --> B\n  B1 --> B2\n```\n\n```mermaid\nflowchart LR\n  subgraph TOP\n    direction TB\n    subgraph B1\n        direction RL\n        i1 -->f1\n    end\n    subgraph B2\n        direction BT\n        i2 -->f2\n    end\n  end\n  A --> TOP --> B\n  B1 --> B2\n```\n\n#### Limitation\n\nIf any of a subgraph\'s nodes are linked to the outside, subgraph direction will be ignored. Instead the subgraph will inherit the direction of the parent graph:\n\n```mermaid-example\nflowchart LR\n    subgraph subgraph1\n        direction TB\n        top1[top] --> bottom1[bottom]\n    end\n    subgraph subgraph2\n        direction TB\n        top2[top] --> bottom2[bottom]\n    end\n    %% ^ These subgraphs are identical, except for the links to them:\n\n    %% Link *to* subgraph1: subgraph1 direction is maintained\n    outside --> subgraph1\n    %% Link *within* subgraph2:\n    %% subgraph2 inherits the direction of the top-level graph (LR)\n    outside ---> top2\n```\n\n```mermaid\nflowchart LR\n    subgraph subgraph1\n        direction TB\n        top1[top] --> bottom1[bottom]\n    end\n    subgraph subgraph2\n        direction TB\n        top2[top] --> bottom2[bottom]\n    end\n    %% ^ These subgraphs are identical, except for the links to them:\n\n    %% Link *to* subgraph1: subgraph1 direction is maintained\n    outside --> subgraph1\n    %% Link *within* subgraph2:\n    %% subgraph2 inherits the direction of the top-level graph (LR)\n    outside ---> top2\n```\n\n## Markdown Strings\n\nThe "Markdown Strings" feature enhances flowcharts and mind maps by offering a more versatile string type, which supports text formatting options such as bold and italics, and automatically wraps text within labels.\n\n```mermaid-example\n---\nconfig:\n  htmlLabels: false\n---\nflowchart LR\nsubgraph "One"\n  a("`The **cat**\n  in the hat`") -- "edge label" --> b{{"`The **dog** in the hog`"}}\nend\nsubgraph "`**Two**`"\n  c("`The **cat**\n  in the hat`") -- "`Bold **edge label**`" --> d("The dog in the hog")\nend\n```\n\n```mermaid\n---\nconfig:\n  htmlLabels: false\n---\nflowchart LR\nsubgraph "One"\n  a("`The **cat**\n  in the hat`") -- "edge label" --> b{{"`The **dog** in the hog`"}}\nend\nsubgraph "`**Two**`"\n  c("`The **cat**\n  in the hat`") -- "`Bold **edge label**`" --> d("The dog in the hog")\nend\n```\n\nFormatting:\n\n- For bold text, use double asterisks (`**`) before and after the text.\n- For italics, use single asterisks (`*`) before and after the text.\n- With traditional strings, you needed to add `<br>` tags for text to wrap in nodes. However, markdown strings automatically wrap text when it becomes too long and allows you to start a new line by simply using a newline character instead of a `<br>` tag.\n\nThis feature is applicable to node labels, edge labels, and subgraph labels.\n\nThe auto wrapping can be disabled by using\n\n```\n---\nconfig:\n  markdownAutoWrap: false\n---\ngraph LR\n```\n\n## Interaction\n\nIt is possible to bind a click event to a node, the click can lead to either a javascript callback or to a link which will be opened in a new browser tab.\n\n> **Note**\n> This functionality is disabled when using `securityLevel=\'strict\'` and enabled when using `securityLevel=\'loose\'`.\n\n```\nclick nodeId callback\nclick nodeId call callback()\n```\n\n- nodeId is the id of the node\n- callback is the name of a javascript function defined on the page displaying the graph, the function will be called with the nodeId as parameter.\n\nExamples of tooltip usage below:\n\n```html\n<script>\n  window.callback = function () {\n    alert(\'A callback was triggered\');\n  };\n<\/script>\n```\n\nThe tooltip text is surrounded in double quotes. The styles of the tooltip are set by the class `.mermaidTooltip`.\n\n```mermaid-example\nflowchart LR\n    A-->B\n    B-->C\n    C-->D\n    click A callback "Tooltip for a callback"\n    click B "https://www.github.com" "This is a tooltip for a link"\n    click C call callback() "Tooltip for a callback"\n    click D href "https://www.github.com" "This is a tooltip for a link"\n```\n\n```mermaid\nflowchart LR\n    A-->B\n    B-->C\n    C-->D\n    click A callback "Tooltip for a callback"\n    click B "https://www.github.com" "This is a tooltip for a link"\n    click C call callback() "Tooltip for a callback"\n    click D href "https://www.github.com" "This is a tooltip for a link"\n```\n\n> **Success** The tooltip functionality and the ability to link to urls are available from version 0.5.2.\n\n?> Due to limitations with how Docsify handles JavaScript callback functions, an alternate working demo for the above code can be viewed at [this jsfiddle](https://jsfiddle.net/yk4h7qou/2/).\n\nLinks are opened in the same browser tab/window by default. It is possible to change this by adding a link target to the click definition (`_self`, `_blank`, `_parent` and `_top` are supported):\n\n```mermaid-example\nflowchart LR\n    A-->B\n    B-->C\n    C-->D\n    D-->E\n    click A "https://www.github.com" _blank\n    click B "https://www.github.com" "Open this in a new tab" _blank\n    click C href "https://www.github.com" _blank\n    click D href "https://www.github.com" "Open this in a new tab" _blank\n```\n\n```mermaid\nflowchart LR\n    A-->B\n    B-->C\n    C-->D\n    D-->E\n    click A "https://www.github.com" _blank\n    click B "https://www.github.com" "Open this in a new tab" _blank\n    click C href "https://www.github.com" _blank\n    click D href "https://www.github.com" "Open this in a new tab" _blank\n```\n\nBeginner\'s tip—a full example using interactive links in a html context:\n\n```html\n<body>\n  <pre class="mermaid">\n    flowchart LR\n        A-->B\n        B-->C\n        C-->D\n        click A callback "Tooltip"\n        click B "https://www.github.com" "This is a link"\n        click C call callback() "Tooltip"\n        click D href "https://www.github.com" "This is a link"\n  </pre>\n\n  <script>\n    window.callback = function () {\n      alert(\'A callback was triggered\');\n    };\n    const config = {\n      startOnLoad: true,\n      htmlLabels: true,\n      flowchart: { useMaxWidth: true, curve: \'cardinal\' },\n      securityLevel: \'loose\',\n    };\n    mermaid.initialize(config);\n  <\/script>\n</body>\n```\n\n### Comments\n\nComments can be entered within a flow diagram, which will be ignored by the parser. Comments need to be on their own line, and must be prefaced with `%%` (double percent signs). Any text after the start of the comment to the next newline will be treated as a comment, including any flow syntax\n\n```mermaid-example\nflowchart LR\n%% this is a comment A -- text --> B{node}\n   A -- text --> B -- text2 --> C\n```\n\n```mermaid\nflowchart LR\n%% this is a comment A -- text --> B{node}\n   A -- text --> B -- text2 --> C\n```\n\n## Styling and classes\n\n### Styling links\n\nIt is possible to style links. For instance, you might want to style a link that is going backwards in the flow. As links\nhave no ids in the same way as nodes, some other way of deciding what style the links should be attached to is required.\nInstead of ids, the order number of when the link was defined in the graph is used, or use default to apply to all links.\nIn the example below the style defined in the linkStyle statement will belong to the fourth link in the graph:\n\n```\nlinkStyle 3 stroke:#ff3,stroke-width:4px,color:red;\n```\n\nIt is also possible to add style to multiple links in a single statement, by separating link numbers with commas:\n\n```\nlinkStyle 1,2,7 color:blue;\n```\n\n### Styling line curves\n\nIt is possible to style the type of curve used for lines between items, if the default method does not meet your needs.\nAvailable curve styles include `basis`, `bumpX`, `bumpY`, `cardinal`, `catmullRom`, `linear`, `monotoneX`, `monotoneY`,\n`natural`, `step`, `stepAfter`, and `stepBefore`.\n\nFor a full list of available curves, including an explanation of custom curves, refer to\nthe [Shapes](https://d3js.org/d3-shape/curve) documentation in the [d3-shape](https://github.com/d3/d3-shape/) project.\n\nLine styling can be achieved in two ways:\n\n1. Change the curve style of all the lines\n2. Change the curve style of a particular line\n\n#### Diagram level curve style\n\nIn this example, a left-to-right graph uses the `stepBefore` curve style:\n\n```\n---\nconfig:\n  flowchart:\n    curve: stepBefore\n---\ngraph LR\n```\n\n#### Edge level curve style using Edge IDs (v11.10.0+)\n\nYou can assign IDs to [edges](#attaching-an-id-to-edges). After assigning an ID you can modify the line style by modifying the edge\'s `curve` property using the following syntax:\n\n```mermaid-example\nflowchart LR\n    A e1@==> B\n    A e2@--> C\n    e1@{ curve: linear }\n    e2@{ curve: natural }\n```\n\n```mermaid\nflowchart LR\n    A e1@==> B\n    A e2@--> C\n    e1@{ curve: linear }\n    e2@{ curve: natural }\n```\n\n```info\nAny edge curve style modified at the edge level overrides the diagram level style.\n```\n\n```info\nIf the same edge is modified multiple times the last modification will be rendered.\n```\n\n### Styling a node\n\nIt is possible to apply specific styles such as a thicker border or a different background color to a node.\n\n```mermaid-example\nflowchart LR\n    id1(Start)-->id2(Stop)\n    style id1 fill:#f9f,stroke:#333,stroke-width:4px\n    style id2 fill:#bbf,stroke:#f66,stroke-width:2px,color:#fff,stroke-dasharray: 5 5\n```\n\n```mermaid\nflowchart LR\n    id1(Start)-->id2(Stop)\n    style id1 fill:#f9f,stroke:#333,stroke-width:4px\n    style id2 fill:#bbf,stroke:#f66,stroke-width:2px,color:#fff,stroke-dasharray: 5 5\n```\n\n#### Classes\n\nMore convenient than defining the style every time is to define a class of styles and attach this class to the nodes that\nshould have a different look.\n\nA class definition looks like the example below:\n\n```\n    classDef className fill:#f9f,stroke:#333,stroke-width:4px;\n```\n\nAlso, it is possible to define style to multiple classes in one statement:\n\n```\n    classDef firstClassName,secondClassName font-size:12pt;\n```\n\nAttachment of a class to a node is done as per below:\n\n```\n    class nodeId1 className;\n```\n\nIt is also possible to attach a class to a list of nodes in one statement:\n\n```\n    class nodeId1,nodeId2 className;\n```\n\nA shorter form of adding a class is to attach the classname to the node using the `:::`operator as per below:\n\n```mermaid-example\nflowchart LR\n    A:::someclass --> B\n    classDef someclass fill:#f96\n```\n\n```mermaid\nflowchart LR\n    A:::someclass --> B\n    classDef someclass fill:#f96\n```\n\nThis form can be used when declaring multiple links between nodes:\n\n```mermaid-example\nflowchart LR\n    A:::foo & B:::bar --> C:::foobar\n    classDef foo stroke:#f00\n    classDef bar stroke:#0f0\n    classDef foobar stroke:#00f\n```\n\n```mermaid\nflowchart LR\n    A:::foo & B:::bar --> C:::foobar\n    classDef foo stroke:#f00\n    classDef bar stroke:#0f0\n    classDef foobar stroke:#00f\n```\n\n### CSS classes\n\n> **Note:** Applying styles to Mermaid nodes via external CSS (e.g., `.cssClass > rect { fill: ... }`) does **not** work reliably. Mermaid\'s internal styles are injected with `!important` and scoped to the SVG element ID, giving them higher specificity than external CSS rules. External CSS will be silently overridden.\n>\n> The recommended approach is to use the `classDef` syntax shown in the [Classes](#classes) section above, which works correctly and is the intended styling mechanism.\n>\n> If external CSS is strictly required, every property must use `!important` to override Mermaid\'s styles — but this is not recommended.\n\n**Working approach — use `classDef` instead:**\n\n```mermaid-example\nflowchart LR\n    A:::myStyle --> B\n    classDef myStyle fill:#ff0000,stroke:#ffff00,stroke-width:4px\n```\n\n```mermaid\nflowchart LR\n    A:::myStyle --> B\n    classDef myStyle fill:#ff0000,stroke:#ffff00,stroke-width:4px\n```\n\n### Default class\n\nIf a class is named default it will be assigned to all classes without specific class definitions.\n\n```\n    classDef default fill:#f9f,stroke:#333,stroke-width:4px;\n```\n\n## Basic support for fontawesome\n\nIt is possible to add icons from fontawesome.\n\nThe icons are accessed via the syntax fa:#icon class name#.\n\n```mermaid-example\nflowchart TD\n    B["fa:fa-twitter for peace"]\n    B-->C[fa:fa-ban forbidden]\n    B-->D(fa:fa-spinner)\n    B-->E(A fa:fa-camera-retro perhaps?)\n```\n\n```mermaid\nflowchart TD\n    B["fa:fa-twitter for peace"]\n    B-->C[fa:fa-ban forbidden]\n    B-->D(fa:fa-spinner)\n    B-->E(A fa:fa-camera-retro perhaps?)\n```\n\nThere are two ways to display these FontAwesome icons:\n\n### Register FontAwesome icon packs (v11.7.0+)\n\nYou can register your own FontAwesome icon pack following the ["Registering icon packs" instructions](../config/icons.md).\n\nSupported prefixes: `fa`, `fab`, `fas`, `far`, `fal`, `fad`.\n\n> **Note**\n> Note that it will fall back to FontAwesome CSS if FontAwesome packs are not registered.\n\n### Register FontAwesome CSS\n\nMermaid supports Font Awesome if the CSS is included on the website.\nMermaid does not have any restriction on the version of Font Awesome that can be used.\n\nPlease refer the [Official Font Awesome Documentation](https://fontawesome.com/start) on how to include it in your website.\n\nAdding this snippet in the `<head>` would add support for Font Awesome v6.5.1\n\n```html\n<link\n  href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css"\n  rel="stylesheet"\n/>\n```\n\n### Custom icons\n\nIt is possible to use custom icons served from Font Awesome as long as the website imports the corresponding kit.\n\nNote that this is currently a paid feature from Font Awesome.\n\nFor custom icons, you need to use the `fak` prefix.\n\n**Example**\n\n```\nflowchart TD\n    B[fa:fa-twitter] %% standard icon\n    B-->E(fak:fa-custom-icon-name) %% custom icon\n```\n\nAnd trying to render it\n\n```mermaid-example\nflowchart TD\n    B["fa:fa-twitter for peace"]\n    B-->C["fab:fa-truck-bold a custom icon"]\n```\n\n```mermaid\nflowchart TD\n    B["fa:fa-twitter for peace"]\n    B-->C["fab:fa-truck-bold a custom icon"]\n```\n\n## Graph declarations with spaces between vertices and link and without semicolon\n\n- In graph declarations, the statements also can now end without a semicolon. After release 0.2.16, ending a graph statement with semicolon is just optional. So the below graph declaration is also valid along with the old declarations of the graph.\n\n- A single space is allowed between vertices and the link. However there should not be any space between a vertex and its text and a link and its text. The old syntax of graph declaration will also work and hence this new feature is optional and is introduced to improve readability.\n\nBelow is the new declaration of the graph edges which is also valid along with the old declaration of the graph edges.\n\n```mermaid-example\nflowchart LR\n    A[Hard edge] -->|Link text| B(Round edge)\n    B --> C{Decision}\n    C -->|One| D[Result one]\n    C -->|Two| E[Result two]\n```\n\n```mermaid\nflowchart LR\n    A[Hard edge] -->|Link text| B(Round edge)\n    B --> C{Decision}\n    C -->|One| D[Result one]\n    C -->|Two| E[Result two]\n```\n\n## Configuration\n\n### Renderer\n\nThe layout of the diagram is done with the renderer. The default renderer is dagre.\n\nStarting with Mermaid version 9.4, you can use an alternate renderer named elk. The elk renderer is better for larger and/or more complex diagrams.\n\nThe _elk_ renderer is an experimental feature.\nYou can change the renderer to elk by adding this directive:\n\n```\nconfig:\n  flowchart:\n    defaultRenderer: "elk"\n```\n\n> **Note**\n> Note that the site needs to use mermaid version 9.4+ for this to work and have this featured enabled in the lazy-loading configuration.\n\n### Width\n\nIt is possible to adjust the width of the rendered flowchart.\n\nThis is done by defining **mermaid.flowchartConfig** or by the CLI to use a JSON file with the configuration. How to use the CLI is described in the mermaidCLI page.\nmermaid.flowchartConfig can be set to a JSON string with config parameters or the corresponding object.\n\n```javascript\nmermaid.flowchartConfig = {\n    width: 100%\n}\n```\n\n<!--- cspell:ignore lagom --->\n';
+const __vite_glob_0_30 = '> **Warning**\n>\n> ## THIS IS AN AUTOGENERATED FILE. DO NOT EDIT.\n>\n> ## Please edit the corresponding file in [/packages/mermaid/src/docs/syntax/gantt.md](../../packages/mermaid/src/docs/syntax/gantt.md).\n\n# Gantt diagrams\n\n> A Gantt chart is a type of bar chart, first developed by Karol Adamiecki in 1896, and independently by Henry Gantt in the 1910s, that illustrates a project schedule and the amount of time it would take for any one project to finish. Gantt charts illustrate number of days between the start and finish dates of the terminal elements and summary elements of a project.\n\n## A note to users\n\nGantt Charts will record each scheduled task as one continuous bar that extends from the left to the right. The x axis represents time and the y records the different tasks and the order in which they are to be completed.\n\nIt is important to remember that when a date, day, or collection of dates specific to a task are "excluded", the Gantt Chart will accommodate those changes by extending an equal number of days, towards the right, not by creating a gap inside the task.\nAs shown here ![](./img/Gantt-excluded-days-within.png)\n\nHowever, if the excluded dates are between two tasks that are set to start consecutively, the excluded dates will be skipped graphically and left blank, and the following task will begin after the end of the excluded dates.\nAs shown here ![](./img/Gantt-long-weekend-look.png)\n\nA Gantt chart is useful for tracking the amount of time it would take before a project is finished, but it can also be used to graphically represent "non-working days", with a few tweaks.\n\nMermaid can render Gantt diagrams as SVG, PNG or a MarkDown link that can be pasted into docs.\n\n```mermaid-example\ngantt\n    title A Gantt Diagram\n    dateFormat YYYY-MM-DD\n    section Section\n        A task          :a1, 2014-01-01, 30d\n        Another task    :after a1, 20d\n    section Another\n        Task in Another :2014-01-12, 12d\n        another task    :24d\n```\n\n```mermaid\ngantt\n    title A Gantt Diagram\n    dateFormat YYYY-MM-DD\n    section Section\n        A task          :a1, 2014-01-01, 30d\n        Another task    :after a1, 20d\n    section Another\n        Task in Another :2014-01-12, 12d\n        another task    :24d\n```\n\n## Syntax\n\n```mermaid-example\ngantt\n    dateFormat  YYYY-MM-DD\n    title       Adding GANTT diagram functionality to mermaid\n    excludes    weekends\n    %% (`excludes` accepts specific dates in YYYY-MM-DD format, days of the week ("sunday") or "weekends", but not the word "weekdays".)\n\n    section A section\n    Completed task            :done,    des1, 2014-01-06,2014-01-08\n    Active task               :active,  des2, 2014-01-09, 3d\n    Future task               :         des3, after des2, 5d\n    Future task2              :         des4, after des3, 5d\n\n    section Critical tasks\n    Completed task in the critical line :crit, done, 2014-01-06,24h\n    Implement parser and jison          :crit, done, after des1, 2d\n    Create tests for parser             :crit, active, 3d\n    Future task in critical line        :crit, 5d\n    Create tests for renderer           :2d\n    Add to mermaid                      :until isadded\n    Functionality added                 :milestone, isadded, 2014-01-25, 0d\n\n    section Documentation\n    Describe gantt syntax               :active, a1, after des1, 3d\n    Add gantt diagram to demo page      :after a1  , 20h\n    Add another diagram to demo page    :doc1, after a1  , 48h\n\n    section Last section\n    Describe gantt syntax               :after doc1, 3d\n    Add gantt diagram to demo page      :20h\n    Add another diagram to demo page    :48h\n```\n\n```mermaid\ngantt\n    dateFormat  YYYY-MM-DD\n    title       Adding GANTT diagram functionality to mermaid\n    excludes    weekends\n    %% (`excludes` accepts specific dates in YYYY-MM-DD format, days of the week ("sunday") or "weekends", but not the word "weekdays".)\n\n    section A section\n    Completed task            :done,    des1, 2014-01-06,2014-01-08\n    Active task               :active,  des2, 2014-01-09, 3d\n    Future task               :         des3, after des2, 5d\n    Future task2              :         des4, after des3, 5d\n\n    section Critical tasks\n    Completed task in the critical line :crit, done, 2014-01-06,24h\n    Implement parser and jison          :crit, done, after des1, 2d\n    Create tests for parser             :crit, active, 3d\n    Future task in critical line        :crit, 5d\n    Create tests for renderer           :2d\n    Add to mermaid                      :until isadded\n    Functionality added                 :milestone, isadded, 2014-01-25, 0d\n\n    section Documentation\n    Describe gantt syntax               :active, a1, after des1, 3d\n    Add gantt diagram to demo page      :after a1  , 20h\n    Add another diagram to demo page    :doc1, after a1  , 48h\n\n    section Last section\n    Describe gantt syntax               :after doc1, 3d\n    Add gantt diagram to demo page      :20h\n    Add another diagram to demo page    :48h\n```\n\nTasks are by default sequential. A task start date defaults to the end date of the preceding task.\n\nA colon, `:`, separates the task title from its metadata.\nMetadata items are separated by a comma, `,`. Valid tags are `active`, `done`, `crit`, and `milestone`. Tags are optional, but if used, they must be specified first.\nAfter processing the tags, the remaining metadata items are interpreted as follows:\n\n1. If a single item is specified, it determines when the task ends. It can either be a specific date/time or a duration. If a duration is specified, it is added to the start date of the task to determine the end date of the task, taking into account any exclusions.\n2. If two items are specified, the last item is interpreted as in the previous case. The first item can either specify an explicit start date/time (in the format specified by `dateFormat`) or reference another task using `after <otherTaskID> [[otherTaskID2 [otherTaskID3]]...]`. In the latter case, the start date of the task will be set according to the latest end date of any referenced task.\n3. If three items are specified, the last two will be interpreted as in the previous case. The first item will denote the ID of the task, which can be referenced using the `later <taskID>` syntax.\n\n| Metadata syntax                                      | Start date                                          | End date                                              | ID       |\n| ---------------------------------------------------- | --------------------------------------------------- | ----------------------------------------------------- | -------- |\n| `<taskID>, <startDate>, <endDate>`                   | `startdate` as interpreted using `dateformat`       | `endDate` as interpreted using `dateformat`           | `taskID` |\n| `<taskID>, <startDate>, <length>`                    | `startdate` as interpreted using `dateformat`       | Start date + `length`                                 | `taskID` |\n| `<taskID>, after <otherTaskId>, <endDate>`           | End date of previously specified task `otherTaskID` | `endDate` as interpreted using `dateformat`           | `taskID` |\n| `<taskID>, after <otherTaskId>, <length>`            | End date of previously specified task `otherTaskID` | Start date + `length`                                 | `taskID` |\n| `<taskID>, <startDate>, until <otherTaskId>`         | `startdate` as interpreted using `dateformat`       | Start date of previously specified task `otherTaskID` | `taskID` |\n| `<taskID>, after <otherTaskId>, until <otherTaskId>` | End date of previously specified task `otherTaskID` | Start date of previously specified task `otherTaskID` | `taskID` |\n| `<startDate>, <endDate>`                             | `startdate` as interpreted using `dateformat`       | `enddate` as interpreted using `dateformat`           | n/a      |\n| `<startDate>, <length>`                              | `startdate` as interpreted using `dateformat`       | Start date + `length`                                 | n/a      |\n| `after <otherTaskID>, <endDate>`                     | End date of previously specified task `otherTaskID` | `enddate` as interpreted using `dateformat`           | n/a      |\n| `after <otherTaskID>, <length>`                      | End date of previously specified task `otherTaskID` | Start date + `length`                                 | n/a      |\n| `<startDate>, until <otherTaskId>`                   | `startdate` as interpreted using `dateformat`       | Start date of previously specified task `otherTaskID` | n/a      |\n| `after <otherTaskId>, until <otherTaskId>`           | End date of previously specified task `otherTaskID` | Start date of previously specified task `otherTaskID` | n/a      |\n| `<endDate>`                                          | End date of preceding task                          | `enddate` as interpreted using `dateformat`           | n/a      |\n| `<length>`                                           | End date of preceding task                          | Start date + `length`                                 | n/a      |\n| `until <otherTaskId>`                                | End date of preceding task                          | Start date of previously specified task `otherTaskID` | n/a      |\n\n> **Note**\n> Support for keyword `until` was added in (v10.9.0+). This can be used to define a task which is running until some other specific task or milestone starts.\n\n#### Duration format\n\nWhen specifying a `<length>`, use a number followed by one of these unit suffixes:\n\n| Unit         | Suffix | Example |\n| ------------ | ------ | ------- |\n| Milliseconds | `ms`   | `500ms` |\n| Seconds      | `s`    | `30s`   |\n| Minutes      | `m`    | `30m`   |\n| Hours        | `h`    | `4h`    |\n| Days         | `d`    | `3d`    |\n| Weeks        | `w`    | `2w`    |\n| Months       | `M`    | `1M`    |\n| Years        | `y`    | `1y`    |\n\nDecimal values are also supported (e.g., `1.5d`). Invalid duration tokens (e.g., `3dX`) will be ignored and the task will default to zero duration.\n\nFor simplicity, the table does not show the use of multiple tasks listed with the `after` keyword. Here is an example of how to use it and how it\'s interpreted:\n\n```mermaid-example\ngantt\n    apple :a, 2017-07-20, 1w\n    banana :crit, b, 2017-07-23, 1d\n    cherry :active, c, after b a, 1d\n    kiwi   :d, 2017-07-20, until b c\n```\n\n```mermaid\ngantt\n    apple :a, 2017-07-20, 1w\n    banana :crit, b, 2017-07-23, 1d\n    cherry :active, c, after b a, 1d\n    kiwi   :d, 2017-07-20, until b c\n```\n\n### Title\n\nThe `title` is an _optional_ string to be displayed at the top of the Gantt chart to describe the chart as a whole.\n\n### Excludes\n\nThe `excludes` is an _optional_ attribute that accepts specific dates in YYYY-MM-DD format, days of the week ("sunday") or "weekends", but not the word "weekdays".\nThese date will be marked on the graph, and be excluded from the duration calculation of tasks. Meaning that if there are excluded dates during a task interval, the number of \'skipped\' days will be added to the end of the task to ensure the duration is as specified in the code.\n\nMultiple `excludes` lines are supported and their tokens are concatenated, so long exclusion lists can be split across grouped lines with comments:\n\n```\ngantt\n    dateFormat DD-MM-YYYY\n    excludes weekends\n    %% week 7 is winter break\n    excludes 10-02-2025 11-02-2025 12-02-2025 13-02-2025 14-02-2025\n    %% workers holiday 1 maj\n    excludes 01-05-2025\n```\n\n#### Weekend (v\\11.0.0+)\n\nWhen excluding weekends, it is possible to configure the weekends to be either Friday and Saturday or Saturday and Sunday. By default weekends are Saturday and Sunday.\nTo define the weekend start day, there is an _optional_ attribute `weekend` that can be added in a new line followed by either `friday` or `saturday`.\n\n```mermaid-example\ngantt\n    title A Gantt Diagram Excluding Fri - Sat weekends\n    dateFormat YYYY-MM-DD\n    excludes weekends\n    weekend friday\n    section Section\n        A task          :a1, 2024-01-01, 30d\n        Another task    :after a1, 20d\n```\n\n```mermaid\ngantt\n    title A Gantt Diagram Excluding Fri - Sat weekends\n    dateFormat YYYY-MM-DD\n    excludes weekends\n    weekend friday\n    section Section\n        A task          :a1, 2024-01-01, 30d\n        Another task    :after a1, 20d\n```\n\n### Section statements\n\nYou can divide the chart into various sections, for example to separate different parts of a project like development and documentation.\n\nTo do so, start a line with the `section` keyword and give it a name. (Note that unlike with the [title for the entire chart](#title), this name is _required_.\n\n### Milestones\n\nYou can add milestones to the diagrams. Milestones differ from tasks as they represent a single instant in time and are identified by the keyword `milestone`. Below is an example on how to use milestones. As you may notice, the exact location of the milestone is determined by the initial date for the milestone and the "duration" of the task this way: _initial date_+_duration_/2.\n\n```mermaid-example\ngantt\n    dateFormat HH:mm\n    axisFormat %H:%M\n    Initial milestone : milestone, m1, 17:49, 2m\n    Task A : 10m\n    Task B : 5m\n    Final milestone : milestone, m2, 18:08, 4m\n```\n\n```mermaid\ngantt\n    dateFormat HH:mm\n    axisFormat %H:%M\n    Initial milestone : milestone, m1, 17:49, 2m\n    Task A : 10m\n    Task B : 5m\n    Final milestone : milestone, m2, 18:08, 4m\n```\n\n### Vertical Markers\n\nThe `vert` keyword lets you add vertical lines to your Gantt chart, making it easy to highlight important dates like deadlines, events, or checkpoints. These markers extend across the entire chart and are positioned based on the date you provide. Unlike milestones, vertical markers don’t take up a row. They’re purely visual reference points that help break up the timeline and make important moments easier to spot.\n\n```mermaid-example\ngantt\n    dateFormat HH:mm\n    axisFormat %H:%M\n    Initial vert : vert, v1, 17:30, 2m\n    Task A : 3m\n    Task B : 8m\n    Final vert : vert, v2, 17:58, 4m\n```\n\n```mermaid\ngantt\n    dateFormat HH:mm\n    axisFormat %H:%M\n    Initial vert : vert, v1, 17:30, 2m\n    Task A : 3m\n    Task B : 8m\n    Final vert : vert, v2, 17:58, 4m\n```\n\n## Setting dates\n\n`dateFormat` defines the format of the date **input** of your gantt elements. How these dates are represented in the rendered chart **output** are defined by `axisFormat`.\n\n### Input date format\n\nThe default input date format is `YYYY-MM-DD`. You can define your custom `dateFormat`.\n\n```markdown\ndateFormat YYYY-MM-DD\n```\n\nThe following formatting options are supported:\n\n| Input      | Example        | Description                                            |\n| ---------- | -------------- | ------------------------------------------------------ |\n| `YYYY`     | 2014           | 4 digit year                                           |\n| `YY`       | 14             | 2 digit year                                           |\n| `Q`        | 1..4           | Quarter of year. Sets month to first month in quarter. |\n| `M MM`     | 1..12          | Month number                                           |\n| `MMM MMMM` | January..Dec   | Month name in locale set by `dayjs.locale()`           |\n| `D DD`     | 1..31          | Day of month                                           |\n| `Do`       | 1st..31st      | Day of month with ordinal                              |\n| `DDD DDDD` | 1..365         | Day of year                                            |\n| `X`        | 1410715640.579 | Unix timestamp                                         |\n| `x`        | 1410715640579  | Unix ms timestamp                                      |\n| `H HH`     | 0..23          | 24 hour time                                           |\n| `h hh`     | 1..12          | 12 hour time used with `a A`.                          |\n| `a A`      | am pm          | Post or ante meridiem                                  |\n| `m mm`     | 0..59          | Minutes                                                |\n| `s ss`     | 0..59          | Seconds                                                |\n| `S`        | 0..9           | Tenths of a second                                     |\n| `SS`       | 0..99          | Hundreds of a second                                   |\n| `SSS`      | 0..999         | Thousandths of a second                                |\n| `Z ZZ`     | +12:00         | Offset from UTC as +-HH:mm, +-HHmm, or Z               |\n\nMore info in: <https://day.js.org/docs/en/parse/string-format/>\n\n### Output date format on the axis\n\nThe default output date format is `YYYY-MM-DD`. You can define your custom `axisFormat`, like `2020-Q1` for the first quarter of the year 2020.\n\n```markdown\naxisFormat %Y-%m-%d\n```\n\nThe following formatting strings are supported:\n\n| Format | Definition                                                                                 |\n| ------ | ------------------------------------------------------------------------------------------ |\n| %a     | abbreviated weekday name                                                                   |\n| %A     | full weekday name                                                                          |\n| %b     | abbreviated month name                                                                     |\n| %B     | full month name                                                                            |\n| %c     | date and time, as "%a %b %e %H:%M:%S %Y"                                                   |\n| %d     | zero-padded day of the month as a decimal number \\[01,31]                                  |\n| %e     | space-padded day of the month as a decimal number \\[ 1,31]; equivalent to %\\_d             |\n| %H     | hour (24-hour clock) as a decimal number \\[00,23]                                          |\n| %I     | hour (12-hour clock) as a decimal number \\[01,12]                                          |\n| %j     | day of the year as a decimal number \\[001,366]                                             |\n| %m     | month as a decimal number \\[01,12]                                                         |\n| %M     | minute as a decimal number \\[00,59]                                                        |\n| %L     | milliseconds as a decimal number \\[000, 999]                                               |\n| %p     | either AM or PM                                                                            |\n| %S     | second as a decimal number \\[00,61]                                                        |\n| %U     | week number of the year (Sunday as the first day of the week) as a decimal number \\[00,53] |\n| %w     | weekday as a decimal number \\[0(Sunday),6]                                                 |\n| %W     | week number of the year (Monday as the first day of the week) as a decimal number \\[00,53] |\n| %x     | date, as "%m/%d/%Y"                                                                        |\n| %X     | time, as "%H:%M:%S"                                                                        |\n| %y     | year without century as a decimal number \\[00,99]                                          |\n| %Y     | year with century as a decimal number                                                      |\n| %Z     | time zone offset, such as "-0700"                                                          |\n| %%     | a literal "%" character                                                                    |\n\nMore info in: <https://github.com/d3/d3-time-format/tree/v4.0.0#locale_format>\n\n### Axis ticks (v10.3.0+)\n\nThe default output ticks are auto. You can custom your `tickInterval`, like `1day` or `1week`.\n\n```markdown\ntickInterval 1day\n```\n\nThe pattern is:\n\n```javascript\n/^([1-9][0-9]*)(millisecond|second|minute|hour|day|week|month)$/;\n```\n\nMore info in: <https://github.com/d3/d3-time#interval_every>\n\nWeek-based `tickInterval`s start the week on sunday by default. If you wish to specify another weekday on which the `tickInterval` should start, use the `weekday` option:\n\n```mermaid-example\ngantt\n  tickInterval 1week\n  weekday monday\n```\n\n```mermaid\ngantt\n  tickInterval 1week\n  weekday monday\n```\n\n> **Warning**\n> `millisecond` and `second` support was added in v10.3.0\n\n## Output in compact mode\n\nThe compact mode allows you to display multiple tasks in the same row. Compact mode can be enabled for a gantt chart by setting the display mode of the graph via preceding YAML settings.\n\n```mermaid-example\n---\ndisplayMode: compact\n---\ngantt\n    title A Gantt Diagram\n    dateFormat  YYYY-MM-DD\n\n    section Section\n    A task           :a1, 2014-01-01, 30d\n    Another task     :a2, 2014-01-20, 25d\n    Another one      :a3, 2014-02-10, 20d\n```\n\n```mermaid\n---\ndisplayMode: compact\n---\ngantt\n    title A Gantt Diagram\n    dateFormat  YYYY-MM-DD\n\n    section Section\n    A task           :a1, 2014-01-01, 30d\n    Another task     :a2, 2014-01-20, 25d\n    Another one      :a3, 2014-02-10, 20d\n```\n\n## Comments\n\nComments can be entered within a gantt chart, which will be ignored by the parser. Comments need to be on their own line and must be prefaced with `%%` (double percent signs). Any text after the start of the comment to the next newline will be treated as a comment, including any diagram syntax.\n\n```mermaid-example\ngantt\n    title A Gantt Diagram\n    %% This is a comment\n    dateFormat YYYY-MM-DD\n    section Section\n        A task          :a1, 2014-01-01, 30d\n        Another task    :after a1, 20d\n    section Another\n        Task in Another :2014-01-12, 12d\n        another task    :24d\n```\n\n```mermaid\ngantt\n    title A Gantt Diagram\n    %% This is a comment\n    dateFormat YYYY-MM-DD\n    section Section\n        A task          :a1, 2014-01-01, 30d\n        Another task    :after a1, 20d\n    section Another\n        Task in Another :2014-01-12, 12d\n        another task    :24d\n```\n\n## Styling\n\nStyling of the Gantt diagram is done by defining a number of CSS classes. During rendering, these classes are extracted from the file located at src/diagrams/gantt/styles.js\n\n### Classes used\n\n| Class                 | Description                                                            |\n| --------------------- | ---------------------------------------------------------------------- |\n| grid.tick             | Styling for the Grid Lines                                             |\n| grid.path             | Styling for the Grid\'s borders                                         |\n| .taskText             | Task Text Styling                                                      |\n| .taskTextOutsideRight | Styling for Task Text that exceeds the activity bar towards the right. |\n| .taskTextOutsideLeft  | Styling for Task Text that exceeds the activity bar, towards the left. |\n| todayMarker           | Toggle and Styling for the "Today Marker"                              |\n\n### Sample stylesheet\n\n```css\n.grid .tick {\n  stroke: lightgrey;\n  opacity: 0.3;\n  shape-rendering: crispEdges;\n}\n.grid path {\n  stroke-width: 0;\n}\n\n#tag {\n  color: white;\n  background: #fa283d;\n  width: 150px;\n  position: absolute;\n  display: none;\n  padding: 3px 6px;\n  margin-left: -80px;\n  font-size: 11px;\n}\n\n#tag:before {\n  border: solid transparent;\n  content: \' \';\n  height: 0;\n  left: 50%;\n  margin-left: -5px;\n  position: absolute;\n  width: 0;\n  border-width: 10px;\n  border-bottom-color: #fa283d;\n  top: -20px;\n}\n.taskText {\n  fill: white;\n  text-anchor: middle;\n}\n.taskTextOutsideRight {\n  fill: black;\n  text-anchor: start;\n}\n.taskTextOutsideLeft {\n  fill: black;\n  text-anchor: end;\n}\n```\n\n## Today marker\n\nYou can style or hide the marker for the current date. To style it, add a value for the `todayMarker` key.\n\n```\ntodayMarker stroke-width:5px,stroke:#0f0,opacity:0.5\n```\n\nTo hide the marker, set `todayMarker` to `off`.\n\n```\ntodayMarker off\n```\n\n## Configuration\n\nIt is possible to adjust the margins for rendering the gantt diagram.\n\nThis is done by defining the `ganttConfig` part of the configuration object.\nHow to use the CLI is described in the [mermaidCLI](../config/mermaidCLI.md) page.\n\nmermaid.ganttConfig can be set to a JSON string with config parameters or the corresponding object.\n\n```javascript\nmermaid.ganttConfig = {\n  titleTopMargin: 25, // Margin top for the text over the diagram\n  barHeight: 20, // The height of the bars in the graph\n  barGap: 4, // The margin between the different activities in the gantt diagram\n  topPadding: 75, // Margin between title and gantt diagram and between axis and gantt diagram.\n  rightPadding: 75, // The space allocated for the section name to the right of the activities\n  leftPadding: 75, // The space allocated for the section name to the left of the activities\n  gridLineStartPadding: 10, // Vertical starting position of the grid lines\n  fontSize: 12, // Font size\n  sectionFontSize: 24, // Font size for sections\n  numberSectionStyles: 1, // The number of alternating section styles\n  axisFormat: \'%d/%m\', // Date/time format of the axis\n  tickInterval: \'1week\', // Axis ticks\n  topAxis: true, // When this flag is set, date labels will be added to the top of the chart\n  displayMode: \'compact\', // Turns compact mode on\n  weekday: \'sunday\', // On which day a week-based interval should start\n};\n```\n\n### Possible configuration params:\n\n| Param           | Description                                                                                                                                | Default value |\n| --------------- | ------------------------------------------------------------------------------------------------------------------------------------------ | ------------- |\n| mirrorActor     | Turns on/off the rendering of actors below the diagram as well as above it                                                                 | false         |\n| bottomMarginAdj | Adjusts how far down the graph ended. Wide borders styles with css could generate unwanted clipping which is why this config param exists. | 1             |\n\n## Interaction\n\nIt is possible to bind a click event to a task. The click can lead to either a javascript callback or to a link which will be opened in the current browser tab. **Note**: This functionality is disabled when using `securityLevel=\'strict\'` and enabled when using `securityLevel=\'loose\'`.\n\n```\nclick taskId call callback(arguments)\nclick taskId href URL\n```\n\n- taskId is the id of the task\n- callback is the name of a javascript function defined on the page displaying the graph, the function will be called with the taskId as the parameter if no other arguments are specified.\n\nBeginner\'s tip—a full example using interactive links in an HTML context:\n\n```html\n<body>\n  <pre class="mermaid">\n    gantt\n      dateFormat  YYYY-MM-DD\n\n      section Clickable\n      Visit mermaidjs         :active, cl1, 2014-01-07, 3d\n      Print arguments         :cl2, after cl1, 3d\n      Print task              :cl3, after cl2, 3d\n\n      click cl1 href "https://mermaidjs.github.io/"\n      click cl2 call printArguments("test1", "test2", test3)\n      click cl3 call printTask()\n  </pre>\n\n  <script>\n    const printArguments = function (arg1, arg2, arg3) {\n      alert(\'printArguments called with arguments: \' + arg1 + \', \' + arg2 + \', \' + arg3);\n    };\n    const printTask = function (taskId) {\n      alert(\'taskId: \' + taskId);\n    };\n    const config = {\n      startOnLoad: true,\n      securityLevel: \'loose\',\n    };\n    mermaid.initialize(config);\n  <\/script>\n</body>\n```\n\n## Examples\n\n### Bar chart (using gantt chart)\n\n```mermaid-example\ngantt\n    title Git Issues - days since last update\n    dateFormat X\n    axisFormat %s\n    section Issue19062\n    71   : 0, 71\n    section Issue19401\n    36   : 0, 36\n    section Issue193\n    34   : 0, 34\n    section Issue7441\n    9    : 0, 9\n    section Issue1300\n    5    : 0, 5\n```\n\n```mermaid\ngantt\n    title Git Issues - days since last update\n    dateFormat X\n    axisFormat %s\n    section Issue19062\n    71   : 0, 71\n    section Issue19401\n    36   : 0, 36\n    section Issue193\n    34   : 0, 34\n    section Issue7441\n    9    : 0, 9\n    section Issue1300\n    5    : 0, 5\n```\n\n### Timeline (with comments, CSS, config in frontmatter)\n\n```mermaid-example\n---\n    # Frontmatter config, YAML comments\n    title: Ignored if specified in chart\n    displayMode: compact     #gantt specific setting but works at this level too\n    config:\n#        theme: forest\n#        themeCSS: " #item36 { fill: CadetBlue } "\n        themeCSS: " // YAML supports multiline strings using a newline markers: \\n\n            #item36 { fill: CadetBlue }       \\n\n\n            // Custom marker workaround CSS from forum (below)    \\n\n            rect[id^=workaround] { height: calc(100% - 50px) ; transform: translate(9px, 25px); y: 0; width: 1.5px; stroke: none; fill: red; }   \\n\n            text[id^=workaround] { fill: red; y: 100%; font-size: 15px;}\n        "\n        gantt:\n            useWidth: 400\n            rightPadding: 0\n            topAxis: true  #false\n            numberSectionStyles: 2\n---\ngantt\n    title Timeline - Gantt Sampler\n    dateFormat YYYY\n    axisFormat %y\n    %% this next line doesn\'t recognise \'decade\' or \'year\', but will silently ignore\n    tickInterval 1decade\n\n    section Issue19062\n    71   :            item71, 1900, 1930\n    section Issue19401\n    36   :            item36, 1913, 1935\n    section Issue1300\n    94   :            item94, 1910, 1915\n    5    :            item5,  1920, 1925\n    0    : milestone, item0,  1918, 1s\n    9    : vert,              1906, 1s   %% not yet official\n    64   : workaround,        1923, 1s   %% custom CSS object https://github.com/mermaid-js/mermaid/issues/3250\n```\n\n```mermaid\n---\n    # Frontmatter config, YAML comments\n    title: Ignored if specified in chart\n    displayMode: compact     #gantt specific setting but works at this level too\n    config:\n#        theme: forest\n#        themeCSS: " #item36 { fill: CadetBlue } "\n        themeCSS: " // YAML supports multiline strings using a newline markers: \\n\n            #item36 { fill: CadetBlue }       \\n\n\n            // Custom marker workaround CSS from forum (below)    \\n\n            rect[id^=workaround] { height: calc(100% - 50px) ; transform: translate(9px, 25px); y: 0; width: 1.5px; stroke: none; fill: red; }   \\n\n            text[id^=workaround] { fill: red; y: 100%; font-size: 15px;}\n        "\n        gantt:\n            useWidth: 400\n            rightPadding: 0\n            topAxis: true  #false\n            numberSectionStyles: 2\n---\ngantt\n    title Timeline - Gantt Sampler\n    dateFormat YYYY\n    axisFormat %y\n    %% this next line doesn\'t recognise \'decade\' or \'year\', but will silently ignore\n    tickInterval 1decade\n\n    section Issue19062\n    71   :            item71, 1900, 1930\n    section Issue19401\n    36   :            item36, 1913, 1935\n    section Issue1300\n    94   :            item94, 1910, 1915\n    5    :            item5,  1920, 1925\n    0    : milestone, item0,  1918, 1s\n    9    : vert,              1906, 1s   %% not yet official\n    64   : workaround,        1923, 1s   %% custom CSS object https://github.com/mermaid-js/mermaid/issues/3250\n```\n\n<!--- cspell:ignore isadded --->\n';
+const __vite_glob_0_31 = "> **Warning**\n>\n> ## THIS IS AN AUTOGENERATED FILE. DO NOT EDIT.\n>\n> ## Please edit the corresponding file in [/packages/mermaid/src/docs/syntax/gitgraph.md](../../packages/mermaid/src/docs/syntax/gitgraph.md).\n\n# GitGraph Diagrams\n\n> A Git Graph is a pictorial representation of git commits and git actions(commands) on various branches.\n\nThese kind of diagram are particularly helpful to developers and devops teams to share their Git branching strategies. For example, it makes it easier to visualize how git flow works.\n\nMermaid can render Git diagrams\n\n```mermaid-example\n---\ntitle: Example Git diagram\n---\ngitGraph\n   commit\n   commit\n   branch develop\n   checkout develop\n   commit\n   commit\n   checkout main\n   merge develop\n   commit\n   commit\n```\n\n```mermaid\n---\ntitle: Example Git diagram\n---\ngitGraph\n   commit\n   commit\n   branch develop\n   checkout develop\n   commit\n   commit\n   checkout main\n   merge develop\n   commit\n   commit\n```\n\nIn Mermaid, we support the basic git operations like:\n\n- _commit_ : Representing a new commit on the current branch.\n- _branch_ : To create & switch to a new branch, setting it as the current branch.\n- _checkout_ : To checking out an existing branch and setting it as the current branch.\n- _merge_ : To merge an existing branch onto the current branch.\n\nWith the help of these key git commands, you will be able to draw a gitgraph in Mermaid very easily and quickly.\nEntity names are often capitalized, although there is no accepted standard on this, and it is not required in Mermaid.\n\n**NOTE**: `checkout` and `switch` can be used interchangeably.\n\n## Syntax\n\nMermaid syntax for a gitgraph is very straight-forward and simple. It follows a declarative-approach, where each commit is drawn on the timeline in the diagram, in order of its occurrences/presence in code. Basically, it follows the insertion order for each command.\n\nFirst thing you do is to declare your diagram type using the **gitgraph** keyword. This `gitgraph` keyword, tells Mermaid that you wish to draw a gitgraph, and parse the diagram code accordingly.\n\nEach gitgraph, is initialized with **_main_** branch. So unless you create a different branch, by-default the commits will go to the main branch. This is driven with how git works, where in the beginning you always start with the main branch (formerly called as **_master_** branch). And by-default, `main` branch is set as your **_current branch_**.\n\nYou make use of **_commit_** keyword to register a commit on the current branch. Let see how this works:\n\nA simple gitgraph showing three commits on the default (**_main_**) branch:\n\n```mermaid-example\n    gitGraph\n       commit\n       commit\n       commit\n```\n\n```mermaid\n    gitGraph\n       commit\n       commit\n       commit\n```\n\nIf you look closely at the previous example, you can see the default branch `main` along with three commits. Also, notice that by default each commit has been given a unique & random ID. What if you wanted to give your own custom ID to a commit? Yes, it is possible to do that with Mermaid.\n\n### Adding custom commit id\n\nFor a given commit you may specify a custom ID at the time of declaring it using the `id` attribute, followed by `:` and your custom value within a `\"\"` quote. For example: `commit id: \"your_custom_id\"`\n\nLet us see how this works with the help of the following diagram:\n\n```mermaid-example\n    gitGraph\n       commit id: \"Alpha\"\n       commit id: \"Beta\"\n       commit id: \"Gamma\"\n```\n\n```mermaid\n    gitGraph\n       commit id: \"Alpha\"\n       commit id: \"Beta\"\n       commit id: \"Gamma\"\n```\n\nIn this example, we have given our custom IDs to the commits.\n\n### Modifying commit type\n\nIn Mermaid, a commit can be of three type, which render a bit different in the diagram. These types are:\n\n- `NORMAL` : Default commit type. Represented by a solid circle in the diagram\n- `REVERSE` : To emphasize a commit as a reverse commit. Represented by a crossed solid circle in the diagram.\n- `HIGHLIGHT` : To highlight a particular commit in the diagram. Represented by a filled rectangle in the diagram.\n\nFor a given commit you may specify its type at the time of declaring it using the `type` attribute, followed by `:` and the required type option discussed above. For example: `commit type: HIGHLIGHT`\n\nNOTE: If no commit type is specified, `NORMAL` is picked as default.\n\nLet us see how these different commit type look with the help of the following diagram:\n\n```mermaid-example\n    gitGraph\n       commit id: \"Normal\"\n       commit\n       commit id: \"Reverse\" type: REVERSE\n       commit\n       commit id: \"Highlight\" type: HIGHLIGHT\n       commit\n```\n\n```mermaid\n    gitGraph\n       commit id: \"Normal\"\n       commit\n       commit id: \"Reverse\" type: REVERSE\n       commit\n       commit id: \"Highlight\" type: HIGHLIGHT\n       commit\n```\n\nIn this example, we have specified different types to each commit. Also, see how we have included both `id` and `type` together at the time of declaring our commits.\n\n### Adding Tags\n\nFor a given commit you may decorate it as a **tag**, similar to the concept of tags or release version in git world.\nYou can attach a custom tag at the time of declaring a commit using the `tag` attribute, followed by `:` and your custom value within `\"\"` quote. For example: `commit tag: \"your_custom_tag\"`\n\nLet us see how this works with the help of the following diagram:\n\n```mermaid-example\n    gitGraph\n       commit\n       commit id: \"Normal\" tag: \"v1.0.0\"\n       commit\n       commit id: \"Reverse\" type: REVERSE tag: \"RC_1\"\n       commit\n       commit id: \"Highlight\" type: HIGHLIGHT tag: \"8.8.4\"\n       commit\n```\n\n```mermaid\n    gitGraph\n       commit\n       commit id: \"Normal\" tag: \"v1.0.0\"\n       commit\n       commit id: \"Reverse\" type: REVERSE tag: \"RC_1\"\n       commit\n       commit id: \"Highlight\" type: HIGHLIGHT tag: \"8.8.4\"\n       commit\n```\n\nIn this example, we have given custom tags to the commits. Also, see how we have combined all these attributes in a single commit declaration. You can mix-match these attributes as you like.\n\n### Create a new branch\n\nIn Mermaid, in-order to create a new branch, you make use of the `branch` keyword. You also need to provide a name of the new branch. The name has to be unique and cannot be that of an existing branch. A branch name that could be confused for a keyword must be quoted within `\"\"`. Usage examples: `branch develop`, `branch \"cherry-pick\"`\n\nWhen Mermaid, reads the `branch` keyword, it creates a new branch and sets it as the current branch. Equivalent to you creating a new branch and checking it out in Git world.\n\nLet see this in an example:\n\n```mermaid-example\n    gitGraph\n       commit\n       commit\n       branch develop\n       commit\n       commit\n       commit\n```\n\n```mermaid\n    gitGraph\n       commit\n       commit\n       branch develop\n       commit\n       commit\n       commit\n```\n\nIn this example, see how we started with default `main` branch, and pushed two commits on that.\nThen we created the `develop` branch, and all commits afterwards are put on the `develop` branch as it became the current branch.\n\n### Checking out an existing branch\n\nIn Mermaid, in order to switch to an existing branch, you make use of the `checkout` keyword. You also need to provide a name of an existing branch. If no branch is found with the given name, it will result in console error. Usage example: `checkout develop`\n\nWhen Mermaid, reads the `checkout` keyword, it finds the given branch and sets it as the current branch. Equivalent to checking out a branch in the Git world.\n\nLet see modify our previous example:\n\n```mermaid-example\n    gitGraph\n       commit\n       commit\n       branch develop\n       commit\n       commit\n       commit\n       checkout main\n       commit\n       commit\n```\n\n```mermaid\n    gitGraph\n       commit\n       commit\n       branch develop\n       commit\n       commit\n       commit\n       checkout main\n       commit\n       commit\n```\n\nIn this example, see how we started with default `main` branch, and pushed two commits on that.\nThen we created the `develop` branch, and all three commits afterwards are put on the `develop` branch as it became the current branch.\nAfter this we made use of the `checkout` keyword to set the current branch as `main`, and all commit that follow are registered against the current branch, i.e. `main`.\n\n### Merging two branches\n\nIn Mermaid, in order to merge or join to an existing branch, you make use of the `merge` keyword. You also need to provide the name of an existing branch to merge from. If no branch is found with the given name, it will result in console error. Also, you can only merge two separate branches, and cannot merge a branch with itself. In such case an error is throw.\n\nUsage example: `merge develop`\n\nWhen Mermaid, reads the `merge` keyword, it finds the given branch and its head commit (the last commit on that branch), and joins it with the head commit on the **current branch**. Each merge results in a **_merge commit_**, represented in the diagram with **filled double circle**.\n\nLet us modify our previous example to merge our two branches:\n\n```mermaid-example\n    gitGraph\n       commit\n       commit\n       branch develop\n       commit\n       commit\n       commit\n       checkout main\n       commit\n       commit\n       merge develop\n       commit\n       commit\n```\n\n```mermaid\n    gitGraph\n       commit\n       commit\n       branch develop\n       commit\n       commit\n       commit\n       checkout main\n       commit\n       commit\n       merge develop\n       commit\n       commit\n```\n\nIn this example, see how we started with default `main` branch, and pushed two commits on that.\nThen we created the `develop` branch, and all three commits afterwards are put on the `develop` branch as it became the current branch.\nAfter this we made use of the `checkout` keyword to set the current branch as `main`, and all commits that follow are registered against the current branch, i.e. `main`.\nAfter this we merge the `develop` branch onto the current branch `main`, resulting in a merge commit.\nSince the current branch at this point is still `main`, the last two commits are registered against that.\n\nYou can also decorate your merge with similar attributes as you did for the commit using:\n\n- `id`--> To override the default ID with custom ID\n- `tag`--> To add a custom tag to your merge commit\n- `type`--> To override the default shape of merge commit. Here you can use other commit type mentioned earlier.\n\nAnd you can choose to use none, some or all of these attributes together.\nFor example: `merge develop id: \"my_custom_id\" tag: \"my_custom_tag\" type: REVERSE`\n\nLet us see how this works with the help of the following diagram:\n\n```mermaid-example\n    gitGraph\n       commit id: \"1\"\n       commit id: \"2\"\n       branch nice_feature\n       checkout nice_feature\n       commit id: \"3\"\n       checkout main\n       commit id: \"4\"\n       checkout nice_feature\n       branch very_nice_feature\n       checkout very_nice_feature\n       commit id: \"5\"\n       checkout main\n       commit id: \"6\"\n       checkout nice_feature\n       commit id: \"7\"\n       checkout main\n       merge nice_feature id: \"customID\" tag: \"customTag\" type: REVERSE\n       checkout very_nice_feature\n       commit id: \"8\"\n       checkout main\n       commit id: \"9\"\n```\n\n```mermaid\n    gitGraph\n       commit id: \"1\"\n       commit id: \"2\"\n       branch nice_feature\n       checkout nice_feature\n       commit id: \"3\"\n       checkout main\n       commit id: \"4\"\n       checkout nice_feature\n       branch very_nice_feature\n       checkout very_nice_feature\n       commit id: \"5\"\n       checkout main\n       commit id: \"6\"\n       checkout nice_feature\n       commit id: \"7\"\n       checkout main\n       merge nice_feature id: \"customID\" tag: \"customTag\" type: REVERSE\n       checkout very_nice_feature\n       commit id: \"8\"\n       checkout main\n       commit id: \"9\"\n```\n\n### Cherry Pick commit from another branch\n\nSimilar to how 'git' allows you to cherry-pick a commit from **another branch** onto the **current** branch, Mermaid also supports this functionality. You can also cherry-pick a commit from another branch using the `cherry-pick` keyword.\n\nTo use the `cherry-pick` keyword, you must specify the id using the `id` attribute, followed by `:` and your desired commit id within a `\"\"` quote. For example:\n\n`cherry-pick id: \"your_custom_id\"`\n\nHere, a new commit representing the cherry-pick is created on the current branch, and is visually highlighted in the diagram with a **cherry** and a tag depicting the commit id from which it is cherry-picked from.\n\nA few important rules to note here are:\n\n1. You need to provide the `id` for an existing commit to be cherry-picked. If given commit id does not exist it will result in an error. For this, make use of the `commit id:$value` format of declaring commits. See the examples from above.\n2. The given commit must not exist on the current branch. The cherry-picked commit must always be a different branch than the current branch.\n3. Current branch must have at least one commit, before you can cherry-pick, otherwise it will cause an error is throw.\n4. When cherry-picking a merge commit, providing a parent commit ID is mandatory. If the parent attribute is omitted or an invalid parent commit ID is provided, an error will be thrown.\n5. The specified parent commit must be an immediate parent of the merge commit being cherry-picked.\n\nLet see an example:\n\n```mermaid-example\n    gitGraph\n        commit id: \"ZERO\"\n        branch develop\n        branch release\n        commit id:\"A\"\n        checkout main\n        commit id:\"ONE\"\n        checkout develop\n        commit id:\"B\"\n        checkout main\n        merge develop id:\"MERGE\"\n        commit id:\"TWO\"\n        checkout release\n        cherry-pick id:\"MERGE\" parent:\"B\"\n        commit id:\"THREE\"\n        checkout develop\n        commit id:\"C\"\n```\n\n```mermaid\n    gitGraph\n        commit id: \"ZERO\"\n        branch develop\n        branch release\n        commit id:\"A\"\n        checkout main\n        commit id:\"ONE\"\n        checkout develop\n        commit id:\"B\"\n        checkout main\n        merge develop id:\"MERGE\"\n        commit id:\"TWO\"\n        checkout release\n        cherry-pick id:\"MERGE\" parent:\"B\"\n        commit id:\"THREE\"\n        checkout develop\n        commit id:\"C\"\n```\n\n## GitGraph specific configuration options\n\nIn Mermaid, you have the option to configure the gitgraph diagram. You can configure the following options:\n\n- `showBranches` : Boolean, default is `true`. If set to `false`, the branches are not shown in the diagram.\n- `showCommitLabel` : Boolean, default is `true`. If set to `false`, the commit labels are not shown in the diagram.\n- `mainBranchName` : String, default is `main`. The name of the default/root branch.\n- `mainBranchOrder` : Position of the main branch in the list of branches. default is `0`, meaning, by default `main` branch is the first in the order.\n- `parallelCommits`: Boolean, default is `false`. If set to `true`, commits x distance away from the parent are shown at the same level in the diagram.\n\nLet's look at them one by one.\n\n## Hiding Branch names and lines\n\nSometimes you may want to hide the branch names and lines from the diagram. You can do this by using the `showBranches` keyword. By default its value is `true`. You can set it to `false` using directives.\n\nUsage example:\n\n```mermaid-example\n---\nconfig:\n  logLevel: 'debug'\n  theme: 'base'\n  gitGraph:\n    showBranches: false\n---\n      gitGraph\n        commit\n        branch hotfix\n        checkout hotfix\n        commit\n        branch develop\n        checkout develop\n        commit id:\"ash\" tag:\"abc\"\n        branch featureB\n        checkout featureB\n        commit type:HIGHLIGHT\n        checkout main\n        checkout hotfix\n        commit type:NORMAL\n        checkout develop\n        commit type:REVERSE\n        checkout featureB\n        commit\n        checkout main\n        merge hotfix\n        checkout featureB\n        commit\n        checkout develop\n        branch featureA\n        commit\n        checkout develop\n        merge hotfix\n        checkout featureA\n        commit\n        checkout featureB\n        commit\n        checkout develop\n        merge featureA\n        branch release\n        checkout release\n        commit\n        checkout main\n        commit\n        checkout release\n        merge main\n        checkout develop\n        merge release\n```\n\n```mermaid\n---\nconfig:\n  logLevel: 'debug'\n  theme: 'base'\n  gitGraph:\n    showBranches: false\n---\n      gitGraph\n        commit\n        branch hotfix\n        checkout hotfix\n        commit\n        branch develop\n        checkout develop\n        commit id:\"ash\" tag:\"abc\"\n        branch featureB\n        checkout featureB\n        commit type:HIGHLIGHT\n        checkout main\n        checkout hotfix\n        commit type:NORMAL\n        checkout develop\n        commit type:REVERSE\n        checkout featureB\n        commit\n        checkout main\n        merge hotfix\n        checkout featureB\n        commit\n        checkout develop\n        branch featureA\n        commit\n        checkout develop\n        merge hotfix\n        checkout featureA\n        commit\n        checkout featureB\n        commit\n        checkout develop\n        merge featureA\n        branch release\n        checkout release\n        commit\n        checkout main\n        commit\n        checkout release\n        merge main\n        checkout develop\n        merge release\n```\n\n## Commit labels Layout: Rotated or Horizontal\n\nMermaid supports two types of commit labels layout. The default layout is **rotated**, which means the labels are placed below the commit circle, rotated at 45 degrees for better readability. This is particularly useful for commits with long labels.\n\nThe other option is **horizontal**, which means the labels are placed below the commit circle centred horizontally, and are not rotated. This is particularly useful for commits with short labels.\n\nYou can change the layout of the commit labels by using the `rotateCommitLabel` keyword in the directive. It defaults to `true`, which means the commit labels are rotated.\n\nUsage example: Rotated commit labels\n\n```mermaid-example\n---\nconfig:\n  logLevel: 'debug'\n  theme: 'base'\n  gitGraph:\n    rotateCommitLabel: true\n---\ngitGraph\n  commit id: \"feat(api): ...\"\n  commit id: \"a\"\n  commit id: \"b\"\n  commit id: \"fix(client): .extra long label..\"\n  branch c2\n  commit id: \"feat(modules): ...\"\n  commit id: \"test(client): ...\"\n  checkout main\n  commit id: \"fix(api): ...\"\n  commit id: \"ci: ...\"\n  branch b1\n  commit\n  branch b2\n  commit\n```\n\n```mermaid\n---\nconfig:\n  logLevel: 'debug'\n  theme: 'base'\n  gitGraph:\n    rotateCommitLabel: true\n---\ngitGraph\n  commit id: \"feat(api): ...\"\n  commit id: \"a\"\n  commit id: \"b\"\n  commit id: \"fix(client): .extra long label..\"\n  branch c2\n  commit id: \"feat(modules): ...\"\n  commit id: \"test(client): ...\"\n  checkout main\n  commit id: \"fix(api): ...\"\n  commit id: \"ci: ...\"\n  branch b1\n  commit\n  branch b2\n  commit\n```\n\nUsage example: Horizontal commit labels\n\n```mermaid-example\n---\nconfig:\n  logLevel: 'debug'\n  theme: 'base'\n  gitGraph:\n    rotateCommitLabel: false\n---\ngitGraph\n  commit id: \"feat(api): ...\"\n  commit id: \"a\"\n  commit id: \"b\"\n  commit id: \"fix(client): .extra long label..\"\n  branch c2\n  commit id: \"feat(modules): ...\"\n  commit id: \"test(client): ...\"\n  checkout main\n  commit id: \"fix(api): ...\"\n  commit id: \"ci: ...\"\n  branch b1\n  commit\n  branch b2\n  commit\n```\n\n```mermaid\n---\nconfig:\n  logLevel: 'debug'\n  theme: 'base'\n  gitGraph:\n    rotateCommitLabel: false\n---\ngitGraph\n  commit id: \"feat(api): ...\"\n  commit id: \"a\"\n  commit id: \"b\"\n  commit id: \"fix(client): .extra long label..\"\n  branch c2\n  commit id: \"feat(modules): ...\"\n  commit id: \"test(client): ...\"\n  checkout main\n  commit id: \"fix(api): ...\"\n  commit id: \"ci: ...\"\n  branch b1\n  commit\n  branch b2\n  commit\n```\n\n## Hiding commit labels\n\nSometimes you may want to hide the commit labels from the diagram. You can do this by using the `showCommitLabel` keyword. By default its value is `true`. You can set it to `false` using directives.\n\nUsage example:\n\n```mermaid-example\n---\nconfig:\n  logLevel: 'debug'\n  theme: 'base'\n  gitGraph:\n    showBranches: false\n    showCommitLabel: false\n---\n      gitGraph\n        commit\n        branch hotfix\n        checkout hotfix\n        commit\n        branch develop\n        checkout develop\n        commit id:\"ash\"\n        branch featureB\n        checkout featureB\n        commit type:HIGHLIGHT\n        checkout main\n        checkout hotfix\n        commit type:NORMAL\n        checkout develop\n        commit type:REVERSE\n        checkout featureB\n        commit\n        checkout main\n        merge hotfix\n        checkout featureB\n        commit\n        checkout develop\n        branch featureA\n        commit\n        checkout develop\n        merge hotfix\n        checkout featureA\n        commit\n        checkout featureB\n        commit\n        checkout develop\n        merge featureA\n        branch release\n        checkout release\n        commit\n        checkout main\n        commit\n        checkout release\n        merge main\n        checkout develop\n        merge release\n```\n\n```mermaid\n---\nconfig:\n  logLevel: 'debug'\n  theme: 'base'\n  gitGraph:\n    showBranches: false\n    showCommitLabel: false\n---\n      gitGraph\n        commit\n        branch hotfix\n        checkout hotfix\n        commit\n        branch develop\n        checkout develop\n        commit id:\"ash\"\n        branch featureB\n        checkout featureB\n        commit type:HIGHLIGHT\n        checkout main\n        checkout hotfix\n        commit type:NORMAL\n        checkout develop\n        commit type:REVERSE\n        checkout featureB\n        commit\n        checkout main\n        merge hotfix\n        checkout featureB\n        commit\n        checkout develop\n        branch featureA\n        commit\n        checkout develop\n        merge hotfix\n        checkout featureA\n        commit\n        checkout featureB\n        commit\n        checkout develop\n        merge featureA\n        branch release\n        checkout release\n        commit\n        checkout main\n        commit\n        checkout release\n        merge main\n        checkout develop\n        merge release\n```\n\n## Customizing main branch name\n\nSometimes you may want to customize the name of the main/default branch. You can do this by using the `mainBranchName` keyword. By default its value is `main`. You can set it to any string using directives.\n\nUsage example:\n\n```mermaid-example\n---\nconfig:\n  logLevel: 'debug'\n  theme: 'base'\n  gitGraph:\n    showBranches: true\n    showCommitLabel: true\n    mainBranchName: 'MetroLine1'\n---\n      gitGraph\n        commit id:\"NewYork\"\n        commit id:\"Dallas\"\n        branch MetroLine2\n        commit id:\"LosAngeles\"\n        commit id:\"Chicago\"\n        commit id:\"Houston\"\n        branch MetroLine3\n        commit id:\"Phoenix\"\n        commit type: HIGHLIGHT id:\"Denver\"\n        commit id:\"Boston\"\n        checkout MetroLine1\n        commit id:\"Atlanta\"\n        merge MetroLine3\n        commit id:\"Miami\"\n        commit id:\"Washington\"\n        merge MetroLine2 tag:\"MY JUNCTION\"\n        commit id:\"Boston\"\n        commit id:\"Detroit\"\n        commit type:REVERSE id:\"SanFrancisco\"\n```\n\n```mermaid\n---\nconfig:\n  logLevel: 'debug'\n  theme: 'base'\n  gitGraph:\n    showBranches: true\n    showCommitLabel: true\n    mainBranchName: 'MetroLine1'\n---\n      gitGraph\n        commit id:\"NewYork\"\n        commit id:\"Dallas\"\n        branch MetroLine2\n        commit id:\"LosAngeles\"\n        commit id:\"Chicago\"\n        commit id:\"Houston\"\n        branch MetroLine3\n        commit id:\"Phoenix\"\n        commit type: HIGHLIGHT id:\"Denver\"\n        commit id:\"Boston\"\n        checkout MetroLine1\n        commit id:\"Atlanta\"\n        merge MetroLine3\n        commit id:\"Miami\"\n        commit id:\"Washington\"\n        merge MetroLine2 tag:\"MY JUNCTION\"\n        commit id:\"Boston\"\n        commit id:\"Detroit\"\n        commit type:REVERSE id:\"SanFrancisco\"\n```\n\nLook at the imaginary railroad map created using Mermaid. Here, we have changed the default main branch name to `MetroLine1`.\n\n## Customizing branch ordering\n\nIn Mermaid, by default the branches are shown in the order of their definition or appearance in the diagram code.\n\nSometimes you may want to customize the order of the branches. You can do this by using the `order` keyword next the branch definition. You can set it to a positive number.\n\nMermaid follows the given precedence order of the `order` keyword.\n\n- Main branch is always shown first as it has default order value of `0`. (unless its order is modified and changed from `0` using the `mainBranchOrder` keyword in the config)\n- Next, All branches without an `order` are shown in the order of their appearance in the diagram code.\n- Next, All branches with an `order` are shown in the order of their `order` value.\n\nTo fully control the order of all the branches, you must define `order` for all the branches.\n\nUsage example:\n\n```mermaid-example\n---\nconfig:\n  logLevel: 'debug'\n  theme: 'base'\n  gitGraph:\n    showBranches: true\n    showCommitLabel: true\n---\n      gitGraph\n      commit\n      branch test1 order: 3\n      branch test2 order: 2\n      branch test3 order: 1\n\n```\n\n```mermaid\n---\nconfig:\n  logLevel: 'debug'\n  theme: 'base'\n  gitGraph:\n    showBranches: true\n    showCommitLabel: true\n---\n      gitGraph\n      commit\n      branch test1 order: 3\n      branch test2 order: 2\n      branch test3 order: 1\n\n```\n\nLook at the diagram, all the branches are following the order defined.\n\nUsage example:\n\n```mermaid-example\n---\nconfig:\n  logLevel: 'debug'\n  theme: 'base'\n  gitGraph:\n    showBranches: true\n    showCommitLabel: true\n    mainBranchOrder: 2\n---\n      gitGraph\n      commit\n      branch test1 order: 3\n      branch test2\n      branch test3\n      branch test4 order: 1\n\n```\n\n```mermaid\n---\nconfig:\n  logLevel: 'debug'\n  theme: 'base'\n  gitGraph:\n    showBranches: true\n    showCommitLabel: true\n    mainBranchOrder: 2\n---\n      gitGraph\n      commit\n      branch test1 order: 3\n      branch test2\n      branch test3\n      branch test4 order: 1\n\n```\n\nLook at the diagram, here, all the branches without a specified order are drawn in their order of definition.\nThen, `test4` branch is drawn because the order of `1`.\nThen, `main` branch is drawn because the order of `2`.\nAnd, lastly `test1`is drawn because the order of `3`.\n\nNOTE: Because we have overridden the `mainBranchOrder` to `2`, the `main` branch is not drawn in the beginning, instead follows the ordering.\n\nHere, we have changed the default main branch name to `MetroLine1`.\n\n## Orientation (v10.3.0+)\n\nMermaid supports three graph orientations: **Left-to-Right** (default), **Top-to-Bottom**, and **Bottom-to-Top**.\n\nYou can set this with either `LR:` (for [**Left-to-Right**](#left-to-right-default-lr)), `TB:` (for [**Top-to-Bottom**](#top-to-bottom-tb)) or `BT:` (for [**Bottom-to-Top**](#bottom-to-top-bt)) after `gitGraph`.\n\n### Left to Right (default, `LR:`)\n\nIn Mermaid, the default orientation is for commits to run from left to right and for branches to be stacked on top of one another.\n\nHowever, you can set this explicitly with `LR:` after `gitGraph`.\n\nUsage example:\n\n```mermaid-example\n    gitGraph LR:\n       commit\n       commit\n       branch develop\n       commit\n       commit\n       checkout main\n       commit\n       commit\n       merge develop\n       commit\n       commit\n```\n\n```mermaid\n    gitGraph LR:\n       commit\n       commit\n       branch develop\n       commit\n       commit\n       checkout main\n       commit\n       commit\n       merge develop\n       commit\n       commit\n```\n\n### Top to Bottom (`TB:`)\n\nIn `TB` (**Top-to-Bottom**) orientation, the commits run from top to bottom of the graph and branches are arranged side-by-side.\n\nTo orient the graph this way, you need to add `TB:` after gitGraph.\n\nUsage example:\n\n```mermaid-example\n    gitGraph TB:\n       commit\n       commit\n       branch develop\n       commit\n       commit\n       checkout main\n       commit\n       commit\n       merge develop\n       commit\n       commit\n```\n\n```mermaid\n    gitGraph TB:\n       commit\n       commit\n       branch develop\n       commit\n       commit\n       checkout main\n       commit\n       commit\n       merge develop\n       commit\n       commit\n```\n\n### Bottom to Top (`BT:`) (v11.0.0+)\n\nIn `BT` (**Bottom-to-Top**) orientation, the commits run from bottom to top of the graph and branches are arranged side-by-side.\n\nTo orient the graph this way, you need to add `BT:` after gitGraph.\n\nUsage example:\n\n```mermaid-example\n    gitGraph BT:\n       commit\n       commit\n       branch develop\n       commit\n       commit\n       checkout main\n       commit\n       commit\n       merge develop\n       commit\n       commit\n```\n\n```mermaid\n    gitGraph BT:\n       commit\n       commit\n       branch develop\n       commit\n       commit\n       checkout main\n       commit\n       commit\n       merge develop\n       commit\n       commit\n```\n\n## Parallel commits (v10.8.0+)\n\nCommits in Mermaid display temporal information in gitgraph by default. For example if two commits are one commit away from its parent, the commit that was made earlier is rendered closer to its parent. You can turn this off by enabling the `parallelCommits` flag.\n\n### Temporal Commits (default, `parallelCommits: false`)\n\n```mermaid-example\n---\nconfig:\n  gitGraph:\n    parallelCommits: false\n---\ngitGraph:\n  commit\n  branch develop\n  commit\n  commit\n  checkout main\n  commit\n  commit\n```\n\n```mermaid\n---\nconfig:\n  gitGraph:\n    parallelCommits: false\n---\ngitGraph:\n  commit\n  branch develop\n  commit\n  commit\n  checkout main\n  commit\n  commit\n```\n\n### Parallel commits (`parallelCommits: true`)\n\n```mermaid-example\n---\nconfig:\n  gitGraph:\n    parallelCommits: true\n---\ngitGraph:\n  commit\n  branch develop\n  commit\n  commit\n  checkout main\n  commit\n  commit\n```\n\n```mermaid\n---\nconfig:\n  gitGraph:\n    parallelCommits: true\n---\ngitGraph:\n  commit\n  branch develop\n  commit\n  commit\n  checkout main\n  commit\n  commit\n```\n\n## Themes\n\nMermaid supports a bunch of pre-defined themes which you can use to find the right one for you. PS: you can actually override an existing theme's variable to get your own custom theme going. Learn more about [theming your diagram](../config/theming.md).\n\nThe following are the different pre-defined theme options:\n\n- `base`\n- `forest`\n- `dark`\n- `default`\n- `neutral`\n\n**NOTE**: To change theme you can either use the `initialize` call or _directives_. Learn more about [directives](../config/directives.md)\nLet's put them to use, and see how our sample diagram looks in different themes:\n\n### Base Theme\n\n```mermaid-example\n---\nconfig:\n  logLevel: 'debug'\n  theme: 'base'\n---\n      gitGraph\n        commit\n        branch hotfix\n        checkout hotfix\n        commit\n        branch develop\n        checkout develop\n        commit id:\"ash\" tag:\"abc\"\n        branch featureB\n        checkout featureB\n        commit type:HIGHLIGHT\n        checkout main\n        checkout hotfix\n        commit type:NORMAL\n        checkout develop\n        commit type:REVERSE\n        checkout featureB\n        commit\n        checkout main\n        merge hotfix\n        checkout featureB\n        commit\n        checkout develop\n        branch featureA\n        commit\n        checkout develop\n        merge hotfix\n        checkout featureA\n        commit\n        checkout featureB\n        commit\n        checkout develop\n        merge featureA\n        branch release\n        checkout release\n        commit\n        checkout main\n        commit\n        checkout release\n        merge main\n        checkout develop\n        merge release\n```\n\n```mermaid\n---\nconfig:\n  logLevel: 'debug'\n  theme: 'base'\n---\n      gitGraph\n        commit\n        branch hotfix\n        checkout hotfix\n        commit\n        branch develop\n        checkout develop\n        commit id:\"ash\" tag:\"abc\"\n        branch featureB\n        checkout featureB\n        commit type:HIGHLIGHT\n        checkout main\n        checkout hotfix\n        commit type:NORMAL\n        checkout develop\n        commit type:REVERSE\n        checkout featureB\n        commit\n        checkout main\n        merge hotfix\n        checkout featureB\n        commit\n        checkout develop\n        branch featureA\n        commit\n        checkout develop\n        merge hotfix\n        checkout featureA\n        commit\n        checkout featureB\n        commit\n        checkout develop\n        merge featureA\n        branch release\n        checkout release\n        commit\n        checkout main\n        commit\n        checkout release\n        merge main\n        checkout develop\n        merge release\n```\n\n### Forest Theme\n\n```mermaid-example\n---\nconfig:\n  logLevel: 'debug'\n  theme: 'forest'\n---\n      gitGraph\n        commit\n        branch hotfix\n        checkout hotfix\n        commit\n        branch develop\n        checkout develop\n        commit id:\"ash\" tag:\"abc\"\n        branch featureB\n        checkout featureB\n        commit type:HIGHLIGHT\n        checkout main\n        checkout hotfix\n        commit type:NORMAL\n        checkout develop\n        commit type:REVERSE\n        checkout featureB\n        commit\n        checkout main\n        merge hotfix\n        checkout featureB\n        commit\n        checkout develop\n        branch featureA\n        commit\n        checkout develop\n        merge hotfix\n        checkout featureA\n        commit\n        checkout featureB\n        commit\n        checkout develop\n        merge featureA\n        branch release\n        checkout release\n        commit\n        checkout main\n        commit\n        checkout release\n        merge main\n        checkout develop\n        merge release\n```\n\n```mermaid\n---\nconfig:\n  logLevel: 'debug'\n  theme: 'forest'\n---\n      gitGraph\n        commit\n        branch hotfix\n        checkout hotfix\n        commit\n        branch develop\n        checkout develop\n        commit id:\"ash\" tag:\"abc\"\n        branch featureB\n        checkout featureB\n        commit type:HIGHLIGHT\n        checkout main\n        checkout hotfix\n        commit type:NORMAL\n        checkout develop\n        commit type:REVERSE\n        checkout featureB\n        commit\n        checkout main\n        merge hotfix\n        checkout featureB\n        commit\n        checkout develop\n        branch featureA\n        commit\n        checkout develop\n        merge hotfix\n        checkout featureA\n        commit\n        checkout featureB\n        commit\n        checkout develop\n        merge featureA\n        branch release\n        checkout release\n        commit\n        checkout main\n        commit\n        checkout release\n        merge main\n        checkout develop\n        merge release\n```\n\n### Default Theme\n\n```mermaid-example\n---\nconfig:\n  logLevel: 'debug'\n  theme: 'default'\n---\n      gitGraph\n        commit type:HIGHLIGHT\n        branch hotfix\n        checkout hotfix\n        commit\n        branch develop\n        checkout develop\n        commit id:\"ash\" tag:\"abc\"\n        branch featureB\n        checkout featureB\n        commit type:HIGHLIGHT\n        checkout main\n        checkout hotfix\n        commit type:NORMAL\n        checkout develop\n        commit type:REVERSE\n        checkout featureB\n        commit\n        checkout main\n        merge hotfix\n        checkout featureB\n        commit\n        checkout develop\n        branch featureA\n        commit\n        checkout develop\n        merge hotfix\n        checkout featureA\n        commit\n        checkout featureB\n        commit\n        checkout develop\n        merge featureA\n        branch release\n        checkout release\n        commit\n        checkout main\n        commit\n        checkout release\n        merge main\n        checkout develop\n        merge release\n```\n\n```mermaid\n---\nconfig:\n  logLevel: 'debug'\n  theme: 'default'\n---\n      gitGraph\n        commit type:HIGHLIGHT\n        branch hotfix\n        checkout hotfix\n        commit\n        branch develop\n        checkout develop\n        commit id:\"ash\" tag:\"abc\"\n        branch featureB\n        checkout featureB\n        commit type:HIGHLIGHT\n        checkout main\n        checkout hotfix\n        commit type:NORMAL\n        checkout develop\n        commit type:REVERSE\n        checkout featureB\n        commit\n        checkout main\n        merge hotfix\n        checkout featureB\n        commit\n        checkout develop\n        branch featureA\n        commit\n        checkout develop\n        merge hotfix\n        checkout featureA\n        commit\n        checkout featureB\n        commit\n        checkout develop\n        merge featureA\n        branch release\n        checkout release\n        commit\n        checkout main\n        commit\n        checkout release\n        merge main\n        checkout develop\n        merge release\n```\n\n### Dark Theme\n\n```mermaid-example\n---\nconfig:\n  logLevel: 'debug'\n  theme: 'dark'\n---\n      gitGraph\n        commit\n        branch hotfix\n        checkout hotfix\n        commit\n        branch develop\n        checkout develop\n        commit id:\"ash\" tag:\"abc\"\n        branch featureB\n        checkout featureB\n        commit type:HIGHLIGHT\n        checkout main\n        checkout hotfix\n        commit type:NORMAL\n        checkout develop\n        commit type:REVERSE\n        checkout featureB\n        commit\n        checkout main\n        merge hotfix\n        checkout featureB\n        commit\n        checkout develop\n        branch featureA\n        commit\n        checkout develop\n        merge hotfix\n        checkout featureA\n        commit\n        checkout featureB\n        commit\n        checkout develop\n        merge featureA\n        branch release\n        checkout release\n        commit\n        checkout main\n        commit\n        checkout release\n        merge main\n        checkout develop\n        merge release\n```\n\n```mermaid\n---\nconfig:\n  logLevel: 'debug'\n  theme: 'dark'\n---\n      gitGraph\n        commit\n        branch hotfix\n        checkout hotfix\n        commit\n        branch develop\n        checkout develop\n        commit id:\"ash\" tag:\"abc\"\n        branch featureB\n        checkout featureB\n        commit type:HIGHLIGHT\n        checkout main\n        checkout hotfix\n        commit type:NORMAL\n        checkout develop\n        commit type:REVERSE\n        checkout featureB\n        commit\n        checkout main\n        merge hotfix\n        checkout featureB\n        commit\n        checkout develop\n        branch featureA\n        commit\n        checkout develop\n        merge hotfix\n        checkout featureA\n        commit\n        checkout featureB\n        commit\n        checkout develop\n        merge featureA\n        branch release\n        checkout release\n        commit\n        checkout main\n        commit\n        checkout release\n        merge main\n        checkout develop\n        merge release\n```\n\n### Neutral Theme\n\n```mermaid-example\n---\nconfig:\n  logLevel: 'debug'\n  theme: 'neutral'\n---\n      gitGraph\n        commit\n        branch hotfix\n        checkout hotfix\n        commit\n        branch develop\n        checkout develop\n        commit id:\"ash\" tag:\"abc\"\n        branch featureB\n        checkout featureB\n        commit type:HIGHLIGHT\n        checkout main\n        checkout hotfix\n        commit type:NORMAL\n        checkout develop\n        commit type:REVERSE\n        checkout featureB\n        commit\n        checkout main\n        merge hotfix\n        checkout featureB\n        commit\n        checkout develop\n        branch featureA\n        commit\n        checkout develop\n        merge hotfix\n        checkout featureA\n        commit\n        checkout featureB\n        commit\n        checkout develop\n        merge featureA\n        branch release\n        checkout release\n        commit\n        checkout main\n        commit\n        checkout release\n        merge main\n        checkout develop\n        merge release\n```\n\n```mermaid\n---\nconfig:\n  logLevel: 'debug'\n  theme: 'neutral'\n---\n      gitGraph\n        commit\n        branch hotfix\n        checkout hotfix\n        commit\n        branch develop\n        checkout develop\n        commit id:\"ash\" tag:\"abc\"\n        branch featureB\n        checkout featureB\n        commit type:HIGHLIGHT\n        checkout main\n        checkout hotfix\n        commit type:NORMAL\n        checkout develop\n        commit type:REVERSE\n        checkout featureB\n        commit\n        checkout main\n        merge hotfix\n        checkout featureB\n        commit\n        checkout develop\n        branch featureA\n        commit\n        checkout develop\n        merge hotfix\n        checkout featureA\n        commit\n        checkout featureB\n        commit\n        checkout develop\n        merge featureA\n        branch release\n        checkout release\n        commit\n        checkout main\n        commit\n        checkout release\n        merge main\n        checkout develop\n        merge release\n```\n\n## Customize using Theme Variables\n\nMermaid allows you to customize your diagram using theme variables which govern the look and feel of various elements of the diagram.\n\nFor understanding let us take a sample diagram with theme `default`, the default values of the theme variables is picked automatically from the theme. Later on we will see how to override the default values of the theme variables.\n\nSee how the default theme is used to set the colors for the branches:\n\n```mermaid-example\n---\nconfig:\n  logLevel: 'debug'\n  theme: 'default'\n---\n       gitGraph\n       commit\n       branch develop\n       commit tag:\"v1.0.0\"\n       commit\n       checkout main\n       commit type: HIGHLIGHT\n       commit\n       merge develop\n       commit\n       branch featureA\n       commit\n```\n\n```mermaid\n---\nconfig:\n  logLevel: 'debug'\n  theme: 'default'\n---\n       gitGraph\n       commit\n       branch develop\n       commit tag:\"v1.0.0\"\n       commit\n       checkout main\n       commit type: HIGHLIGHT\n       commit\n       merge develop\n       commit\n       branch featureA\n       commit\n```\n\n> #### IMPORTANT:\n>\n> Mermaid supports the theme variables to override the default values for **up to 8 branches**, i.e., you can set the color/styling of up to 8 branches using theme variables. After this threshold of 8 branches, the theme variables are reused in the cyclic manner, i.e. the 9th branch will use the color/styling of the 1st branch, or the branch at index position '8' will use the color/styling of the branch at index position '0'.\n> _More on this in the next section. See examples on **Customizing branch label colors** below_\n\n### Customizing branch colors\n\nYou can customize the branch colors using the `git0` to `git7` theme variables. Mermaid allows you to set the colors for up-to 8 branches, where `git0` variable will drive the value of the first branch, `git1` will drive the value of the second branch and so on.\n\nNOTE: Default values for these theme variables are picked from the selected theme. If you want to override the default values, you can use the `initialize` call to add your custom theme variable values.\n\nExample:\n\nNow let's override the default values for the `git0` to `git3` variables:\n\n```mermaid-example\n---\nconfig:\n  logLevel: 'debug'\n  theme: 'default'\n  themeVariables:\n      'git0': '#ff0000'\n      'git1': '#00ff00'\n      'git2': '#0000ff'\n      'git3': '#ff00ff'\n      'git4': '#00ffff'\n      'git5': '#ffff00'\n      'git6': '#ff00ff'\n      'git7': '#00ffff'\n---\n       gitGraph\n       commit\n       branch develop\n       commit tag:\"v1.0.0\"\n       commit\n       checkout main\n       commit type: HIGHLIGHT\n       commit\n       merge develop\n       commit\n       branch featureA\n       commit\n\n```\n\n```mermaid\n---\nconfig:\n  logLevel: 'debug'\n  theme: 'default'\n  themeVariables:\n      'git0': '#ff0000'\n      'git1': '#00ff00'\n      'git2': '#0000ff'\n      'git3': '#ff00ff'\n      'git4': '#00ffff'\n      'git5': '#ffff00'\n      'git6': '#ff00ff'\n      'git7': '#00ffff'\n---\n       gitGraph\n       commit\n       branch develop\n       commit tag:\"v1.0.0\"\n       commit\n       checkout main\n       commit type: HIGHLIGHT\n       commit\n       merge develop\n       commit\n       branch featureA\n       commit\n\n```\n\nSee how the branch colors are changed to the values specified in the theme variables.\n\n### Customizing branch label colors\n\nYou can customize the branch label colors using the `gitBranchLabel0` to `gitBranchLabel7` theme variables. Mermaid allows you to set the colors for up-to 8 branches, where `gitBranchLabel0` variable will drive the value of the first branch label, `gitBranchLabel1` will drive the value of the second branch label and so on.\n\nLets see how the default theme is used to set the colors for the branch labels:\n\nNow let's override the default values for the `gitBranchLabel0` to `gitBranchLabel2` variables:\n\n```mermaid-example\n---\nconfig:\n  logLevel: 'debug'\n  theme: 'default'\n  themeVariables:\n    'gitBranchLabel0': '#ffffff'\n    'gitBranchLabel1': '#ffffff'\n    'gitBranchLabel2': '#ffffff'\n    'gitBranchLabel3': '#ffffff'\n    'gitBranchLabel4': '#ffffff'\n    'gitBranchLabel5': '#ffffff'\n    'gitBranchLabel6': '#ffffff'\n    'gitBranchLabel7': '#ffffff'\n    'gitBranchLabel8': '#ffffff'\n    'gitBranchLabel9': '#ffffff'\n---\n  gitGraph\n    checkout main\n    branch branch1\n    branch branch2\n    branch branch3\n    branch branch4\n    branch branch5\n    branch branch6\n    branch branch7\n    branch branch8\n    branch branch9\n    checkout branch1\n    commit\n```\n\n```mermaid\n---\nconfig:\n  logLevel: 'debug'\n  theme: 'default'\n  themeVariables:\n    'gitBranchLabel0': '#ffffff'\n    'gitBranchLabel1': '#ffffff'\n    'gitBranchLabel2': '#ffffff'\n    'gitBranchLabel3': '#ffffff'\n    'gitBranchLabel4': '#ffffff'\n    'gitBranchLabel5': '#ffffff'\n    'gitBranchLabel6': '#ffffff'\n    'gitBranchLabel7': '#ffffff'\n    'gitBranchLabel8': '#ffffff'\n    'gitBranchLabel9': '#ffffff'\n---\n  gitGraph\n    checkout main\n    branch branch1\n    branch branch2\n    branch branch3\n    branch branch4\n    branch branch5\n    branch branch6\n    branch branch7\n    branch branch8\n    branch branch9\n    checkout branch1\n    commit\n```\n\nHere, you can see that `branch8` and `branch9` colors and the styles are being picked from branch at index position `0` (`main`) and `1`(`branch1`) respectively, i.e., **branch themeVariables are repeated cyclically**.\n\n### Customizing Commit colors\n\nYou can customize commit using the `commitLabelColor` and `commitLabelBackground` theme variables for changes in the commit label color and background color respectively.\n\nExample:\nNow let's override the default values for the `commitLabelColor` to `commitLabelBackground` variables:\n\n```mermaid-example\n---\nconfig:\n  logLevel: 'debug'\n  theme: 'default'\n  themeVariables:\n    commitLabelColor: '#ff0000'\n    commitLabelBackground: '#00ff00'\n---\n       gitGraph\n       commit\n       branch develop\n       commit tag:\"v1.0.0\"\n       commit\n       checkout main\n       commit type: HIGHLIGHT\n       commit\n       merge develop\n       commit\n       branch featureA\n       commit\n\n```\n\n```mermaid\n---\nconfig:\n  logLevel: 'debug'\n  theme: 'default'\n  themeVariables:\n    commitLabelColor: '#ff0000'\n    commitLabelBackground: '#00ff00'\n---\n       gitGraph\n       commit\n       branch develop\n       commit tag:\"v1.0.0\"\n       commit\n       checkout main\n       commit type: HIGHLIGHT\n       commit\n       merge develop\n       commit\n       branch featureA\n       commit\n\n```\n\nSee how the commit label color and background color are changed to the values specified in the theme variables.\n\n### Customizing Commit Label Font Size\n\nYou can customize commit using the `commitLabelFontSize` theme variables for changing in the font size of the commit label .\n\nExample:\nNow let's override the default values for the `commitLabelFontSize` variable:\n\n```mermaid-example\n---\nconfig:\n  logLevel: 'debug'\n  theme: 'default'\n  themeVariables:\n    commitLabelColor: '#ff0000'\n    commitLabelBackground: '#00ff00'\n    commitLabelFontSize: '16px'\n---\n       gitGraph\n       commit\n       branch develop\n       commit tag:\"v1.0.0\"\n       commit\n       checkout main\n       commit type: HIGHLIGHT\n       commit\n       merge develop\n       commit\n       branch featureA\n       commit\n\n```\n\n```mermaid\n---\nconfig:\n  logLevel: 'debug'\n  theme: 'default'\n  themeVariables:\n    commitLabelColor: '#ff0000'\n    commitLabelBackground: '#00ff00'\n    commitLabelFontSize: '16px'\n---\n       gitGraph\n       commit\n       branch develop\n       commit tag:\"v1.0.0\"\n       commit\n       checkout main\n       commit type: HIGHLIGHT\n       commit\n       merge develop\n       commit\n       branch featureA\n       commit\n\n```\n\nSee how the commit label font size changed.\n\n### Customizing Tag Label Font Size\n\nYou can customize commit using the `tagLabelFontSize` theme variables for changing in the font size of the tag label .\n\nExample:\nNow let's override the default values for the `tagLabelFontSize` variable:\n\n```mermaid-example\n---\nconfig:\n  logLevel: 'debug'\n  theme: 'default'\n  themeVariables:\n    commitLabelColor: '#ff0000'\n    commitLabelBackground: '#00ff00'\n    tagLabelFontSize: '16px'\n---\n       gitGraph\n       commit\n       branch develop\n       commit tag:\"v1.0.0\"\n       commit\n       checkout main\n       commit type: HIGHLIGHT\n       commit\n       merge develop\n       commit\n       branch featureA\n       commit\n\n```\n\n```mermaid\n---\nconfig:\n  logLevel: 'debug'\n  theme: 'default'\n  themeVariables:\n    commitLabelColor: '#ff0000'\n    commitLabelBackground: '#00ff00'\n    tagLabelFontSize: '16px'\n---\n       gitGraph\n       commit\n       branch develop\n       commit tag:\"v1.0.0\"\n       commit\n       checkout main\n       commit type: HIGHLIGHT\n       commit\n       merge develop\n       commit\n       branch featureA\n       commit\n\n```\n\nSee how the tag label font size changed.\n\n### Customizing Tag colors\n\nYou can customize tag using the `tagLabelColor`,`tagLabelBackground` and `tagLabelBorder` theme variables for changes in the tag label color,tag label background color and tag label border respectively.\nExample:\nNow let's override the default values for the `tagLabelColor`, `tagLabelBackground` and to `tagLabelBorder` variables:\n\n```mermaid-example\n---\nconfig:\n  logLevel: 'debug'\n  theme: 'default'\n  themeVariables:\n    tagLabelColor: '#ff0000'\n    tagLabelBackground: '#00ff00'\n    tagLabelBorder: '#0000ff'\n---\n       gitGraph\n       commit\n       branch develop\n       commit tag:\"v1.0.0\"\n       commit\n       checkout main\n       commit type: HIGHLIGHT\n       commit\n       merge develop\n       commit\n       branch featureA\n       commit\n\n```\n\n```mermaid\n---\nconfig:\n  logLevel: 'debug'\n  theme: 'default'\n  themeVariables:\n    tagLabelColor: '#ff0000'\n    tagLabelBackground: '#00ff00'\n    tagLabelBorder: '#0000ff'\n---\n       gitGraph\n       commit\n       branch develop\n       commit tag:\"v1.0.0\"\n       commit\n       checkout main\n       commit type: HIGHLIGHT\n       commit\n       merge develop\n       commit\n       branch featureA\n       commit\n\n```\n\nSee how the tag colors are changed to the values specified in the theme variables.\n\n### Customizing Highlight commit colors\n\nYou can customize the highlight commit colors in relation to the branch it is on using the `gitInv0` to `gitInv7` theme variables. Mermaid allows you to set the colors for up-to 8 branches specific highlight commit, where `gitInv0` variable will drive the value of the first branch's highlight commits, `gitInv1` will drive the value of the second branch's highlight commit label and so on.\n\nExample:\n\nNow let's override the default values for the `git0` to `git3` variables:\n\n```mermaid-example\n---\nconfig:\n  logLevel: 'debug'\n  theme: 'default'\n  themeVariables:\n    'gitInv0': '#ff0000'\n---\n       gitGraph\n       commit\n       branch develop\n       commit tag:\"v1.0.0\"\n       commit\n       checkout main\n       commit type: HIGHLIGHT\n       commit\n       merge develop\n       commit\n       branch featureA\n       commit\n\n```\n\n```mermaid\n---\nconfig:\n  logLevel: 'debug'\n  theme: 'default'\n  themeVariables:\n    'gitInv0': '#ff0000'\n---\n       gitGraph\n       commit\n       branch develop\n       commit tag:\"v1.0.0\"\n       commit\n       checkout main\n       commit type: HIGHLIGHT\n       commit\n       merge develop\n       commit\n       branch featureA\n       commit\n\n```\n\nSee how the highlighted commit color on the first branch is changed to the value specified in the theme variable `gitInv0`.\n";
+const __vite_glob_0_32 = '> **Warning**\n>\n> ## THIS IS AN AUTOGENERATED FILE. DO NOT EDIT.\n>\n> ## Please edit the corresponding file in [/packages/mermaid/src/docs/syntax/mindmap.md](../../packages/mermaid/src/docs/syntax/mindmap.md).\n\n# Mindmap\n\n> Mindmap: This is an experimental diagram for now. The syntax and properties can change in future releases. The syntax is stable except for the icon integration which is the experimental part.\n\n"A mind map is a diagram used to visually organize information into a hierarchy, showing relationships among pieces of the whole. It is often created around a single concept, drawn as an image in the center of a blank page, to which associated representations of ideas such as images, words and parts of words are added. Major ideas are connected directly to the central concept, and other ideas branch out from those major ideas." Wikipedia\n\n### An example of a mindmap.\n\n```mermaid-example\nmindmap\n  root((mindmap))\n    Origins\n      Long history\n      ::icon(fa fa-book)\n      Popularisation\n        British popular psychology author Tony Buzan\n    Research\n      On effectiveness<br/>and features\n      On Automatic creation\n        Uses\n            Creative techniques\n            Strategic planning\n            Argument mapping\n    Tools\n      Pen and paper\n      Mermaid\n\n```\n\n```mermaid\nmindmap\n  root((mindmap))\n    Origins\n      Long history\n      ::icon(fa fa-book)\n      Popularisation\n        British popular psychology author Tony Buzan\n    Research\n      On effectiveness<br/>and features\n      On Automatic creation\n        Uses\n            Creative techniques\n            Strategic planning\n            Argument mapping\n    Tools\n      Pen and paper\n      Mermaid\n\n```\n\n## Syntax\n\nThe syntax for creating Mindmaps is simple and relies on indentation for setting the levels in the hierarchy.\n\nIn the following example you can see how there are 3 different levels. One with starting at the left of the text and another level with two rows starting at the same column, defining the node A. At the end there is one more level where the text is indented further than the previous lines defining the nodes B and C.\n\n```\nmindmap\n    Root\n        A\n            B\n            C\n```\n\nIn summary is a simple text outline where there is one node at the root level called `Root` which has one child `A`. `A` in turn has two children `B`and `C`. In the diagram below we can see this rendered as a mindmap.\n\n```mermaid-example\nmindmap\nRoot\n    A\n      B\n      C\n```\n\n```mermaid\nmindmap\nRoot\n    A\n      B\n      C\n```\n\nIn this way we can use a text outline to generate a hierarchical mindmap.\n\n## Different shapes\n\nMermaid mindmaps can show nodes using different shapes. When specifying a shape for a node the syntax is similar to flowchart nodes, with an id followed by the shape definition and with the text within the shape delimiters. Where possible we try/will try to keep the same shapes as for flowcharts, even though they are not all supported from the start.\n\nMindmap can show the following shapes:\n\n### Square\n\n```mermaid-example\nmindmap\n    id[I am a square]\n```\n\n```mermaid\nmindmap\n    id[I am a square]\n```\n\n### Rounded square\n\n```mermaid-example\nmindmap\n    id(I am a rounded square)\n```\n\n```mermaid\nmindmap\n    id(I am a rounded square)\n```\n\n### Circle\n\n```mermaid-example\nmindmap\n    id((I am a circle))\n```\n\n```mermaid\nmindmap\n    id((I am a circle))\n```\n\n### Bang\n\n```mermaid-example\nmindmap\n    id))I am a bang((\n```\n\n```mermaid\nmindmap\n    id))I am a bang((\n```\n\n### Cloud\n\n```mermaid-example\nmindmap\n    id)I am a cloud(\n```\n\n```mermaid\nmindmap\n    id)I am a cloud(\n```\n\n### Hexagon\n\n```mermaid-example\nmindmap\n    id{{I am a hexagon}}\n```\n\n```mermaid\nmindmap\n    id{{I am a hexagon}}\n```\n\n### Default\n\n```mermaid-example\nmindmap\n    I am the default shape\n```\n\n```mermaid\nmindmap\n    I am the default shape\n```\n\nMore shapes will be added, beginning with the shapes available in flowcharts.\n\n# Icons and classes\n\n## Icons\n\nAs with flowcharts you can add icons to your nodes but with an updated syntax. The styling for the font based icons are added during the integration so that they are available for the web page. _This is not something a diagram author can do but has to be done with the site administrator or the integrator_. Once the icon fonts are in place you add them to the mind map nodes using the `::icon()` syntax. You place the classes for the icon within the parenthesis like in the following example where icons for material design and [Font Awesome 5](https://fontawesome.com/v5/search?o=r&m=free) are displayed. The intention is that this approach should be used for all diagrams supporting icons. **Experimental feature:** This wider scope is also the reason Mindmaps are experimental as this syntax and approach could change.\n\n```mermaid-example\nmindmap\n    Root\n        A\n        ::icon(fa fa-book)\n        B(B)\n        ::icon(mdi mdi-skull-outline)\n```\n\n```mermaid\nmindmap\n    Root\n        A\n        ::icon(fa fa-book)\n        B(B)\n        ::icon(mdi mdi-skull-outline)\n```\n\n## Classes\n\nAgain the syntax for adding classes is similar to flowcharts. You can add classes using a triple colon following a number of css classes separated by space. In the following example one of the nodes has two custom classes attached urgent turning the background red and the text white and large increasing the font size:\n\n```mermaid-example\nmindmap\n    Root\n        A[A]\n        :::urgent large\n        B(B)\n        C\n```\n\n```mermaid\nmindmap\n    Root\n        A[A]\n        :::urgent large\n        B(B)\n        C\n```\n\n_These classes need to be supplied by the site administrator._\n\n## Unclear indentation\n\nThe actual indentation does not really matter only compared with the previous rows. If we take the previous example and disrupt it a little we can see how the calculations are performed. Let us start with placing C with a smaller indentation than `B` but larger then `A`.\n\n```\nmindmap\n    Root\n        A\n            B\n          C\n```\n\nThis outline is unclear as `B` clearly is a child of `A` but when we move on to `C` the clarity is lost. `C` is neither a child of `B` with a higher indentation nor does it have the same indentation as `B`. The only thing that is clear is that the first node with smaller indentation, indicating a parent, is A. Then Mermaid relies on this known truth and compensates for the unclear indentation and selects `A` as a parent of `C` leading till the same diagram with `B` and `C` as siblings.\n\n```mermaid-example\nmindmap\nRoot\n    A\n        B\n      C\n```\n\n```mermaid\nmindmap\nRoot\n    A\n        B\n      C\n```\n\n## Markdown Strings\n\nThe "Markdown Strings" feature enhances mind maps by offering a more versatile string type, which supports text formatting options such as bold and italics, and automatically wraps text within labels.\n\n```mermaid-example\nmindmap\n    id1["`**Root** with\na second line\nUnicode works too: 🤓`"]\n      id2["`The dog in **the** hog... a *very long text* that wraps to a new line`"]\n      id3[Regular labels still works]\n```\n\n```mermaid\nmindmap\n    id1["`**Root** with\na second line\nUnicode works too: 🤓`"]\n      id2["`The dog in **the** hog... a *very long text* that wraps to a new line`"]\n      id3[Regular labels still works]\n```\n\nFormatting:\n\n- For bold text, use double asterisks \\*\\* before and after the text.\n- For italics, use single asterisks \\* before and after the text.\n- With traditional strings, you needed to add <br> tags for text to wrap in nodes. However, markdown strings automatically wrap text when it becomes too long and allows you to start a new line by simply using a newline character instead of a <br> tag.\n\n## Integrating with your library/website.\n\nMindmap uses the experimental lazy loading & async rendering features which could change in the future. From version 9.4.0 this diagram is included in mermaid but use lazy loading in order to keep the size of mermaid down. This is important in order to be able to add additional diagrams going forward.\n\nYou can still use the pre 9.4.0 method to add mermaid with mindmaps to a web page:\n\n```html\n<script type="module">\n  import mermaid from \'https://cdn.jsdelivr.net/npm/mermaid@9.3.0/dist/mermaid.esm.min.mjs\';\n  import mindmap from \'https://cdn.jsdelivr.net/npm/@mermaid-js/mermaid-mindmap@9.3.0/dist/mermaid-mindmap.esm.min.mjs\';\n  await mermaid.registerExternalDiagrams([mindmap]);\n<\/script>\n```\n\nFrom version 9.4.0 you can simplify this code to:\n\n```html\n<script type="module">\n  import mermaid from \'https://cdn.jsdelivr.net/npm/mermaid@11/dist/mermaid.esm.min.mjs\';\n<\/script>\n```\n\nYou can also refer the [implementation in the live editor](https://github.com/mermaid-js/mermaid-live-editor/blob/develop/src/lib/util/mermaid.ts) to see how the async loading is done.\n\n<!---\ncspell:locale en,en-gb\ncspell:ignore Buzan\n--->\n\n## Layouts\n\nMermaid also supports a Tidy Tree layout for mindmaps.\n\n```\n---\nconfig:\n  layout: tidy-tree\n---\nmindmap\nroot((mindmap is a long thing))\n  A\n  B\n  C\n  D\n```\n\nInstructions to add and register tidy-tree layout are present in [Tidy Tree Configuration](/config/tidy-tree)\n';
+const __vite_glob_0_33 = '> **Warning**\n>\n> ## THIS IS AN AUTOGENERATED FILE. DO NOT EDIT.\n>\n> ## Please edit the corresponding file in [/packages/mermaid/src/docs/syntax/packet.md](../../packages/mermaid/src/docs/syntax/packet.md).\n\n# Packet Diagram (v11.0.0+)\n\n## Introduction\n\nA packet diagram is a visual representation used to illustrate the structure and contents of a network packet. Network packets are the fundamental units of data transferred over a network.\n\n## Usage\n\nThis diagram type is particularly useful for developers, network engineers, educators, and students who require a clear and concise way to represent the structure of network packets.\n\n## Syntax\n\n```\npacket\nstart: "Block name" %% Single-bit block\nstart-end: "Block name" %% Multi-bit blocks\n... More Fields ...\n```\n\n### Bits Syntax (v11.7.0+)\n\nUsing start and end bit counts can be difficult, especially when modifying a design. For this we add a bit count field, which starts from the end of the previous field automagically. Use `+<count>` to set the number of bits, thus:\n\n```\npacket\n+1: "Block name" %% Single-bit block\n+8: "Block name" %% 8-bit block\n9-15: "Manually set start and end, it\'s fine to mix and match"\n... More Fields ...\n```\n\n## Examples\n\n```mermaid-example\n---\ntitle: "TCP Packet"\n---\npacket\n0-15: "Source Port"\n16-31: "Destination Port"\n32-63: "Sequence Number"\n64-95: "Acknowledgment Number"\n96-99: "Data Offset"\n100-105: "Reserved"\n106: "URG"\n107: "ACK"\n108: "PSH"\n109: "RST"\n110: "SYN"\n111: "FIN"\n112-127: "Window"\n128-143: "Checksum"\n144-159: "Urgent Pointer"\n160-191: "(Options and Padding)"\n192-255: "Data (variable length)"\n```\n\n```mermaid\n---\ntitle: "TCP Packet"\n---\npacket\n0-15: "Source Port"\n16-31: "Destination Port"\n32-63: "Sequence Number"\n64-95: "Acknowledgment Number"\n96-99: "Data Offset"\n100-105: "Reserved"\n106: "URG"\n107: "ACK"\n108: "PSH"\n109: "RST"\n110: "SYN"\n111: "FIN"\n112-127: "Window"\n128-143: "Checksum"\n144-159: "Urgent Pointer"\n160-191: "(Options and Padding)"\n192-255: "Data (variable length)"\n```\n\n```mermaid-example\npacket\ntitle UDP Packet\n+16: "Source Port"\n+16: "Destination Port"\n32-47: "Length"\n48-63: "Checksum"\n64-95: "Data (variable length)"\n```\n\n```mermaid\npacket\ntitle UDP Packet\n+16: "Source Port"\n+16: "Destination Port"\n32-47: "Length"\n48-63: "Checksum"\n64-95: "Data (variable length)"\n```\n\n## Details of Syntax\n\n- **Ranges**: Each line after the title represents a different field in the packet. The range (e.g., `0-15`) indicates the bit positions in the packet.\n- **Field Description**: A brief description of what the field represents, enclosed in quotes.\n\n## Configuration\n\nPlease refer to the [configuration](/config/schema-docs/config-defs-packet-diagram-config.html) guide for details.\n\n<!--\n\nTheme variables are not currently working due to a mermaid bug. The passed values are not being propagated into styles function.\n\n## Theme Variables\n\n| Property         | Description                | Default Value |\n| ---------------- | -------------------------- | ------------- |\n| byteFontSize     | Font size of the bytes     | \'10px\'        |\n| startByteColor   | Color of the starting byte | \'black\'       |\n| endByteColor     | Color of the ending byte   | \'black\'       |\n| labelColor       | Color of the labels        | \'black\'       |\n| labelFontSize    | Font size of the labels    | \'12px\'        |\n| titleColor       | Color of the title         | \'black\'       |\n| titleFontSize    | Font size of the title     | \'14px\'        |\n| blockStrokeColor | Color of the block stroke  | \'black\'       |\n| blockStrokeWidth | Width of the block stroke  | \'1\'           |\n| blockFillColor   | Fill color of the block    | \'#efefef\'     |\n\n## Example on config and theme\n\n```mermaid-example\n---\nconfig:\n  packet:\n    showBits: true\n  themeVariables:\n    packet:\n      startByteColor: red\n---\npacket\n0-15: "Source Port"\n16-31: "Destination Port"\n32-63: "Sequence Number"\n```\n\n-->\n';
+const __vite_glob_0_34 = '> **Warning**\n>\n> ## THIS IS AN AUTOGENERATED FILE. DO NOT EDIT.\n>\n> ## Please edit the corresponding file in [/packages/mermaid/src/docs/syntax/quadrantChart.md](../../packages/mermaid/src/docs/syntax/quadrantChart.md).\n\n# Quadrant Chart\n\n> A quadrant chart is a visual representation of data that is divided into four quadrants. It is used to plot data points on a two-dimensional grid, with one variable represented on the x-axis and another variable represented on the y-axis. The quadrants are determined by dividing the chart into four equal parts based on a set of criteria that is specific to the data being analyzed. Quadrant charts are often used to identify patterns and trends in data, and to prioritize actions based on the position of data points within the chart. They are commonly used in business, marketing, and risk management, among other fields.\n\n## Example\n\n```mermaid-example\nquadrantChart\n    title Reach and engagement of campaigns\n    x-axis Low Reach --> High Reach\n    y-axis Low Engagement --> High Engagement\n    quadrant-1 We should expand\n    quadrant-2 Need to promote\n    quadrant-3 Re-evaluate\n    quadrant-4 May be improved\n    Campaign A: [0.3, 0.6]\n    Campaign B: [0.45, 0.23]\n    Campaign C: [0.57, 0.69]\n    Campaign D: [0.78, 0.34]\n    Campaign E: [0.40, 0.34]\n    Campaign F: [0.35, 0.78]\n```\n\n```mermaid\nquadrantChart\n    title Reach and engagement of campaigns\n    x-axis Low Reach --> High Reach\n    y-axis Low Engagement --> High Engagement\n    quadrant-1 We should expand\n    quadrant-2 Need to promote\n    quadrant-3 Re-evaluate\n    quadrant-4 May be improved\n    Campaign A: [0.3, 0.6]\n    Campaign B: [0.45, 0.23]\n    Campaign C: [0.57, 0.69]\n    Campaign D: [0.78, 0.34]\n    Campaign E: [0.40, 0.34]\n    Campaign F: [0.35, 0.78]\n```\n\n## Syntax\n\n> **Note**\n> If there are no points available in the chart both **axis** text and **quadrant** will be rendered in the center of the respective quadrant.\n> If there are points **x-axis** labels will rendered from the left of the respective quadrant also they will be displayed at the bottom of the chart, and **y-axis** labels will be rendered at the bottom of the respective quadrant, the quadrant text will render at the top of the respective quadrant.\n\n> **Note**\n> For points x and y value min value is 0 and max value is 1.\n\n### Title\n\nThe title is a short description of the chart and it will always render on top of the chart.\n\n#### Example\n\n```\nquadrantChart\n    title This is a sample example\n```\n\n### x-axis\n\nThe x-axis determines what text would be displayed in the x-axis. In x-axis there is two part **left** and **right** you can pass **both** or you can pass only **left**. The statement should start with `x-axis` then the `left axis text` followed by the delimiter `-->` then `right axis text`.\n\n#### Example\n\n1. `x-axis <text> --> <text>` both the left and right axis text will be rendered.\n2. `x-axis <text>` only the left axis text will be rendered.\n\n### y-axis\n\nThe y-axis determines what text would be displayed in the y-axis. In y-axis there is two part **top** and **bottom** you can pass **both** or you can pass only **bottom**. The statement should start with `y-axis` then the `bottom axis text` followed by the delimiter `-->` then `top axis text`.\n\n#### Example\n\n1. `y-axis <text> --> <text>` both the bottom and top axis text will be rendered.\n2. `y-axis <text>` only the bottom axis text will be rendered.\n\n### Quadrants text\n\nThe `quadrant-[1,2,3,4]` determine what text would be displayed inside the quadrants.\n\n#### Example\n\n1. `quadrant-1 <text>` determine what text will be rendered inside the top right quadrant.\n2. `quadrant-2 <text>` determine what text will be rendered inside the top left quadrant.\n3. `quadrant-3 <text>` determine what text will be rendered inside the bottom left quadrant.\n4. `quadrant-4 <text>` determine what text will be rendered inside the bottom right quadrant.\n\n### Points\n\nPoints are used to plot a circle inside the quadrantChart. The syntax is `<text>: [x, y]` here x and y value is in the range 0 - 1.\n\n#### Example\n\n1. `Point 1: [0.75, 0.80]` here the Point 1 will be drawn in the top right quadrant.\n2. `Point 2: [0.35, 0.24]` here the Point 2 will be drawn in the bottom left quadrant.\n\n## Chart Configurations\n\n| Parameter                         | Description                                                                                        | Default value |\n| --------------------------------- | -------------------------------------------------------------------------------------------------- | :-----------: |\n| chartWidth                        | Width of the chart                                                                                 |      500      |\n| chartHeight                       | Height of the chart                                                                                |      500      |\n| titlePadding                      | Top and Bottom padding of the title                                                                |      10       |\n| titleFontSize                     | Title font size                                                                                    |      20       |\n| quadrantPadding                   | Padding outside all the quadrants                                                                  |       5       |\n| quadrantTextTopPadding            | Quadrant text top padding when text is drawn on top ( not data points are there)                   |       5       |\n| quadrantLabelFontSize             | Quadrant text font size                                                                            |      16       |\n| quadrantInternalBorderStrokeWidth | Border stroke width inside the quadrants                                                           |       1       |\n| quadrantExternalBorderStrokeWidth | Quadrant external border stroke width                                                              |       2       |\n| xAxisLabelPadding                 | Top and bottom padding of x-axis text                                                              |       5       |\n| xAxisLabelFontSize                | X-axis texts font size                                                                             |      16       |\n| xAxisPosition                     | Position of x-axis (top , bottom) if there are points the x-axis will always be rendered in bottom |     \'top\'     |\n| yAxisLabelPadding                 | Left and Right padding of y-axis text                                                              |       5       |\n| yAxisLabelFontSize                | Y-axis texts font size                                                                             |      16       |\n| yAxisPosition                     | Position of y-axis (left , right)                                                                  |    \'left\'     |\n| pointTextPadding                  | Padding between point and the below text                                                           |       5       |\n| pointLabelFontSize                | Point text font size                                                                               |      12       |\n| pointRadius                       | Radius of the point to be drawn                                                                    |       5       |\n\n## Chart Theme Variables\n\n| Parameter                        | Description                             |\n| -------------------------------- | --------------------------------------- |\n| quadrant1Fill                    | Fill color of the top right quadrant    |\n| quadrant2Fill                    | Fill color of the top left quadrant     |\n| quadrant3Fill                    | Fill color of the bottom left quadrant  |\n| quadrant4Fill                    | Fill color of the bottom right quadrant |\n| quadrant1TextFill                | Text color of the top right quadrant    |\n| quadrant2TextFill                | Text color of the top left quadrant     |\n| quadrant3TextFill                | Text color of the bottom left quadrant  |\n| quadrant4TextFill                | Text color of the bottom right quadrant |\n| quadrantPointFill                | Points fill color                       |\n| quadrantPointTextFill            | Points text color                       |\n| quadrantXAxisTextFill            | X-axis text color                       |\n| quadrantYAxisTextFill            | Y-axis text color                       |\n| quadrantInternalBorderStrokeFill | Quadrants inner border color            |\n| quadrantExternalBorderStrokeFill | Quadrants outer border color            |\n| quadrantTitleFill                | Title color                             |\n\n## Example on config and theme\n\n```mermaid-example\n---\nconfig:\n  quadrantChart:\n    chartWidth: 400\n    chartHeight: 400\n  themeVariables:\n    quadrant1TextFill: "ff0000"\n---\nquadrantChart\n  x-axis Urgent --> Not Urgent\n  y-axis Not Important --> "Important ❤"\n  quadrant-1 Plan\n  quadrant-2 Do\n  quadrant-3 Delegate\n  quadrant-4 Delete\n```\n\n```mermaid\n---\nconfig:\n  quadrantChart:\n    chartWidth: 400\n    chartHeight: 400\n  themeVariables:\n    quadrant1TextFill: "ff0000"\n---\nquadrantChart\n  x-axis Urgent --> Not Urgent\n  y-axis Not Important --> "Important ❤"\n  quadrant-1 Plan\n  quadrant-2 Do\n  quadrant-3 Delegate\n  quadrant-4 Delete\n```\n\n### Point styling\n\nPoints can either be styled directly or with defined shared classes\n\n1. Direct styling\n\n```md\nPoint A: [0.9, 0.0] radius: 12\nPoint B: [0.8, 0.1] color: #ff3300, radius: 10\nPoint C: [0.7, 0.2] radius: 25, color: #00ff33, stroke-color: #10f0f0\nPoint D: [0.6, 0.3] radius: 15, stroke-color: #00ff0f, stroke-width: 5px ,color: #ff33f0\n```\n\n2. Classes styling\n\n```md\nPoint A:::class1: [0.9, 0.0]\nPoint B:::class2: [0.8, 0.1]\nPoint C:::class3: [0.7, 0.2]\nPoint D:::class3: [0.7, 0.2]\nclassDef class1 color: #109060\nclassDef class2 color: #908342, radius : 10, stroke-color: #310085, stroke-width: 10px\nclassDef class3 color: #f00fff, radius : 10\n```\n\n#### Available styles:\n\n| Parameter    | Description                                                            |\n| ------------ | ---------------------------------------------------------------------- |\n| color        | Fill color of the point                                                |\n| radius       | Radius of the point                                                    |\n| stroke-width | Border width of the point                                              |\n| stroke-color | Border color of the point (useless when stroke-width is not specified) |\n\n> **Note**\n> Order of preference:\n>\n> 1. Direct styles\n> 2. Class styles\n> 3. Theme styles\n\n## Example on styling\n\n```mermaid-example\nquadrantChart\n  title Reach and engagement of campaigns\n  x-axis Low Reach --> High Reach\n  y-axis Low Engagement --> High Engagement\n  quadrant-1 We should expand\n  quadrant-2 Need to promote\n  quadrant-3 Re-evaluate\n  quadrant-4 May be improved\n  Campaign A: [0.9, 0.0] radius: 12\n  Campaign B:::class1: [0.8, 0.1] color: #ff3300, radius: 10\n  Campaign C: [0.7, 0.2] radius: 25, color: #00ff33, stroke-color: #10f0f0\n  Campaign D: [0.6, 0.3] radius: 15, stroke-color: #00ff0f, stroke-width: 5px ,color: #ff33f0\n  Campaign E:::class2: [0.5, 0.4]\n  Campaign F:::class3: [0.4, 0.5] color: #0000ff\n  classDef class1 color: #109060\n  classDef class2 color: #908342, radius : 10, stroke-color: #310085, stroke-width: 10px\n  classDef class3 color: #f00fff, radius : 10\n```\n\n```mermaid\nquadrantChart\n  title Reach and engagement of campaigns\n  x-axis Low Reach --> High Reach\n  y-axis Low Engagement --> High Engagement\n  quadrant-1 We should expand\n  quadrant-2 Need to promote\n  quadrant-3 Re-evaluate\n  quadrant-4 May be improved\n  Campaign A: [0.9, 0.0] radius: 12\n  Campaign B:::class1: [0.8, 0.1] color: #ff3300, radius: 10\n  Campaign C: [0.7, 0.2] radius: 25, color: #00ff33, stroke-color: #10f0f0\n  Campaign D: [0.6, 0.3] radius: 15, stroke-color: #00ff0f, stroke-width: 5px ,color: #ff33f0\n  Campaign E:::class2: [0.5, 0.4]\n  Campaign F:::class3: [0.4, 0.5] color: #0000ff\n  classDef class1 color: #109060\n  classDef class2 color: #908342, radius : 10, stroke-color: #310085, stroke-width: 10px\n  classDef class3 color: #f00fff, radius : 10\n```\n';
+const __vite_glob_0_35 = '> **Warning**\n>\n> ## THIS IS AN AUTOGENERATED FILE. DO NOT EDIT.\n>\n> ## Please edit the corresponding file in [/packages/mermaid/src/docs/syntax/radar.md](../../packages/mermaid/src/docs/syntax/radar.md).\n\n# Radar Diagram (v11.6.0+)\n\n## Introduction\n\nA radar diagram is a simple way to plot low-dimensional data in a circular format.\n\nIt is also known as a **radar chart**, **spider chart**, **star chart**, **cobweb chart**, **polar chart**, or **Kiviat diagram**.\n\n## Usage\n\nThis diagram type is particularly useful for developers, data scientists, and engineers who require a clear and concise way to represent data in a circular format.\n\nIt is commonly used to graphically summarize and compare the performance of multiple entities across multiple dimensions.\n\n## Syntax\n\n```md\nradar-beta\naxis A, B, C, D, E\ncurve c1{1,2,3,4,5}\ncurve c2{5,4,3,2,1}\n... More Fields ...\n```\n\n## Examples\n\n```mermaid-example\n---\ntitle: "Grades"\n---\nradar-beta\n  axis m["Math"], s["Science"], e["English"]\n  axis h["History"], g["Geography"], a["Art"]\n  curve a["Alice"]{85, 90, 80, 70, 75, 90}\n  curve b["Bob"]{70, 75, 85, 80, 90, 85}\n\n  max 100\n  min 0\n```\n\n```mermaid\n---\ntitle: "Grades"\n---\nradar-beta\n  axis m["Math"], s["Science"], e["English"]\n  axis h["History"], g["Geography"], a["Art"]\n  curve a["Alice"]{85, 90, 80, 70, 75, 90}\n  curve b["Bob"]{70, 75, 85, 80, 90, 85}\n\n  max 100\n  min 0\n```\n\n```mermaid-example\nradar-beta\n  title Restaurant Comparison\n  axis food["Food Quality"], service["Service"], price["Price"]\n  axis ambiance["Ambiance"]\n\n  curve a["Restaurant A"]{4, 3, 2, 4}\n  curve b["Restaurant B"]{3, 4, 3, 3}\n  curve c["Restaurant C"]{2, 3, 4, 2}\n  curve d["Restaurant D"]{2, 2, 4, 3}\n\n  graticule polygon\n  max 5\n\n```\n\n```mermaid\nradar-beta\n  title Restaurant Comparison\n  axis food["Food Quality"], service["Service"], price["Price"]\n  axis ambiance["Ambiance"]\n\n  curve a["Restaurant A"]{4, 3, 2, 4}\n  curve b["Restaurant B"]{3, 4, 3, 3}\n  curve c["Restaurant C"]{2, 3, 4, 2}\n  curve d["Restaurant D"]{2, 2, 4, 3}\n\n  graticule polygon\n  max 5\n\n```\n\n## Details of Syntax\n\n### Title\n\n`title`: The title is an optional field that allows to render a title at the top of the radar diagram.\n\n```\nradar-beta\n  title Title of the Radar Diagram\n  ...\n```\n\n### Axis\n\n`axis`: The axis keyword is used to define the axes of the radar diagram.\n\nEach axis is represented by an ID and an optional label.\n\nMultiple axes can be defined in a single line.\n\n```\nradar-beta\n  axis id1["Label1"]\n  axis id2["Label2"], id3["Label3"]\n  ...\n```\n\n### Curve\n\n`curve`: The curve keyword is used to define the data points for a curve in the radar diagram.\n\nEach curve is represented by an ID, an optional label, and a list of values.\n\nValues can be defined by a list of numbers or a list of key-value pairs. If key-value pairs are used, the key represents the axis ID and the value represents the data point. Else, the data points are assumed to be in the order of the axes defined.\n\nMultiple curves can be defined in a single line.\n\n```\nradar-beta\n  axis axis1, axis2, axis3\n  curve id1["Label1"]{1, 2, 3}\n  curve id2["Label2"]{4, 5, 6}, id3{7, 8, 9}\n  curve id4{ axis3: 30, axis1: 20, axis2: 10 }\n  ...\n```\n\n### Options\n\n- `showLegend`: The showLegend keyword is used to show or hide the legend in the radar diagram. The legend is shown by default.\n- `max`: The maximum value for the radar diagram. This is used to scale the radar diagram. If not provided, the maximum value is calculated from the data points.\n- `min`: The minimum value for the radar diagram. This is used to scale the radar diagram. If not provided, the minimum value is `0`.\n- `graticule`: The graticule keyword is used to define the type of graticule to be rendered in the radar diagram. The graticule can be `circle` or `polygon`. If not provided, the default graticule is `circle`.\n- `ticks`: The ticks keyword is used to define the number of ticks on the graticule. It is the number of concentric circles or polygons drawn to indicate the scale of the radar diagram. If not provided, the default number of ticks is `5`.\n\n```\nradar-beta\n  ...\n  showLegend true\n  max 100\n  min 0\n  graticule circle\n  ticks 5\n  ...\n```\n\n## Configuration\n\nPlease refer to the [configuration](/config/schema-docs/config-defs-radar-diagram-config.html) guide for details.\n\n| Parameter       | Description                              | Default Value |\n| --------------- | ---------------------------------------- | ------------- |\n| width           | Width of the radar diagram               | `600`         |\n| height          | Height of the radar diagram              | `600`         |\n| marginTop       | Top margin of the radar diagram          | `50`          |\n| marginBottom    | Bottom margin of the radar diagram       | `50`          |\n| marginLeft      | Left margin of the radar diagram         | `50`          |\n| marginRight     | Right margin of the radar diagram        | `50`          |\n| axisScaleFactor | Scale factor for the axis                | `1`           |\n| axisLabelFactor | Factor to adjust the axis label position | `1.05`        |\n| curveTension    | Tension for the rounded curves           | `0.17`        |\n\n## Theme Variables\n\n### Global Theme Variables\n\n> **Note**\n> The default values for these variables depend on the theme used. To override the default values, set the desired values in the themeVariables section of the configuration:\n>\n> ---\n>\n> config:\n> themeVariables:\n> cScale0: "#FF0000"\n> cScale1: "#00FF00"\n>\n> ---\n\nRadar charts support the color scales `cScale${i}` where `i` is a number from `0` to the theme\'s maximum number of colors in its color scale. Usually, the maximum number of colors is `12`.\n\n| Property   | Description                    |\n| ---------- | ------------------------------ |\n| fontSize   | Font size of the title         |\n| titleColor | Color of the title             |\n| cScale${i} | Color scale for the i-th curve |\n\n### Radar Style Options\n\n> **Note**\n> Specific variables for radar resides inside the `radar` key. To set the radar style options, use this syntax.\n>\n> ---\n>\n> config:\n> themeVariables:\n> radar:\n> axisColor: "#FF0000"\n>\n> ---\n\n| Property             | Description                  | Default Value |\n| -------------------- | ---------------------------- | ------------- |\n| axisColor            | Color of the axis lines      | `black`       |\n| axisStrokeWidth      | Width of the axis lines      | `1`           |\n| axisLabelFontSize    | Font size of the axis labels | `12px`        |\n| curveOpacity         | Opacity of the curves        | `0.7`         |\n| curveStrokeWidth     | Width of the curves          | `2`           |\n| graticuleColor       | Color of the graticule       | `black`       |\n| graticuleOpacity     | Opacity of the graticule     | `0.5`         |\n| graticuleStrokeWidth | Width of the graticule       | `1`           |\n| legendBoxSize        | Size of the legend box       | `10`          |\n| legendFontSize       | Font size of the legend      | `14px`        |\n\n## Example on config and theme\n\n```mermaid-example\n---\nconfig:\n  radar:\n    axisScaleFactor: 0.25\n    curveTension: 0.1\n  theme: base\n  themeVariables:\n    cScale0: "#FF0000"\n    cScale1: "#00FF00"\n    cScale2: "#0000FF"\n    radar:\n      curveOpacity: 0\n---\nradar-beta\n  axis A, B, C, D, E\n  curve c1{1,2,3,4,5}\n  curve c2{5,4,3,2,1}\n  curve c3{3,3,3,3,3}\n```\n\n```mermaid\n---\nconfig:\n  radar:\n    axisScaleFactor: 0.25\n    curveTension: 0.1\n  theme: base\n  themeVariables:\n    cScale0: "#FF0000"\n    cScale1: "#00FF00"\n    cScale2: "#0000FF"\n    radar:\n      curveOpacity: 0\n---\nradar-beta\n  axis A, B, C, D, E\n  curve c1{1,2,3,4,5}\n  curve c2{5,4,3,2,1}\n  curve c3{3,3,3,3,3}\n```\n\n<!--- cspell:ignore Kiviat --->\n';
+const __vite_glob_0_36 = '> **Warning**\n>\n> ## THIS IS AN AUTOGENERATED FILE. DO NOT EDIT.\n>\n> ## Please edit the corresponding file in [/packages/mermaid/src/docs/syntax/sequenceDiagram.md](../../packages/mermaid/src/docs/syntax/sequenceDiagram.md).\n\n# Sequence diagrams\n\n> A Sequence diagram is an interaction diagram that shows how processes operate with one another and in what order.\n\nMermaid can render sequence diagrams.\n\n```mermaid-example\nsequenceDiagram\n    Alice->>John: Hello John, how are you?\n    John-->>Alice: Great!\n    Alice-)John: See you later!\n```\n\n```mermaid\nsequenceDiagram\n    Alice->>John: Hello John, how are you?\n    John-->>Alice: Great!\n    Alice-)John: See you later!\n```\n\n> **Note**\n> A note on nodes, the word "end" could potentially break the diagram, due to the way that the mermaid language is scripted.\n>\n> If unavoidable, one must use parentheses(), quotation marks "", or brackets {},\\[], to enclose the word "end". i.e : (end), \\[end], {end}.\n\n## Syntax\n\n### Participants\n\nThe participants can be defined implicitly as in the first example on this page. The participants or actors are\nrendered in order of appearance in the diagram source text. Sometimes you might want to show the participants in a\ndifferent order than how they appear in the first message. It is possible to specify the actor\'s order of\nappearance by doing the following:\n\n```mermaid-example\nsequenceDiagram\n    participant Alice\n    participant Bob\n    Bob->>Alice: Hi Alice\n    Alice->>Bob: Hi Bob\n```\n\n```mermaid\nsequenceDiagram\n    participant Alice\n    participant Bob\n    Bob->>Alice: Hi Alice\n    Alice->>Bob: Hi Bob\n```\n\n### Actors\n\nIf you specifically want to use the actor symbol instead of a rectangle with text you can do so by using actor statements as per below.\n\n```mermaid-example\nsequenceDiagram\n    actor Alice\n    actor Bob\n    Alice->>Bob: Hi Bob\n    Bob->>Alice: Hi Alice\n```\n\n```mermaid\nsequenceDiagram\n    actor Alice\n    actor Bob\n    Alice->>Bob: Hi Bob\n    Bob->>Alice: Hi Alice\n```\n\n### Boundary\n\nIf you want to use the boundary symbol for a participant, use the JSON configuration syntax as shown below.\n\n```mermaid-example\nsequenceDiagram\n    participant Alice@{ "type" : "boundary" }\n    participant Bob\n    Alice->>Bob: Request from boundary\n    Bob->>Alice: Response to boundary\n```\n\n```mermaid\nsequenceDiagram\n    participant Alice@{ "type" : "boundary" }\n    participant Bob\n    Alice->>Bob: Request from boundary\n    Bob->>Alice: Response to boundary\n```\n\n### Control\n\nIf you want to use the control symbol for a participant, use the JSON configuration syntax as shown below.\n\n```mermaid-example\nsequenceDiagram\n    participant Alice@{ "type" : "control" }\n    participant Bob\n    Alice->>Bob: Control request\n    Bob->>Alice: Control response\n```\n\n```mermaid\nsequenceDiagram\n    participant Alice@{ "type" : "control" }\n    participant Bob\n    Alice->>Bob: Control request\n    Bob->>Alice: Control response\n```\n\n### Entity\n\nIf you want to use the entity symbol for a participant, use the JSON configuration syntax as shown below.\n\n```mermaid-example\nsequenceDiagram\n    participant Alice@{ "type" : "entity" }\n    participant Bob\n    Alice->>Bob: Entity request\n    Bob->>Alice: Entity response\n```\n\n```mermaid\nsequenceDiagram\n    participant Alice@{ "type" : "entity" }\n    participant Bob\n    Alice->>Bob: Entity request\n    Bob->>Alice: Entity response\n```\n\n### Database\n\nIf you want to use the database symbol for a participant, use the JSON configuration syntax as shown below.\n\n```mermaid-example\nsequenceDiagram\n    participant Alice@{ "type" : "database" }\n    participant Bob\n    Alice->>Bob: DB query\n    Bob->>Alice: DB result\n```\n\n```mermaid\nsequenceDiagram\n    participant Alice@{ "type" : "database" }\n    participant Bob\n    Alice->>Bob: DB query\n    Bob->>Alice: DB result\n```\n\n### Collections\n\nIf you want to use the collections symbol for a participant, use the JSON configuration syntax as shown below.\n\n```mermaid-example\nsequenceDiagram\n    participant Alice@{ "type" : "collections" }\n    participant Bob\n    Alice->>Bob: Collections request\n    Bob->>Alice: Collections response\n```\n\n```mermaid\nsequenceDiagram\n    participant Alice@{ "type" : "collections" }\n    participant Bob\n    Alice->>Bob: Collections request\n    Bob->>Alice: Collections response\n```\n\n### Queue\n\nIf you want to use the queue symbol for a participant, use the JSON configuration syntax as shown below.\n\n```mermaid-example\nsequenceDiagram\n    participant Alice@{ "type" : "queue" }\n    participant Bob\n    Alice->>Bob: Queue message\n    Bob->>Alice: Queue response\n```\n\n```mermaid\nsequenceDiagram\n    participant Alice@{ "type" : "queue" }\n    participant Bob\n    Alice->>Bob: Queue message\n    Bob->>Alice: Queue response\n```\n\n### Aliases\n\nThe actor can have a convenient identifier and a descriptive label. Aliases can be defined in two ways: using external syntax with the `as` keyword, or inline within the configuration object.\n\n#### External Alias Syntax\n\nYou can define an alias using the `as` keyword after the participant declaration:\n\n```mermaid-example\nsequenceDiagram\n    participant A as Alice\n    participant J as John\n    A->>J: Hello John, how are you?\n    J->>A: Great!\n```\n\n```mermaid\nsequenceDiagram\n    participant A as Alice\n    participant J as John\n    A->>J: Hello John, how are you?\n    J->>A: Great!\n```\n\nThe external alias syntax also works with participant stereotype configurations, allowing you to combine type specification with aliases:\n\n```mermaid-example\nsequenceDiagram\n    participant API@{ "type": "boundary" } as Public API\n    actor DB@{ "type": "database" } as User Database\n    participant Svc@{ "type": "control" } as Auth Service\n    API->>Svc: Authenticate\n    Svc->>DB: Query user\n    DB-->>Svc: User data\n    Svc-->>API: Token\n```\n\n```mermaid\nsequenceDiagram\n    participant API@{ "type": "boundary" } as Public API\n    actor DB@{ "type": "database" } as User Database\n    participant Svc@{ "type": "control" } as Auth Service\n    API->>Svc: Authenticate\n    Svc->>DB: Query user\n    DB-->>Svc: User data\n    Svc-->>API: Token\n```\n\n#### Inline Alias Syntax\n\nAlternatively, you can define an alias directly inside the configuration object using the `"alias"` field. This works with both `participant` and `actor` keywords:\n\n```mermaid-example\nsequenceDiagram\n    participant API@{ "type": "boundary", "alias": "Public API" }\n    participant Auth@{ "type": "control", "alias": "Auth Service" }\n    participant DB@{ "type": "database", "alias": "User Database" }\n    API->>Auth: Login request\n    Auth->>DB: Query user\n    DB-->>Auth: User data\n    Auth-->>API: Access token\n```\n\n```mermaid\nsequenceDiagram\n    participant API@{ "type": "boundary", "alias": "Public API" }\n    participant Auth@{ "type": "control", "alias": "Auth Service" }\n    participant DB@{ "type": "database", "alias": "User Database" }\n    API->>Auth: Login request\n    Auth->>DB: Query user\n    DB-->>Auth: User data\n    Auth-->>API: Access token\n```\n\n#### Alias Precedence\n\nWhen both inline alias (in the configuration object) and external alias (using `as` keyword) are provided, the **external alias takes precedence**:\n\n```mermaid-example\nsequenceDiagram\n    participant API@{ "type": "boundary", "alias": "Internal Name" } as External Name\n    participant DB@{ "type": "database", "alias": "Internal DB" } as External DB\n    API->>DB: Query\n    DB-->>API: Result\n```\n\n```mermaid\nsequenceDiagram\n    participant API@{ "type": "boundary", "alias": "Internal Name" } as External Name\n    participant DB@{ "type": "database", "alias": "Internal DB" } as External DB\n    API->>DB: Query\n    DB-->>API: Result\n```\n\nIn the example above, "External Name" and "External DB" will be displayed, not "Internal Name" and "Internal DB".\n\n### Actor Creation and Destruction (v10.3.0+)\n\nIt is possible to create and destroy actors by messages. To do so, add a create or destroy directive before the message.\n\n```\ncreate participant B\nA --> B: Hello\n```\n\nCreate directives support actor/participant distinction and aliases. The sender or the recipient of a message can be destroyed but only the recipient can be created.\n\n```mermaid-example\nsequenceDiagram\n    Alice->>Bob: Hello Bob, how are you ?\n    Bob->>Alice: Fine, thank you. And you?\n    create participant Carl\n    Alice->>Carl: Hi Carl!\n    create actor D as Donald\n    Carl->>D: Hi!\n    destroy Carl\n    Alice-xCarl: We are too many\n    destroy Bob\n    Bob->>Alice: I agree\n```\n\n```mermaid\nsequenceDiagram\n    Alice->>Bob: Hello Bob, how are you ?\n    Bob->>Alice: Fine, thank you. And you?\n    create participant Carl\n    Alice->>Carl: Hi Carl!\n    create actor D as Donald\n    Carl->>D: Hi!\n    destroy Carl\n    Alice-xCarl: We are too many\n    destroy Bob\n    Bob->>Alice: I agree\n```\n\n#### Unfixable actor/participant creation/deletion error\n\nIf an error of the following type occurs when creating or deleting an actor/participant:\n\n> The destroyed participant **participant-name** does not have an associated destroying message after its declaration. Please check the sequence diagram.\n\nAnd fixing diagram code does not get rid of this error and rendering of all other diagrams results in the same error, then you need to update the mermaid version to (v10.7.0+).\n\n### Grouping / Box\n\nThe actor(s) can be grouped in vertical boxes. You can define a color (if not, it will be transparent) and/or a descriptive label using the following notation:\n\n> **Note**\n> For colored boxes, the color value must be placed **before** the optional description.\n\n```\nbox Aqua Group Description\n... actors ...\nend\nbox Group without description\n... actors ...\nend\nbox rgb(33,66,99)\n... actors ...\nend\nbox rgba(33,66,99,0.5)\n... actors ...\nend\nbox hsl(10, 40%, 90%)\n... actors ...\nend\nbox hsla(10, 40%, 90%, 0.5)\n... actors ...\nend\n```\n\n> **Warning**\n> **Hex colors** (e.g., `#ff0000`) are currently **not supported** as the `#` character is interpreted as comment syntax.\n\n> **Note**\n> If your group name is a color you can force the color to be transparent:\n\n```\nbox transparent Aqua\n... actors ...\nend\n```\n\n```mermaid-example\n    sequenceDiagram\n    box Purple Alice & John\n    participant A\n    participant J\n    end\n    box Another Group\n    participant B\n    participant C\n    end\n    A->>J: Hello John, how are you?\n    J->>A: Great!\n    A->>B: Hello Bob, how is Charley?\n    B->>C: Hello Charley, how are you?\n```\n\n```mermaid\n    sequenceDiagram\n    box Purple Alice & John\n    participant A\n    participant J\n    end\n    box Another Group\n    participant B\n    participant C\n    end\n    A->>J: Hello John, how are you?\n    J->>A: Great!\n    A->>B: Hello Bob, how is Charley?\n    B->>C: Hello Charley, how are you?\n```\n\n## Messages\n\nMessages can be of two displayed either solid or with a dotted line.\n\n```\n[Actor][Arrow][Actor]:Message text\n```\n\nLines can be solid or dotted, and can end with various types of arrowheads, crosses, or open arrows.\n\n#### Supported Arrow Types\n\n**Standard Arrow Types**\n\n| Type     | Description                                          |\n| -------- | ---------------------------------------------------- |\n| `->`     | Solid line without arrow                             |\n| `-->`    | Dotted line without arrow                            |\n| `->>`    | Solid line with arrowhead                            |\n| `-->>`   | Dotted line with arrowhead                           |\n| `<<->>`  | Solid line with bidirectional arrowheads (v11.0.0+)  |\n| `<<-->>` | Dotted line with bidirectional arrowheads (v11.0.0+) |\n| `-x`     | Solid line with a cross at the end                   |\n| `--x`    | Dotted line with a cross at the end                  |\n| `-)`     | Solid line with an open arrow at the end (async)     |\n| `--)`    | Dotted line with a open arrow at the end (async)     |\n\n**Half-Arrows (v11.12.3+)**\n\nThe following half-arrow types are supported for more expressive sequence diagrams. Both solid and dotted variants are available by increasing the number of dashes (`-` → `--`).\n\n---\n\n| Type    | Description                                          |\n| ------- | ---------------------------------------------------- |\n| `-\\|\\`  | Solid line with top half arrowhead                   |\n| `--\\|\\` | Dotted line with top half arrowhead                  |\n| `-\\|/`  | Solid line with bottom half arrowhead                |\n| `--\\|/` | Dotted line with bottom half arrowhead               |\n| `/\\|-`  | Solid line with reverse top half arrowhead           |\n| `/\\|--` | Dotted line with reverse top half arrowhead          |\n| `\\\\-`   | Solid line with reverse bottom half arrowhead        |\n| `\\\\--`  | Dotted line with reverse bottom half arrowhead       |\n| `-\\\\`   | Solid line with top stick half arrowhead             |\n| `--\\\\`  | Dotted line with top stick half arrowhead            |\n| `-//`   | Solid line with bottom stick half arrowhead          |\n| `--//`  | Dotted line with bottom stick half arrowhead         |\n| `//-`   | Solid line with reverse top stick half arrowhead     |\n| `//--`  | Dotted line with reverse top stick half arrowhead    |\n| `\\\\-`   | Solid line with reverse bottom stick half arrowhead  |\n| `\\\\--`  | Dotted line with reverse bottom stick half arrowhead |\n\n## Central Connections (v11.12.3+)\n\nMermaid sequence diagrams support **central lifeline connections** using a `()`.\nThis is useful to represent messages or signals that connect to a central point, rather than from one actor directly to another.\n\nTo indicate a central connection, append `()` to the arrow syntax.\n\n#### Basic Syntax\n\n```mermaid-example\nsequenceDiagram\n    participant Alice\n    participant John\n    Alice->>()John: Hello John\n    Alice()->>John: How are you?\n    John()->>()Alice: Great!\n```\n\n```mermaid\nsequenceDiagram\n    participant Alice\n    participant John\n    Alice->>()John: Hello John\n    Alice()->>John: How are you?\n    John()->>()Alice: Great!\n```\n\n## Activations\n\nIt is possible to activate and deactivate an actor. (de)activation can be dedicated declarations:\n\n```mermaid-example\nsequenceDiagram\n    Alice->>John: Hello John, how are you?\n    activate John\n    John-->>Alice: Great!\n    deactivate John\n```\n\n```mermaid\nsequenceDiagram\n    Alice->>John: Hello John, how are you?\n    activate John\n    John-->>Alice: Great!\n    deactivate John\n```\n\nThere is also a shortcut notation by appending `+`/`-` suffix to the message arrow:\n\n```mermaid-example\nsequenceDiagram\n    Alice->>+John: Hello John, how are you?\n    John-->>-Alice: Great!\n```\n\n```mermaid\nsequenceDiagram\n    Alice->>+John: Hello John, how are you?\n    John-->>-Alice: Great!\n```\n\nActivations can be stacked for same actor:\n\n```mermaid-example\nsequenceDiagram\n    Alice->>+John: Hello John, how are you?\n    Alice->>+John: John, can you hear me?\n    John-->>-Alice: Hi Alice, I can hear you!\n    John-->>-Alice: I feel great!\n```\n\n```mermaid\nsequenceDiagram\n    Alice->>+John: Hello John, how are you?\n    Alice->>+John: John, can you hear me?\n    John-->>-Alice: Hi Alice, I can hear you!\n    John-->>-Alice: I feel great!\n```\n\n## Notes\n\nIt is possible to add notes to a sequence diagram. This is done by the notation\nNote \\[ right of | left of | over ] \\[Actor]: Text in note content\n\nSee the example below:\n\n```mermaid-example\nsequenceDiagram\n    participant John\n    Note right of John: Text in note\n```\n\n```mermaid\nsequenceDiagram\n    participant John\n    Note right of John: Text in note\n```\n\nIt is also possible to create notes spanning two participants:\n\n```mermaid-example\nsequenceDiagram\n    Alice->John: Hello John, how are you?\n    Note over Alice,John: A typical interaction\n```\n\n```mermaid\nsequenceDiagram\n    Alice->John: Hello John, how are you?\n    Note over Alice,John: A typical interaction\n```\n\n## Line breaks\n\nLine break can be added to Note and Message:\n\n```mermaid-example\nsequenceDiagram\n    Alice->John: Hello John,<br/>how are you?\n    Note over Alice,John: A typical interaction<br/>But now in two lines\n```\n\n```mermaid\nsequenceDiagram\n    Alice->John: Hello John,<br/>how are you?\n    Note over Alice,John: A typical interaction<br/>But now in two lines\n```\n\nLine breaks in Actor names requires aliases:\n\n```mermaid-example\nsequenceDiagram\n    participant Alice as Alice<br/>Johnson\n    Alice->John: Hello John,<br/>how are you?\n    Note over Alice,John: A typical interaction<br/>But now in two lines\n```\n\n```mermaid\nsequenceDiagram\n    participant Alice as Alice<br/>Johnson\n    Alice->John: Hello John,<br/>how are you?\n    Note over Alice,John: A typical interaction<br/>But now in two lines\n```\n\n## Loops\n\nIt is possible to express loops in a sequence diagram. This is done by the notation\n\n```\nloop Loop text\n... statements ...\nend\n```\n\nSee the example below:\n\n```mermaid-example\nsequenceDiagram\n    Alice->John: Hello John, how are you?\n    loop Every minute\n        John-->Alice: Great!\n    end\n```\n\n```mermaid\nsequenceDiagram\n    Alice->John: Hello John, how are you?\n    loop Every minute\n        John-->Alice: Great!\n    end\n```\n\n## Alt\n\nIt is possible to express alternative paths in a sequence diagram. This is done by the notation\n\n```\nalt Describing text\n... statements ...\nelse\n... statements ...\nend\n```\n\nor if there is sequence that is optional (if without else).\n\n```\nopt Describing text\n... statements ...\nend\n```\n\nSee the example below:\n\n```mermaid-example\nsequenceDiagram\n    Alice->>Bob: Hello Bob, how are you?\n    alt is sick\n        Bob->>Alice: Not so good :(\n    else is well\n        Bob->>Alice: Feeling fresh like a daisy\n    end\n    opt Extra response\n        Bob->>Alice: Thanks for asking\n    end\n```\n\n```mermaid\nsequenceDiagram\n    Alice->>Bob: Hello Bob, how are you?\n    alt is sick\n        Bob->>Alice: Not so good :(\n    else is well\n        Bob->>Alice: Feeling fresh like a daisy\n    end\n    opt Extra response\n        Bob->>Alice: Thanks for asking\n    end\n```\n\n## Parallel\n\nIt is possible to show actions that are happening in parallel.\n\nThis is done by the notation\n\n```\npar [Action 1]\n... statements ...\nand [Action 2]\n... statements ...\nand [Action N]\n... statements ...\nend\n```\n\nSee the example below:\n\n```mermaid-example\nsequenceDiagram\n    par Alice to Bob\n        Alice->>Bob: Hello guys!\n    and Alice to John\n        Alice->>John: Hello guys!\n    end\n    Bob-->>Alice: Hi Alice!\n    John-->>Alice: Hi Alice!\n```\n\n```mermaid\nsequenceDiagram\n    par Alice to Bob\n        Alice->>Bob: Hello guys!\n    and Alice to John\n        Alice->>John: Hello guys!\n    end\n    Bob-->>Alice: Hi Alice!\n    John-->>Alice: Hi Alice!\n```\n\nIt is also possible to nest parallel blocks.\n\n```mermaid-example\nsequenceDiagram\n    par Alice to Bob\n        Alice->>Bob: Go help John\n    and Alice to John\n        Alice->>John: I want this done today\n        par John to Charlie\n            John->>Charlie: Can we do this today?\n        and John to Diana\n            John->>Diana: Can you help us today?\n        end\n    end\n```\n\n```mermaid\nsequenceDiagram\n    par Alice to Bob\n        Alice->>Bob: Go help John\n    and Alice to John\n        Alice->>John: I want this done today\n        par John to Charlie\n            John->>Charlie: Can we do this today?\n        and John to Diana\n            John->>Diana: Can you help us today?\n        end\n    end\n```\n\n## Critical Region\n\nIt is possible to show actions that must happen automatically with conditional handling of circumstances.\n\nThis is done by the notation\n\n```\ncritical [Action that must be performed]\n... statements ...\noption [Circumstance A]\n... statements ...\noption [Circumstance B]\n... statements ...\nend\n```\n\nSee the example below:\n\n```mermaid-example\nsequenceDiagram\n    critical Establish a connection to the DB\n        Service-->DB: connect\n    option Network timeout\n        Service-->Service: Log error\n    option Credentials rejected\n        Service-->Service: Log different error\n    end\n```\n\n```mermaid\nsequenceDiagram\n    critical Establish a connection to the DB\n        Service-->DB: connect\n    option Network timeout\n        Service-->Service: Log error\n    option Credentials rejected\n        Service-->Service: Log different error\n    end\n```\n\nIt is also possible to have no options at all\n\n```mermaid-example\nsequenceDiagram\n    critical Establish a connection to the DB\n        Service-->DB: connect\n    end\n```\n\n```mermaid\nsequenceDiagram\n    critical Establish a connection to the DB\n        Service-->DB: connect\n    end\n```\n\nThis critical block can also be nested, equivalently to the `par` statement as seen above.\n\n## Break\n\nIt is possible to indicate a stop of the sequence within the flow (usually used to model exceptions).\n\nThis is done by the notation\n\n```\nbreak [something happened]\n... statements ...\nend\n```\n\nSee the example below:\n\n```mermaid-example\nsequenceDiagram\n    Consumer-->API: Book something\n    API-->BookingService: Start booking process\n    break when the booking process fails\n        API-->Consumer: show failure\n    end\n    API-->BillingService: Start billing process\n```\n\n```mermaid\nsequenceDiagram\n    Consumer-->API: Book something\n    API-->BookingService: Start booking process\n    break when the booking process fails\n        API-->Consumer: show failure\n    end\n    API-->BillingService: Start billing process\n```\n\n## Background Highlighting\n\nIt is possible to highlight flows by providing colored background rects. This is done by the notation\n\n```\nrect COLOR\n... content ...\nend\n```\n\nThe colors are defined using rgb and rgba syntax.\n\n```\nrect rgb(0, 255, 0)\n... content ...\nend\n```\n\n```\nrect rgba(0, 0, 255, .1)\n... content ...\nend\n```\n\nSee the examples below:\n\n```mermaid-example\nsequenceDiagram\n    participant Alice\n    participant John\n\n    rect rgb(191, 223, 255)\n    note right of Alice: Alice calls John.\n    Alice->>+John: Hello John, how are you?\n    rect rgb(200, 150, 255)\n    Alice->>+John: John, can you hear me?\n    John-->>-Alice: Hi Alice, I can hear you!\n    end\n    John-->>-Alice: I feel great!\n    end\n    Alice ->>+ John: Did you want to go to the game tonight?\n    John -->>- Alice: Yeah! See you there.\n\n```\n\n```mermaid\nsequenceDiagram\n    participant Alice\n    participant John\n\n    rect rgb(191, 223, 255)\n    note right of Alice: Alice calls John.\n    Alice->>+John: Hello John, how are you?\n    rect rgb(200, 150, 255)\n    Alice->>+John: John, can you hear me?\n    John-->>-Alice: Hi Alice, I can hear you!\n    end\n    John-->>-Alice: I feel great!\n    end\n    Alice ->>+ John: Did you want to go to the game tonight?\n    John -->>- Alice: Yeah! See you there.\n\n```\n\n## Comments\n\nComments can be entered within a sequence diagram, which will be ignored by the parser. Comments need to be on their own line, and must be prefaced with `%%` (double percent signs). Any text after the start of the comment to the next newline will be treated as a comment, including any diagram syntax\n\n```mermaid-example\nsequenceDiagram\n    Alice->>John: Hello John, how are you?\n    %% this is a comment\n    John-->>Alice: Great!\n```\n\n```mermaid\nsequenceDiagram\n    Alice->>John: Hello John, how are you?\n    %% this is a comment\n    John-->>Alice: Great!\n```\n\n## Entity codes to escape characters\n\nIt is possible to escape characters using the syntax exemplified here.\n\n```mermaid-example\nsequenceDiagram\n    A->>B: I #9829; you!\n    B->>A: I #9829; you #infin; times more!\n```\n\n```mermaid\nsequenceDiagram\n    A->>B: I #9829; you!\n    B->>A: I #9829; you #infin; times more!\n```\n\nNumbers given are base 10, so `#` can be encoded as `#35;`. It is also supported to use HTML character names.\n\nBecause semicolons can be used instead of line breaks to define the markup, you need to use `#59;` to include a semicolon in message text.\n\n## sequenceNumbers\n\nIt is possible to get a sequence number attached to each arrow in a sequence diagram. This can be configured when adding mermaid to the website as shown below:\n\n```html\n<script>\n  mermaid.initialize({ sequence: { showSequenceNumbers: true } });\n<\/script>\n```\n\nIt can also be turned on via the diagram code as in the diagram:\n\n```mermaid-example\nsequenceDiagram\n    autonumber\n    Alice->>John: Hello John, how are you?\n    loop HealthCheck\n        John->>John: Fight against hypochondria\n    end\n    Note right of John: Rational thoughts!\n    John-->>Alice: Great!\n    John->>Bob: How about you?\n    Bob-->>John: Jolly good!\n```\n\n```mermaid\nsequenceDiagram\n    autonumber\n    Alice->>John: Hello John, how are you?\n    loop HealthCheck\n        John->>John: Fight against hypochondria\n    end\n    Note right of John: Rational thoughts!\n    John-->>Alice: Great!\n    John->>Bob: How about you?\n    Bob-->>John: Jolly good!\n```\n\n### Start and Increment values (v11.15.0+)\n\nIt is possible to specify a starting value and an increment value for automatic numbering. Both the starting value and increment value can include decimals up to the hundredths place.\n\nUse the following syntax in your diagram definition:\n\n```\nautonumber <start> <increment>\n```\n\n## Actor Menus\n\nActors can have popup-menus containing individualized links to external pages. For example, if an actor represented a web service, useful links might include a link to the service health dashboard, repo containing the code for the service, or a wiki page describing the service.\n\nThis can be configured by adding one or more link lines with the format:\n\n```\nlink <actor>: <link-label> @ <link-url>\n```\n\n```mermaid-example\nsequenceDiagram\n    participant Alice\n    participant John\n    link Alice: Dashboard @ https://dashboard.contoso.com/alice\n    link Alice: Wiki @ https://wiki.contoso.com/alice\n    link John: Dashboard @ https://dashboard.contoso.com/john\n    link John: Wiki @ https://wiki.contoso.com/john\n    Alice->>John: Hello John, how are you?\n    John-->>Alice: Great!\n    Alice-)John: See you later!\n```\n\n```mermaid\nsequenceDiagram\n    participant Alice\n    participant John\n    link Alice: Dashboard @ https://dashboard.contoso.com/alice\n    link Alice: Wiki @ https://wiki.contoso.com/alice\n    link John: Dashboard @ https://dashboard.contoso.com/john\n    link John: Wiki @ https://wiki.contoso.com/john\n    Alice->>John: Hello John, how are you?\n    John-->>Alice: Great!\n    Alice-)John: See you later!\n```\n\n#### Advanced Menu Syntax\n\nThere is an advanced syntax that relies on JSON formatting. If you are comfortable with JSON format, then this exists as well.\n\nThis can be configured by adding the links lines with the format:\n\n```\nlinks <actor>: <json-formatted link-name link-url pairs>\n```\n\nAn example is below:\n\n```mermaid-example\nsequenceDiagram\n    participant Alice\n    participant John\n    links Alice: {"Dashboard": "https://dashboard.contoso.com/alice", "Wiki": "https://wiki.contoso.com/alice"}\n    links John: {"Dashboard": "https://dashboard.contoso.com/john", "Wiki": "https://wiki.contoso.com/john"}\n    Alice->>John: Hello John, how are you?\n    John-->>Alice: Great!\n    Alice-)John: See you later!\n```\n\n```mermaid\nsequenceDiagram\n    participant Alice\n    participant John\n    links Alice: {"Dashboard": "https://dashboard.contoso.com/alice", "Wiki": "https://wiki.contoso.com/alice"}\n    links John: {"Dashboard": "https://dashboard.contoso.com/john", "Wiki": "https://wiki.contoso.com/john"}\n    Alice->>John: Hello John, how are you?\n    John-->>Alice: Great!\n    Alice-)John: See you later!\n```\n\n## Styling\n\nStyling of a sequence diagram is done by defining a number of css classes. During rendering these classes are extracted from the file located at src/themes/sequence.scss\n\n### Classes used\n\n| Class          | Description                                                    |\n| -------------- | -------------------------------------------------------------- |\n| actor          | Styles for the actor box.                                      |\n| actor-top      | Styles for the actor figure/ box at the top of the diagram.    |\n| actor-bottom   | Styles for the actor figure/ box at the bottom of the diagram. |\n| text.actor     | Styles for text of all of the actors.                          |\n| text.actor-box | Styles for text of the actor box.                              |\n| text.actor-man | Styles for text of the actor figure.                           |\n| actor-line     | The vertical line for an actor.                                |\n| messageLine0   | Styles for the solid message line.                             |\n| messageLine1   | Styles for the dotted message line.                            |\n| messageText    | Defines styles for the text on the message arrows.             |\n| labelBox       | Defines styles label to left in a loop.                        |\n| labelText      | Styles for the text in label for loops.                        |\n| loopText       | Styles for the text in the loop box.                           |\n| loopLine       | Defines styles for the lines in the loop box.                  |\n| note           | Styles for the note box.                                       |\n| noteText       | Styles for the text on in the note boxes.                      |\n\n### Sample stylesheet\n\n```css\nbody {\n  background: white;\n}\n\n.actor {\n  stroke: #ccccff;\n  fill: #ececff;\n}\ntext.actor {\n  fill: black;\n  stroke: none;\n  font-family: Helvetica;\n}\n\n.actor-line {\n  stroke: grey;\n}\n\n.messageLine0 {\n  stroke-width: 1.5;\n  stroke-dasharray: \'2 2\';\n  marker-end: \'url(#arrowhead)\';\n  stroke: black;\n}\n\n.messageLine1 {\n  stroke-width: 1.5;\n  stroke-dasharray: \'2 2\';\n  stroke: black;\n}\n\n#arrowhead {\n  fill: black;\n}\n\n.messageText {\n  fill: black;\n  stroke: none;\n  font-family: \'trebuchet ms\', verdana, arial;\n  font-size: 14px;\n}\n\n.labelBox {\n  stroke: #ccccff;\n  fill: #ececff;\n}\n\n.labelText {\n  fill: black;\n  stroke: none;\n  font-family: \'trebuchet ms\', verdana, arial;\n}\n\n.loopText {\n  fill: black;\n  stroke: none;\n  font-family: \'trebuchet ms\', verdana, arial;\n}\n\n.loopLine {\n  stroke-width: 2;\n  stroke-dasharray: \'2 2\';\n  marker-end: \'url(#arrowhead)\';\n  stroke: #ccccff;\n}\n\n.note {\n  stroke: #decc93;\n  fill: #fff5ad;\n}\n\n.noteText {\n  fill: black;\n  stroke: none;\n  font-family: \'trebuchet ms\', verdana, arial;\n  font-size: 14px;\n}\n```\n\n## Configuration\n\nIt is possible to adjust the margins for rendering the sequence diagram.\n\nThis is done by defining `mermaid.sequenceConfig` or by the CLI to use a json file with the configuration.\nHow to use the CLI is described in the [mermaidCLI](../config/mermaidCLI.md) page.\n`mermaid.sequenceConfig` can be set to a JSON string with config parameters or the corresponding object.\n\n```javascript\nmermaid.sequenceConfig = {\n  diagramMarginX: 50,\n  diagramMarginY: 10,\n  boxTextMargin: 5,\n  noteMargin: 10,\n  messageMargin: 35,\n  mirrorActors: true,\n};\n```\n\n### Possible configuration parameters:\n\n| Parameter         | Description                                                                                                                                | Default value                  |\n| ----------------- | ------------------------------------------------------------------------------------------------------------------------------------------ | ------------------------------ |\n| mirrorActors      | Turns on/off the rendering of actors below the diagram as well as above it                                                                 | false                          |\n| bottomMarginAdj   | Adjusts how far down the graph ended. Wide borders styles with css could generate unwanted clipping which is why this config param exists. | 1                              |\n| actorFontSize     | Sets the font size for the actor\'s description                                                                                             | 14                             |\n| actorFontFamily   | Sets the font family for the actor\'s description                                                                                           | "Open Sans", sans-serif        |\n| actorFontWeight   | Sets the font weight for the actor\'s description                                                                                           | "Open Sans", sans-serif        |\n| noteFontSize      | Sets the font size for actor-attached notes                                                                                                | 14                             |\n| noteFontFamily    | Sets the font family for actor-attached notes                                                                                              | "trebuchet ms", verdana, arial |\n| noteFontWeight    | Sets the font weight for actor-attached notes                                                                                              | "trebuchet ms", verdana, arial |\n| noteAlign         | Sets the text alignment for text in actor-attached notes                                                                                   | center                         |\n| messageFontSize   | Sets the font size for actor<->actor messages                                                                                              | 16                             |\n| messageFontFamily | Sets the font family for actor<->actor messages                                                                                            | "trebuchet ms", verdana, arial |\n| messageFontWeight | Sets the font weight for actor<->actor messages                                                                                            | "trebuchet ms", verdana, arial |\n';
+const __vite_glob_0_37 = '> **Warning**\n>\n> ## THIS IS AN AUTOGENERATED FILE. DO NOT EDIT.\n>\n> ## Please edit the corresponding file in [/packages/mermaid/src/docs/syntax/stateDiagram.md](../../packages/mermaid/src/docs/syntax/stateDiagram.md).\n\n# State diagrams\n\n> "A state diagram is a type of diagram used in computer science and related fields to describe the behavior of systems.\n> State diagrams require that the system described is composed of a finite number of states; sometimes, this is indeed the\n> case, while at other times this is a reasonable abstraction." Wikipedia\n\nMermaid can render state diagrams. The syntax tries to be compliant with the syntax used in plantUml as this will make\nit easier for users to share diagrams between mermaid and plantUml.\n\n```mermaid-example\n---\ntitle: Simple sample\n---\nstateDiagram-v2\n    [*] --> Still\n    Still --> [*]\n\n    Still --> Moving\n    Moving --> Still\n    Moving --> Crash\n    Crash --> [*]\n```\n\n```mermaid\n---\ntitle: Simple sample\n---\nstateDiagram-v2\n    [*] --> Still\n    Still --> [*]\n\n    Still --> Moving\n    Moving --> Still\n    Moving --> Crash\n    Crash --> [*]\n```\n\nOlder renderer:\n\n```mermaid-example\nstateDiagram\n    [*] --> Still\n    Still --> [*]\n\n    Still --> Moving\n    Moving --> Still\n    Moving --> Crash\n    Crash --> [*]\n```\n\n```mermaid\nstateDiagram\n    [*] --> Still\n    Still --> [*]\n\n    Still --> Moving\n    Moving --> Still\n    Moving --> Crash\n    Crash --> [*]\n```\n\nIn state diagrams systems are described in terms of _states_ and how one _state_ can change to another _state_ via\na _transition._ The example diagram above shows three states: **Still**, **Moving** and **Crash**. You start in the\n**Still** state. From **Still** you can change to the **Moving** state. From **Moving** you can change either back to the **Still** state or to\nthe **Crash** state. There is no transition from **Still** to **Crash**. (You can\'t crash if you\'re still.)\n\n## States\n\nA state can be declared in multiple ways. The simplest way is to define a state with just an id:\n\n```mermaid-example\nstateDiagram-v2\n    stateId\n```\n\n```mermaid\nstateDiagram-v2\n    stateId\n```\n\nAnother way is by using the state keyword with a description as per below:\n\n```mermaid-example\nstateDiagram-v2\n    state "This is a state description" as s2\n```\n\n```mermaid\nstateDiagram-v2\n    state "This is a state description" as s2\n```\n\nAnother way to define a state with a description is to define the state id followed by a colon and the description:\n\n```mermaid-example\nstateDiagram-v2\n    s2 : This is a state description\n```\n\n```mermaid\nstateDiagram-v2\n    s2 : This is a state description\n```\n\n## Transitions\n\nTransitions are path/edges when one state passes into another. This is represented using text arrow, "-->".\n\nWhen you define a transition between two states and the states are not already defined, the undefined states are defined\nwith the id from the transition. You can later add descriptions to states defined this way.\n\n```mermaid-example\nstateDiagram-v2\n    s1 --> s2\n```\n\n```mermaid\nstateDiagram-v2\n    s1 --> s2\n```\n\nIt is possible to add text to a transition to describe what it represents:\n\n```mermaid-example\nstateDiagram-v2\n    s1 --> s2: A transition\n```\n\n```mermaid\nstateDiagram-v2\n    s1 --> s2: A transition\n```\n\n## Start and End\n\nThere are two special states indicating the start and stop of the diagram. These are written with the \\[\\*] syntax and\nthe direction of the transition to it defines it either as a start or a stop state.\n\n```mermaid-example\nstateDiagram-v2\n    [*] --> s1\n    s1 --> [*]\n```\n\n```mermaid\nstateDiagram-v2\n    [*] --> s1\n    s1 --> [*]\n```\n\n## Composite states\n\nIn a real world use of state diagrams you often end up with diagrams that are multidimensional as one state can\nhave several internal states. These are called composite states in this terminology.\n\nIn order to define a composite state you need to use the state keyword followed by an id and the body of the composite\nstate between {}. You can name a composite state on a separate line just like a simple state. See the example below:\n\n```mermaid-example\nstateDiagram-v2\n    [*] --> First\n    state First {\n        [*] --> second\n        second --> [*]\n    }\n\n    [*] --> NamedComposite\n    NamedComposite: Another Composite\n    state NamedComposite {\n        [*] --> namedSimple\n        namedSimple --> [*]\n        namedSimple: Another simple\n    }\n```\n\n```mermaid\nstateDiagram-v2\n    [*] --> First\n    state First {\n        [*] --> second\n        second --> [*]\n    }\n\n    [*] --> NamedComposite\n    NamedComposite: Another Composite\n    state NamedComposite {\n        [*] --> namedSimple\n        namedSimple --> [*]\n        namedSimple: Another simple\n    }\n```\n\nYou can do this in several layers:\n\n```mermaid-example\nstateDiagram-v2\n    [*] --> First\n\n    state First {\n        [*] --> Second\n\n        state Second {\n            [*] --> second\n            second --> Third\n\n            state Third {\n                [*] --> third\n                third --> [*]\n            }\n        }\n    }\n```\n\n```mermaid\nstateDiagram-v2\n    [*] --> First\n\n    state First {\n        [*] --> Second\n\n        state Second {\n            [*] --> second\n            second --> Third\n\n            state Third {\n                [*] --> third\n                third --> [*]\n            }\n        }\n    }\n```\n\nYou can also define transitions also between composite states:\n\n```mermaid-example\nstateDiagram-v2\n    [*] --> First\n    First --> Second\n    First --> Third\n\n    state First {\n        [*] --> fir\n        fir --> [*]\n    }\n    state Second {\n        [*] --> sec\n        sec --> [*]\n    }\n    state Third {\n        [*] --> thi\n        thi --> [*]\n    }\n```\n\n```mermaid\nstateDiagram-v2\n    [*] --> First\n    First --> Second\n    First --> Third\n\n    state First {\n        [*] --> fir\n        fir --> [*]\n    }\n    state Second {\n        [*] --> sec\n        sec --> [*]\n    }\n    state Third {\n        [*] --> thi\n        thi --> [*]\n    }\n```\n\n_You cannot define transitions between internal states belonging to different composite states_\n\n## Choice\n\nSometimes you need to model a choice between two or more paths, you can do so using <\\<choice>>.\n\n```mermaid-example\nstateDiagram-v2\n    state if_state <<choice>>\n    [*] --> IsPositive\n    IsPositive --> if_state\n    if_state --> False: if n < 0\n    if_state --> True : if n >= 0\n```\n\n```mermaid\nstateDiagram-v2\n    state if_state <<choice>>\n    [*] --> IsPositive\n    IsPositive --> if_state\n    if_state --> False: if n < 0\n    if_state --> True : if n >= 0\n```\n\n## Forks\n\nIt is possible to specify a fork in the diagram using <\\<fork>> <\\<join>>.\n\n```mermaid-example\n   stateDiagram-v2\n    state fork_state <<fork>>\n      [*] --> fork_state\n      fork_state --> State2\n      fork_state --> State3\n\n      state join_state <<join>>\n      State2 --> join_state\n      State3 --> join_state\n      join_state --> State4\n      State4 --> [*]\n```\n\n```mermaid\n   stateDiagram-v2\n    state fork_state <<fork>>\n      [*] --> fork_state\n      fork_state --> State2\n      fork_state --> State3\n\n      state join_state <<join>>\n      State2 --> join_state\n      State3 --> join_state\n      join_state --> State4\n      State4 --> [*]\n```\n\n## Notes\n\nSometimes nothing says it better than a Post-it note. That is also the case in state diagrams.\n\nHere you can choose to put the note to the _right of_ or to the _left of_ a node.\n\n```mermaid-example\n    stateDiagram-v2\n        State1: The state with a note\n        note right of State1\n            Important information! You can write\n            notes.\n        end note\n        State1 --> State2\n        note left of State2 : This is the note to the left.\n```\n\n```mermaid\n    stateDiagram-v2\n        State1: The state with a note\n        note right of State1\n            Important information! You can write\n            notes.\n        end note\n        State1 --> State2\n        note left of State2 : This is the note to the left.\n```\n\n## Concurrency\n\nAs in plantUml you can specify concurrency using the -- symbol.\n\n```mermaid-example\nstateDiagram-v2\n    [*] --> Active\n\n    state Active {\n        [*] --> NumLockOff\n        NumLockOff --> NumLockOn : EvNumLockPressed\n        NumLockOn --> NumLockOff : EvNumLockPressed\n        --\n        [*] --> CapsLockOff\n        CapsLockOff --> CapsLockOn : EvCapsLockPressed\n        CapsLockOn --> CapsLockOff : EvCapsLockPressed\n        --\n        [*] --> ScrollLockOff\n        ScrollLockOff --> ScrollLockOn : EvScrollLockPressed\n        ScrollLockOn --> ScrollLockOff : EvScrollLockPressed\n    }\n```\n\n```mermaid\nstateDiagram-v2\n    [*] --> Active\n\n    state Active {\n        [*] --> NumLockOff\n        NumLockOff --> NumLockOn : EvNumLockPressed\n        NumLockOn --> NumLockOff : EvNumLockPressed\n        --\n        [*] --> CapsLockOff\n        CapsLockOff --> CapsLockOn : EvCapsLockPressed\n        CapsLockOn --> CapsLockOff : EvCapsLockPressed\n        --\n        [*] --> ScrollLockOff\n        ScrollLockOff --> ScrollLockOn : EvScrollLockPressed\n        ScrollLockOn --> ScrollLockOff : EvScrollLockPressed\n    }\n```\n\n## Setting the direction of the diagram\n\nWith state diagrams you can use the direction statement to set the direction which the diagram will render like in this\nexample.\n\n```mermaid-example\nstateDiagram\n    direction LR\n    [*] --> A\n    A --> B\n    B --> C\n    state B {\n      direction LR\n      a --> b\n    }\n    B --> D\n```\n\n```mermaid\nstateDiagram\n    direction LR\n    [*] --> A\n    A --> B\n    B --> C\n    state B {\n      direction LR\n      a --> b\n    }\n    B --> D\n```\n\n## Comments\n\nComments can be entered within a state diagram chart, which will be ignored by the parser. Comments must be prefaced with `%%` (double percent signs) and any text after their start to the next newline will be treated as a comment, including any diagram syntax. They can be on their own line or at the end of a statement.\n\n```mermaid-example\nstateDiagram-v2\n    [*] --> Still\n    Still --> [*]\n%% this is a comment\n    Still --> Moving\n    Moving --> Still %% another comment\n    Moving --> Crash\n    Crash --> [*]\n```\n\n```mermaid\nstateDiagram-v2\n    [*] --> Still\n    Still --> [*]\n%% this is a comment\n    Still --> Moving\n    Moving --> Still %% another comment\n    Moving --> Crash\n    Crash --> [*]\n```\n\n## Styling with classDefs\n\nAs with other diagrams (like flowcharts), you can define a style in the diagram itself and apply that named style to a\nstate or states in the diagram.\n\n**These are the current limitations with state diagram classDefs:**\n\n1. Cannot be applied to start or end states\n2. Cannot be applied to or within composite states\n\n_These are in development and will be available in a future version._\n\nYou define a style using the `classDef` keyword, which is short for "class definition" (where "class" means something\nlike a _CSS class_)\nfollowed by _a name for the style,_\nand then one or more _property-value pairs_. Each _property-value pair_ is\na _[valid CSS property name](https://www.w3.org/TR/CSS/#properties)_ followed by a colon (`:`) and then a _value._\n\nHere is an example of a classDef with just one property-value pair:\n\n```txt\nclassDef movement font-style:italic;\n```\n\nwhere\n\n- the _name_ of the style is `movement`\n- the only _property_ is `font-style` and its _value_ is `italic`\n\nIf you want to have more than one _property-value pair_ then you put a comma (`,`) between each _property-value pair._\n\nHere is an example with three property-value pairs:\n\n```txt\nclassDef badBadEvent fill:#f00,color:white,font-weight:bold,stroke-width:2px,stroke:yellow\n```\n\nwhere\n\n- the _name_ of the style is `badBadEvent`\n- the first _property_ is `fill` and its _value_ is `#f00`\n- the second _property_ is `color` and its _value_ is `white`\n- the third _property_ is `font-weight` and its _value_ is `bold`\n- the fourth _property_ is `stroke-width` and its _value_ is `2px`\n- the fifth _property_ is `stroke` and its _value_ is `yellow`\n\n### Apply classDef styles to states\n\nThere are two ways to apply a `classDef` style to a state:\n\n1. use the `class` keyword to apply a classDef style to one or more states in a single statement, or\n2. use the `:::` operator to apply a classDef style to a state as it is being used in a transition statement (e.g. with an arrow\n   to/from another state)\n\n#### 1. `class` statement\n\nA `class` statement tells Mermaid to apply the named classDef to one or more classes. The form is:\n\n```txt\nclass [one or more state names, separated by commas] [name of a style defined with classDef]\n```\n\nHere is an example applying the `badBadEvent` style to a state named `Crash`:\n\n```txt\nclass Crash badBadEvent\n```\n\nHere is an example applying the `movement` style to the two states `Moving` and `Crash`:\n\n```txt\nclass Moving, Crash movement\n```\n\nHere is a diagram that shows the examples in use. Note that the `Crash` state has two classDef styles applied: `movement`\nand `badBadEvent`\n\n```mermaid-example\n   stateDiagram\n   direction TB\n\n   accTitle: This is the accessible title\n   accDescr: This is an accessible description\n\n   classDef notMoving fill:white\n   classDef movement font-style:italic\n   classDef badBadEvent fill:#f00,color:white,font-weight:bold,stroke-width:2px,stroke:yellow\n\n   [*]--> Still\n   Still --> [*]\n   Still --> Moving\n   Moving --> Still\n   Moving --> Crash\n   Crash --> [*]\n\n   class Still notMoving\n   class Moving, Crash movement\n   class Crash badBadEvent\n   class end badBadEvent\n```\n\n```mermaid\n   stateDiagram\n   direction TB\n\n   accTitle: This is the accessible title\n   accDescr: This is an accessible description\n\n   classDef notMoving fill:white\n   classDef movement font-style:italic\n   classDef badBadEvent fill:#f00,color:white,font-weight:bold,stroke-width:2px,stroke:yellow\n\n   [*]--> Still\n   Still --> [*]\n   Still --> Moving\n   Moving --> Still\n   Moving --> Crash\n   Crash --> [*]\n\n   class Still notMoving\n   class Moving, Crash movement\n   class Crash badBadEvent\n   class end badBadEvent\n```\n\n#### 2. `:::` operator to apply a style to a state\n\nYou can apply a classDef style to a state using the `:::` (three colons) operator. The syntax is\n\n```txt\n[state]:::[style name]\n```\n\nYou can use this in a diagram within a statement using a class. This includes the start and end states. For example:\n\n```mermaid-example\nstateDiagram\n   direction TB\n\n   accTitle: This is the accessible title\n   accDescr: This is an accessible description\n\n   classDef notMoving fill:white\n   classDef movement font-style:italic;\n   classDef badBadEvent fill:#f00,color:white,font-weight:bold,stroke-width:2px,stroke:yellow\n\n   [*] --> Still:::notMoving\n   Still --> [*]\n   Still --> Moving:::movement\n   Moving --> Still\n   Moving --> Crash:::movement\n   Crash:::badBadEvent --> [*]\n```\n\n```mermaid\nstateDiagram\n   direction TB\n\n   accTitle: This is the accessible title\n   accDescr: This is an accessible description\n\n   classDef notMoving fill:white\n   classDef movement font-style:italic;\n   classDef badBadEvent fill:#f00,color:white,font-weight:bold,stroke-width:2px,stroke:yellow\n\n   [*] --> Still:::notMoving\n   Still --> [*]\n   Still --> Moving:::movement\n   Moving --> Still\n   Moving --> Crash:::movement\n   Crash:::badBadEvent --> [*]\n```\n\n## Spaces in state names\n\nSpaces can be added to a state by first defining the state with an id and then referencing the id later.\n\nIn the following example there is a state with the id **yswsii** and description **Your state with spaces in it**.\nAfter it has been defined, **yswsii** is used in the diagram in the first transition (`[*] --> yswsii`)\nand also in the transition to **YetAnotherState** (`yswsii --> YetAnotherState`).\n(**yswsii** has been styled so that it is different from the other states.)\n\n```mermaid-example\nstateDiagram\n    classDef yourState font-style:italic,font-weight:bold,fill:white\n\n    yswsii: Your state with spaces in it\n    [*] --> yswsii:::yourState\n    [*] --> SomeOtherState\n    SomeOtherState --> YetAnotherState\n    yswsii --> YetAnotherState\n    YetAnotherState --> [*]\n```\n\n```mermaid\nstateDiagram\n    classDef yourState font-style:italic,font-weight:bold,fill:white\n\n    yswsii: Your state with spaces in it\n    [*] --> yswsii:::yourState\n    [*] --> SomeOtherState\n    SomeOtherState --> YetAnotherState\n    yswsii --> YetAnotherState\n    YetAnotherState --> [*]\n```\n\n<!--- cspell:ignore yswsii --->\n';
+const __vite_glob_0_38 = '> **Warning**\n>\n> ## THIS IS AN AUTOGENERATED FILE. DO NOT EDIT.\n>\n> ## Please edit the corresponding file in [/packages/mermaid/src/docs/syntax/swimlanes.md](../../packages/mermaid/src/docs/syntax/swimlanes.md).\n\n# Swimlanes Diagram\n\n> Available since MERMAID_RELEASE_VERSION.\n\n> **Warning**\n> This is a new diagram type in Mermaid. Its syntax may evolve in future versions.\n\nA swimlane diagram shows a process divided by responsibility. Each lane represents an actor, team, system, or phase, and the nodes inside the lane show the work that happens there. Arrows show the order of work and the handoffs between lanes.\n\nUse swimlane diagrams when the most important question is not only "what happens next?" but also "who owns this step?" They are useful for approval flows, support processes, delivery workflows, and any process where work crosses teams or systems.\n\n## Basic Example\n\n> The rendered examples on this page use the **Neo** look and the **Redux** theme. Out of the box, swimlanes use your configured default look and theme.\n\n```mermaid-example\nswimlane LR\n  subgraph Customer\n    request[Request service]\n    receive[Receive update]\n  end\n\n  subgraph Support\n    triage[Triage request]\n    answer[Send answer]\n  end\n\n  subgraph Engineering\n    investigate[Investigate issue]\n    fix[Prepare fix]\n  end\n\n  request --> triage\n  triage -->|Known issue| answer\n  triage -->|Needs code change| investigate\n  investigate --> fix --> answer\n  answer --> receive\n```\n\n```mermaid\nswimlane LR\n  subgraph Customer\n    request[Request service]\n    receive[Receive update]\n  end\n\n  subgraph Support\n    triage[Triage request]\n    answer[Send answer]\n  end\n\n  subgraph Engineering\n    investigate[Investigate issue]\n    fix[Prepare fix]\n  end\n\n  request --> triage\n  triage -->|Known issue| answer\n  triage -->|Needs code change| investigate\n  investigate --> fix --> answer\n  answer --> receive\n```\n\n## Syntax\n\nA swimlane diagram starts with the `swimlane` keyword. You can optionally add a direction after the keyword.\n\n```\nswimlane\n```\n\n```\nswimlane LR\n```\n\nThe supported directions are:\n\n| Direction | Meaning                |\n| --------- | ---------------------- |\n| `TB`      | Top to bottom          |\n| `TD`      | Top down, same as `TB` |\n| `BT`      | Bottom to top          |\n| `LR`      | Left to right          |\n| `RL`      | Right to left          |\n\nIf no direction is set, the diagram uses `TB`.\n\n### Lanes\n\nUse `subgraph` to create a lane. In a swimlane diagram, top-level subgraphs are rendered as swimlanes. A lane ends with `end`.\n\n```mermaid-example\nswimlane\n  subgraph Sales\n    lead[Qualify lead]\n    quote[Prepare quote]\n  end\n```\n\n```mermaid\nswimlane\n  subgraph Sales\n    lead[Qualify lead]\n    quote[Prepare quote]\n  end\n```\n\nYou can give a lane an internal id and a display label. This is useful when the label contains spaces or when you want a stable id for styling.\n\n```mermaid-example\nswimlane LR\n  subgraph sales [Sales team]\n    lead[Qualify lead]\n    quote[Prepare quote]\n  end\n\n  subgraph finance [Finance team]\n    review[Review terms]\n    approve[Approve quote]\n  end\n\n  lead --> quote --> review --> approve\n```\n\n```mermaid\nswimlane LR\n  subgraph sales [Sales team]\n    lead[Qualify lead]\n    quote[Prepare quote]\n  end\n\n  subgraph finance [Finance team]\n    review[Review terms]\n    approve[Approve quote]\n  end\n\n  lead --> quote --> review --> approve\n```\n\n### Nodes\n\nNodes use flowchart-style shape syntax. The id is written first, and the label is written inside the shape.\n\n```mermaid-example\nswimlane LR\n  subgraph Intake\n    start([Start])\n    task[Do work]\n    fix[Fix issues]\n  end\n\n  subgraph Review\n    decision{Ready?}\n  end\n\n  subgraph Complete\n    done((Done))\n  end\n\n  start --> task --> decision\n  decision -->|Yes| done\n  decision -->|No| fix\n  fix --> task\n```\n\n```mermaid\nswimlane LR\n  subgraph Intake\n    start([Start])\n    task[Do work]\n    fix[Fix issues]\n  end\n\n  subgraph Review\n    decision{Ready?}\n  end\n\n  subgraph Complete\n    done((Done))\n  end\n\n  start --> task --> decision\n  decision -->|Yes| done\n  decision -->|No| fix\n  fix --> task\n```\n\nThe most common node forms are:\n\n| Syntax       | Shape             | Common use          |\n| ------------ | ----------------- | ------------------- |\n| `id[Text]`   | Rectangle         | Task or activity    |\n| `id(Text)`   | Rounded rectangle | Step or event       |\n| `id([Text])` | Stadium           | Start or end        |\n| `id{Text}`   | Decision          | Branching question  |\n| `id((Text))` | Circle            | Connector or marker |\n\nFor the complete shape catalog, icons, images, markdown strings, classes, and styling options, see [Flowchart syntax](./flowchart.md).\n\n### Edges\n\nEdges also use flowchart-style syntax. They can connect nodes in the same lane or across lanes.\n\n```mermaid-example\nswimlane LR\n  subgraph Buyer\n    choose[Choose product]\n    pay[Pay invoice]\n  end\n\n  subgraph Store\n    reserve[Reserve stock]\n    ship[Ship product]\n  end\n\n  choose --> reserve\n  reserve -->|Invoice ready| pay\n  pay --> ship\n```\n\n```mermaid\nswimlane LR\n  subgraph Buyer\n    choose[Choose product]\n    pay[Pay invoice]\n  end\n\n  subgraph Store\n    reserve[Reserve stock]\n    ship[Ship product]\n  end\n\n  choose --> reserve\n  reserve -->|Invoice ready| pay\n  pay --> ship\n```\n\nCommon edge forms:\n\n| Syntax             | Meaning                |\n| ------------------ | ---------------------- |\n| `A --> B`          | Arrow                  |\n| `A --- B`          | Line without arrowhead |\n| `A -->\\|Label\\| B` | Arrow with label       |\n| `A -.-> B`         | Dotted arrow           |\n| `A ==> B`          | Thick arrow            |\n\nFor the full edge syntax, including multi-directional arrows and minimum link length, see [Flowchart syntax](./flowchart.md#links-between-nodes).\n\n### Accessibility\n\nUse `accTitle` and `accDescr` to provide an accessible title and description.\n\n```mermaid-example\nswimlane LR\n  accTitle: Support escalation\n  accDescr: A request starts with the customer, is triaged by support, and may be escalated to engineering.\n\n  subgraph Customer\n    request[Open request]\n  end\n\n  subgraph Support\n    triage[Triage]\n  end\n\n  subgraph Engineering\n    resolve[Resolve]\n  end\n\n  request --> triage --> resolve\n```\n\n```mermaid\nswimlane LR\n  accTitle: Support escalation\n  accDescr: A request starts with the customer, is triaged by support, and may be escalated to engineering.\n\n  subgraph Customer\n    request[Open request]\n  end\n\n  subgraph Support\n    triage[Triage]\n  end\n\n  subgraph Engineering\n    resolve[Resolve]\n  end\n\n  request --> triage --> resolve\n```\n\n## Good Practices\n\n### Make Each Lane Mean One Kind of Ownership\n\nChoose lanes that answer "who owns this step?" Avoid mixing teams, phases, and statuses in the same diagram unless that distinction is the point of the diagram.\n\n```mermaid-example\nswimlane LR\n  subgraph Customer\n    submit[Submit order]\n    confirm[Confirm delivery]\n  end\n\n  subgraph Store\n    check[Check order]\n    pack[Pack items]\n  end\n\n  subgraph Carrier\n    collect[Collect package]\n    deliver[Deliver package]\n  end\n\n  submit --> check --> pack --> collect --> deliver --> confirm\n```\n\n```mermaid\nswimlane LR\n  subgraph Customer\n    submit[Submit order]\n    confirm[Confirm delivery]\n  end\n\n  subgraph Store\n    check[Check order]\n    pack[Pack items]\n  end\n\n  subgraph Carrier\n    collect[Collect package]\n    deliver[Deliver package]\n  end\n\n  submit --> check --> pack --> collect --> deliver --> confirm\n```\n\n### Label Cross-Lane Handoffs\n\nA cross-lane arrow is where responsibility changes. Label the arrow when the handoff depends on a document, decision, message, or condition.\n\n```mermaid-example\nswimlane LR\n  subgraph Applicant\n    apply[Submit application]\n    sign[Sign agreement]\n  end\n\n  subgraph Reviewer\n    screen[Screen application]\n    decide{Approved?}\n  end\n\n  subgraph System\n    create[Create account]\n    notify[Send welcome email]\n  end\n\n  apply -->|Application received| screen\n  screen --> decide\n  decide -->|Approved| create --> notify --> sign\n  decide -->|Needs changes| apply\n```\n\n```mermaid\nswimlane LR\n  subgraph Applicant\n    apply[Submit application]\n    sign[Sign agreement]\n  end\n\n  subgraph Reviewer\n    screen[Screen application]\n    decide{Approved?}\n  end\n\n  subgraph System\n    create[Create account]\n    notify[Send welcome email]\n  end\n\n  apply -->|Application received| screen\n  screen --> decide\n  decide -->|Approved| create --> notify --> sign\n  decide -->|Needs changes| apply\n```\n\n### Keep Long Processes Readable\n\nSplit a large process into several diagrams when the lanes or handoffs stop fitting in one view. A useful swimlane diagram is usually readable without tracing every arrow twice.\n\n```mermaid-example\nswimlane TB\n  subgraph Intake\n    collect[Collect request]\n    validate[Validate details]\n  end\n\n  subgraph Review\n    review[Review request]\n    decide{Ready?}\n  end\n\n  subgraph Delivery\n    schedule[Schedule work]\n    complete[Complete work]\n  end\n\n  collect --> validate --> review --> decide\n  decide -->|Yes| schedule --> complete\n  decide -->|No| collect\n```\n\n```mermaid\nswimlane TB\n  subgraph Intake\n    collect[Collect request]\n    validate[Validate details]\n  end\n\n  subgraph Review\n    review[Review request]\n    decide{Ready?}\n  end\n\n  subgraph Delivery\n    schedule[Schedule work]\n    complete[Complete work]\n  end\n\n  collect --> validate --> review --> decide\n  decide -->|Yes| schedule --> complete\n  decide -->|No| collect\n```\n\n### Use Stable Ids\n\nUse short, meaningful ids for nodes and lanes. The label can change without breaking links, styles, or later references.\n\n```mermaid-example\nswimlane LR\n  subgraph ops [Operations]\n    intake[Receive request]\n    plan[Plan work]\n  end\n\n  subgraph legal [Legal]\n    review[Review contract]\n  end\n\n  intake --> plan --> review\n\n  classDef attention fill:#fff2cc,stroke:#d6a500,color:#111;\n  class review attention;\n```\n\n```mermaid\nswimlane LR\n  subgraph ops [Operations]\n    intake[Receive request]\n    plan[Plan work]\n  end\n\n  subgraph legal [Legal]\n    review[Review contract]\n  end\n\n  intake --> plan --> review\n\n  classDef attention fill:#fff2cc,stroke:#d6a500,color:#111;\n  class review attention;\n```\n\n### Put Decisions Where They Are Made\n\nPlace a decision node in the lane that owns the decision. Then route the outcomes to the lanes that act on the result.\n\n```mermaid-example\nswimlane LR\n  subgraph Support\n    classify{Can support solve it?}\n    respond[Respond to customer]\n  end\n\n  subgraph Product\n    prioritize[Prioritize fix]\n  end\n\n  subgraph Engineering\n    implement[Implement fix]\n  end\n\n  classify -->|Yes| respond\n  classify -->|No| prioritize --> implement --> respond\n```\n\n```mermaid\nswimlane LR\n  subgraph Support\n    classify{Can support solve it?}\n    respond[Respond to customer]\n  end\n\n  subgraph Product\n    prioritize[Prioritize fix]\n  end\n\n  subgraph Engineering\n    implement[Implement fix]\n  end\n\n  classify -->|Yes| respond\n  classify -->|No| prioritize --> implement --> respond\n```\n\n## When to Use Another Diagram\n\nUse a regular [flowchart](./flowchart.md) when ownership is not important and you only need to show sequence or branching. Use a [sequence diagram](./sequenceDiagram.md) when the focus is messages over time between participants. Use a [state diagram](./stateDiagram.md) when the focus is how one thing changes state.\n';
+const __vite_glob_0_39 = "> **Warning**\n>\n> ## THIS IS AN AUTOGENERATED FILE. DO NOT EDIT.\n>\n> ## Please edit the corresponding file in [/packages/mermaid/src/docs/syntax/timeline.md](../../packages/mermaid/src/docs/syntax/timeline.md).\n\n# Timeline Diagram\n\n> Timeline: This is an experimental diagram for now. The syntax and properties can change in future releases. The syntax is stable except for the icon integration which is the experimental part.\n\n\"A timeline is a type of diagram used to illustrate a chronology of events, dates, or periods of time. It is usually presented graphically to indicate the passing of time, and it is usually organized chronologically. A basic timeline presents a list of events in chronological order, usually using dates as markers. A timeline can also be used to show the relationship between events, such as the relationship between the events of a person's life\" [(Wikipedia)](https://en.wikipedia.org/wiki/Timeline).\n\n### An example of a timeline\n\n```mermaid-example\ntimeline\n    title History of Social Media Platform\n    2002 : LinkedIn\n    2004 : Facebook\n         : Google\n    2005 : YouTube\n    2006 : Twitter\n```\n\n```mermaid\ntimeline\n    title History of Social Media Platform\n    2002 : LinkedIn\n    2004 : Facebook\n         : Google\n    2005 : YouTube\n    2006 : Twitter\n```\n\n## Syntax\n\nThe syntax for creating Timeline diagram is simple. You always start with the `timeline` keyword to let mermaid know that you want to create a timeline diagram.\n\nAfter that there is a possibility to add a title to the timeline. This is done by adding a line with the keyword `title` followed by the title text.\n\nThen you add the timeline data, where you always start with a time period, followed by a colon and then the text for the event. Optionally you can add a second colon and then the text for the event. So, you can have one or more events per time period.\n\n```json\n{time period} : {event}\n```\n\nor\n\n```json\n{time period} : {event} : {event}\n```\n\nor\n\n```json\n{time period} : {event}\n              : {event}\n              : {event}\n```\n\n**NOTE**: Both time period and event are simple text, and not limited to numbers.\n\nLet us look at the syntax for the example above.\n\n```mermaid-example\ntimeline\n    title History of Social Media Platform\n    2002 : LinkedIn\n    2004 : Facebook : Google\n    2005 : YouTube\n    2006 : Twitter\n```\n\n```mermaid\ntimeline\n    title History of Social Media Platform\n    2002 : LinkedIn\n    2004 : Facebook : Google\n    2005 : YouTube\n    2006 : Twitter\n```\n\nIn this way we can use a text outline to generate a timeline diagram.\nThe sequence of time period and events is important, as it will be used to draw the timeline. The first time period will be placed at the left side of the timeline, and the last time period will be placed at the right side of the timeline.\n\nSimilarly, the first event will be placed at the top for that specific time period, and the last event will be placed at the bottom.\n\n## Grouping of time periods in sections/ages\n\nYou can group time periods in sections/ages. This is done by adding a line with the keyword `section` followed by the section name.\n\nAll subsequent time periods will be placed in this section until a new section is defined.\n\nIf no section is defined, all time periods will be placed in the default section.\n\nLet us look at an example, where we have grouped the time periods in sections.\n\n```mermaid-example\ntimeline\n    title Timeline of Industrial Revolution\n    section 17th-20th century\n        Industry 1.0 : Machinery, Water power, Steam <br>power\n        Industry 2.0 : Electricity, Internal combustion engine, Mass production\n        Industry 3.0 : Electronics, Computers, Automation\n    section 21st century\n        Industry 4.0 : Internet, Robotics, Internet of Things\n        Industry 5.0 : Artificial intelligence, Big data, 3D printing\n```\n\n```mermaid\ntimeline\n    title Timeline of Industrial Revolution\n    section 17th-20th century\n        Industry 1.0 : Machinery, Water power, Steam <br>power\n        Industry 2.0 : Electricity, Internal combustion engine, Mass production\n        Industry 3.0 : Electronics, Computers, Automation\n    section 21st century\n        Industry 4.0 : Internet, Robotics, Internet of Things\n        Industry 5.0 : Artificial intelligence, Big data, 3D printing\n```\n\nAs you can see, the time periods are placed in the sections, and the sections are placed in the order they are defined.\n\nAll time periods and events under a given section follow a similar color scheme. This is done to make it easier to see the relationship between time periods and events.\n\n## Wrapping of text for long time-periods or events\n\nBy default, the text for time-periods and events will be wrapped if it is too long. This is done to avoid that the text is drawn outside the diagram.\n\nYou can also use `<br>` to force a line break.\n\nLet us look at another example, where we have a long time period, and a long event.\n\n```mermaid-example\ntimeline\n        title England's History Timeline\n        section Stone Age\n          7600 BC : Britain's oldest known house was built in Orkney, Scotland\n          6000 BC : Sea levels rise and Britain becomes an island.<br> The people who live here are hunter-gatherers.\n        section Bronze Age\n          2300 BC : People arrive from Europe and settle in Britain. <br>They bring farming and metalworking.\n                  : New styles of pottery and ways of burying the dead appear.\n          2200 BC : The last major building works are completed at Stonehenge.<br> People now bury their dead in stone circles.\n                  : The first metal objects are made in Britain.Some other nice things happen. it is a good time to be alive.\n\n```\n\n```mermaid\ntimeline\n        title England's History Timeline\n        section Stone Age\n          7600 BC : Britain's oldest known house was built in Orkney, Scotland\n          6000 BC : Sea levels rise and Britain becomes an island.<br> The people who live here are hunter-gatherers.\n        section Bronze Age\n          2300 BC : People arrive from Europe and settle in Britain. <br>They bring farming and metalworking.\n                  : New styles of pottery and ways of burying the dead appear.\n          2200 BC : The last major building works are completed at Stonehenge.<br> People now bury their dead in stone circles.\n                  : The first metal objects are made in Britain.Some other nice things happen. it is a good time to be alive.\n\n```\n\n```mermaid-example\ntimeline\n        title MermaidChart 2023 Timeline\n        section 2023 Q1 <br> Release Personal Tier\n          Bullet 1 : sub-point 1a : sub-point 1b\n               : sub-point 1c\n          Bullet 2 : sub-point 2a : sub-point 2b\n        section 2023 Q2 <br> Release XYZ Tier\n          Bullet 3 : sub-point <br> 3a : sub-point 3b\n               : sub-point 3c\n          Bullet 4 : sub-point 4a : sub-point 4b\n```\n\n```mermaid\ntimeline\n        title MermaidChart 2023 Timeline\n        section 2023 Q1 <br> Release Personal Tier\n          Bullet 1 : sub-point 1a : sub-point 1b\n               : sub-point 1c\n          Bullet 2 : sub-point 2a : sub-point 2b\n        section 2023 Q2 <br> Release XYZ Tier\n          Bullet 3 : sub-point <br> 3a : sub-point 3b\n               : sub-point 3c\n          Bullet 4 : sub-point 4a : sub-point 4b\n```\n\n### Direction (v11.14.0+)\n\nTimeline can change its direction by the keyword after `timeline`.\n\n```mermaid-example\ntimeline TD\n  title MermaidChart 2023 Timeline\n    section 2023 Q1 <br> Release Personal Tier\n      Bullet 1 : sub-point 1a : sub-point 1b\n      Bullet 2 : sub-point 2a : sub-point 2b\n    section 2023 Q2 <br> Release XYZ Tier\n      Bullet 3 : sub-point <br> 3a : sub-point 3b\n      Bullet 4 : sub-point 4a : sub-point 4b\n```\n\n```mermaid\ntimeline TD\n  title MermaidChart 2023 Timeline\n    section 2023 Q1 <br> Release Personal Tier\n      Bullet 1 : sub-point 1a : sub-point 1b\n      Bullet 2 : sub-point 2a : sub-point 2b\n    section 2023 Q2 <br> Release XYZ Tier\n      Bullet 3 : sub-point <br> 3a : sub-point 3b\n      Bullet 4 : sub-point 4a : sub-point 4b\n```\n\nPossible directions are:\n\n- `LR`: Left to right (default)\n- `TD`: Top top down.\n\n## Styling of time periods and events\n\nAs explained earlier, each section has a color scheme, and each time period and event under a section follow the similar color scheme.\n\nHowever, if there is no section defined, then we have two possibilities:\n\n1. Style time periods individually, i.e. each time period(and its corresponding events) will have its own color scheme. This is the DEFAULT behavior.\n\n```mermaid-example\n    timeline\n        title History of Social Media Platform\n          2002 : LinkedIn\n          2004 : Facebook : Google\n          2005 : YouTube\n          2006 : Twitter\n\n```\n\n```mermaid\n    timeline\n        title History of Social Media Platform\n          2002 : LinkedIn\n          2004 : Facebook : Google\n          2005 : YouTube\n          2006 : Twitter\n\n```\n\n**NOTE**: that there are no sections defined, and each time period and its corresponding events will have its own color scheme.\n\n2. Disable the multiColor option using the `disableMultiColor` option. This will make all time periods and events follow the same color scheme.\n\nYou will need to add this option either via mermaid.initialize function or directives.\n\n```javascript\nmermaid.initialize({\n        theme: 'base',\n        startOnLoad: true,\n        logLevel: 0,\n        timeline: {\n          disableMulticolor: false,\n        },\n        ...\n        ...\n```\n\nlet us look at same example, where we have disabled the multiColor option.\n\n```mermaid-example\n---\nconfig:\n  logLevel: 'debug'\n  theme: 'base'\n  timeline:\n    disableMulticolor: true\n---\n    timeline\n        title History of Social Media Platform\n          2002 : LinkedIn\n          2004 : Facebook : Google\n          2005 : YouTube\n          2006 : Twitter\n\n```\n\n```mermaid\n---\nconfig:\n  logLevel: 'debug'\n  theme: 'base'\n  timeline:\n    disableMulticolor: true\n---\n    timeline\n        title History of Social Media Platform\n          2002 : LinkedIn\n          2004 : Facebook : Google\n          2005 : YouTube\n          2006 : Twitter\n\n```\n\n### Customizing Color scheme\n\nYou can customize the color scheme using the `cScale0` to `cScale11` theme variables, which will change the background colors. Mermaid allows you to set unique colors for up-to 12 sections, where `cScale0` variable will drive the value of the first section or time-period, `cScale1` will drive the value of the second section and so on.\nIn case you have more than 12 sections, the color scheme will start to repeat.\n\nIf you also want to change the foreground color of a section, you can do so use theme variables corresponding `cScaleLabel0` to `cScaleLabel11` variables.\n\n**NOTE**: Default values for these theme variables are picked from the selected theme. If you want to override the default values, you can use the `initialize` call to add your custom theme variable values.\n\nExample:\n\nNow let's override the default values for the `cScale0` to `cScale2` variables:\n\n```mermaid-example\n---\nconfig:\n  logLevel: 'debug'\n  theme: 'default'\n  themeVariables:\n    cScale0: '#ff0000'\n    cScaleLabel0: '#ffffff'\n    cScale1: '#00ff00'\n    cScale2: '#0000ff'\n    cScaleLabel2: '#ffffff'\n---\n       timeline\n        title History of Social Media Platform\n          2002 : LinkedIn\n          2004 : Facebook : Google\n          2005 : YouTube\n          2006 : Twitter\n          2007 : Tumblr\n          2008 : Instagram\n          2010 : Pinterest\n\n```\n\n```mermaid\n---\nconfig:\n  logLevel: 'debug'\n  theme: 'default'\n  themeVariables:\n    cScale0: '#ff0000'\n    cScaleLabel0: '#ffffff'\n    cScale1: '#00ff00'\n    cScale2: '#0000ff'\n    cScaleLabel2: '#ffffff'\n---\n       timeline\n        title History of Social Media Platform\n          2002 : LinkedIn\n          2004 : Facebook : Google\n          2005 : YouTube\n          2006 : Twitter\n          2007 : Tumblr\n          2008 : Instagram\n          2010 : Pinterest\n\n```\n\nSee how the colors are changed to the values specified in the theme variables.\n\n## Themes\n\nMermaid supports a bunch of pre-defined themes which you can use to find the right one for you. PS: you can actually override an existing theme's variable to get your own custom theme going. Learn more about [theming your diagram](../config/theming.md).\n\nThe following are the different pre-defined theme options:\n\n- `base`\n- `forest`\n- `dark`\n- `default`\n- `neutral`\n\n**NOTE**: To change theme you can either use the `initialize` call or _directives_. Learn more about [directives](../config/directives.md)\nLet's put them to use, and see how our sample diagram looks in different themes:\n\n### Base Theme\n\n```mermaid-example\n---\nconfig:\n  logLevel: 'debug'\n  theme: 'base'\n---\n    timeline\n        title History of Social Media Platform\n          2002 : LinkedIn\n          2004 : Facebook : Google\n          2005 : YouTube\n          2006 : Twitter\n          2007 : Tumblr\n          2008 : Instagram\n          2010 : Pinterest\n```\n\n```mermaid\n---\nconfig:\n  logLevel: 'debug'\n  theme: 'base'\n---\n    timeline\n        title History of Social Media Platform\n          2002 : LinkedIn\n          2004 : Facebook : Google\n          2005 : YouTube\n          2006 : Twitter\n          2007 : Tumblr\n          2008 : Instagram\n          2010 : Pinterest\n```\n\n### Forest Theme\n\n```mermaid-example\n---\nconfig:\n  logLevel: 'debug'\n  theme: 'forest'\n---\n    timeline\n        title History of Social Media Platform\n          2002 : LinkedIn\n          2004 : Facebook : Google\n          2005 : YouTube\n          2006 : Twitter\n          2007 : Tumblr\n          2008 : Instagram\n          2010 : Pinterest\n```\n\n```mermaid\n---\nconfig:\n  logLevel: 'debug'\n  theme: 'forest'\n---\n    timeline\n        title History of Social Media Platform\n          2002 : LinkedIn\n          2004 : Facebook : Google\n          2005 : YouTube\n          2006 : Twitter\n          2007 : Tumblr\n          2008 : Instagram\n          2010 : Pinterest\n```\n\n### Dark Theme\n\n```mermaid-example\n---\nconfig:\n  logLevel: 'debug'\n  theme: 'dark'\n---\n    timeline\n        title History of Social Media Platform\n          2002 : LinkedIn\n          2004 : Facebook : Google\n          2005 : YouTube\n          2006 : Twitter\n          2007 : Tumblr\n          2008 : Instagram\n          2010 : Pinterest\n```\n\n```mermaid\n---\nconfig:\n  logLevel: 'debug'\n  theme: 'dark'\n---\n    timeline\n        title History of Social Media Platform\n          2002 : LinkedIn\n          2004 : Facebook : Google\n          2005 : YouTube\n          2006 : Twitter\n          2007 : Tumblr\n          2008 : Instagram\n          2010 : Pinterest\n```\n\n### Default Theme\n\n```mermaid-example\n---\nconfig:\n  logLevel: 'debug'\n  theme: 'default'\n---\n    timeline\n        title History of Social Media Platform\n          2002 : LinkedIn\n          2004 : Facebook : Google\n          2005 : YouTube\n          2006 : Twitter\n          2007 : Tumblr\n          2008 : Instagram\n          2010 : Pinterest\n```\n\n```mermaid\n---\nconfig:\n  logLevel: 'debug'\n  theme: 'default'\n---\n    timeline\n        title History of Social Media Platform\n          2002 : LinkedIn\n          2004 : Facebook : Google\n          2005 : YouTube\n          2006 : Twitter\n          2007 : Tumblr\n          2008 : Instagram\n          2010 : Pinterest\n```\n\n### Neutral Theme\n\n```mermaid-example\n---\nconfig:\n  logLevel: 'debug'\n  theme: 'neutral'\n---\n    timeline\n        title History of Social Media Platform\n          2002 : LinkedIn\n          2004 : Facebook : Google\n          2005 : YouTube\n          2006 : Twitter\n          2007 : Tumblr\n          2008 : Instagram\n          2010 : Pinterest\n```\n\n```mermaid\n---\nconfig:\n  logLevel: 'debug'\n  theme: 'neutral'\n---\n    timeline\n        title History of Social Media Platform\n          2002 : LinkedIn\n          2004 : Facebook : Google\n          2005 : YouTube\n          2006 : Twitter\n          2007 : Tumblr\n          2008 : Instagram\n          2010 : Pinterest\n```\n\n## Integrating with your library/website\n\nTimeline uses experimental lazy loading & async rendering features which could change in the future.The lazy loading is important in order to be able to add additional diagrams going forward.\n\nYou can use this method to add mermaid including the timeline diagram to a web page:\n\n```html\n<script type=\"module\">\n  import mermaid from 'https://cdn.jsdelivr.net/npm/mermaid@11/dist/mermaid.esm.min.mjs';\n<\/script>\n```\n\nYou can also refer the [implementation in the live editor](https://github.com/mermaid-js/mermaid-live-editor/blob/develop/src/lib/util/mermaid.ts) to see how the async loading is done.\n";
+const __vite_glob_0_40 = '> **Warning**\n>\n> ## THIS IS AN AUTOGENERATED FILE. DO NOT EDIT.\n>\n> ## Please edit the corresponding file in [/packages/mermaid/src/docs/syntax/treeView.md](../../packages/mermaid/src/docs/syntax/treeView.md).\n\n# TreeView Diagram (v11.14.0+)\n\n## Introduction\n\nA TreeView diagram is used to represent hierarchical data in the form of a directory-like structure, with file-type icons, connector lines, and optional annotations.\n\n## Syntax\n\nThe structure of the tree depends only on indentation. Labels can be **bare** (unquoted) or **quoted** (for names containing spaces).\n\n- Directories are indicated by a trailing `/` on the label — they get a folder icon and bold text.\n- Files are auto-detected by extension and assigned a matching icon.\n- Quoted labels (`"my file"`) support spaces in names.\n\n```\ntreeView-beta\n    my-project/\n        src/\n            index.js\n        package.json\n        README.md\n```\n\nQuoted labels (backward compatible):\n\n```\ntreeView-beta\n    "my project"\n        "folder with spaces"\n            "file.js"\n```\n\n## Box-Drawing Input\n\nAs an alternative to indentation, you can use box-drawing characters to define the tree structure. The parser auto-detects the format — no extra keyword or config is needed. This is how most file tree diagrams are drawn already, so you can turn those into Mermaid diagrams with very little effort.\n\nBoth standard (`├──`, `└──`, `│`) and heavy (`┣━━`, `┗━━`, `┃`) Unicode variants are supported.\n\n```mermaid-example\ntreeView-beta\n├── src/\n│   ├── index.ts\n│   └── utils.ts\n├── package.json\n└── README.md\n```\n\n```mermaid\ntreeView-beta\n├── src/\n│   ├── index.ts\n│   └── utils.ts\n├── package.json\n└── README.md\n```\n\nAll annotations work the same way — just append them after the label:\n\n```mermaid-example\ntreeView-beta\n├── src/\n│   ├── App.tsx :::highlight icon(react) ## main component\n│   └── index.ts ## entry point\n├── .env ## environment variables\n├── Dockerfile\n└── package.json\n```\n\n```mermaid\ntreeView-beta\n├── src/\n│   ├── App.tsx :::highlight icon(react) ## main component\n│   └── index.ts ## entry point\n├── .env ## environment variables\n├── Dockerfile\n└── package.json\n```\n\nDepth is inferred from the column position of the branch character, so deeper nesting works naturally:\n\n```mermaid-example\ntreeView-beta\n├── packages/\n│   ├── mermaid/\n│   │   ├── src/\n│   │   │   ├── parser.ts\n│   │   │   └── renderer.ts\n│   │   └── package.json\n│   └── parser/\n│       └── src/\n└── README.md\n```\n\n```mermaid\ntreeView-beta\n├── packages/\n│   ├── mermaid/\n│   │   ├── src/\n│   │   │   ├── parser.ts\n│   │   │   └── renderer.ts\n│   │   └── package.json\n│   └── parser/\n│       └── src/\n└── README.md\n```\n\n> **Note:** If a parse error occurs, line numbers in the error message refer to your original input. Tab characters are automatically expanded to spaces.\n\n## Annotations\n\n### Highlighting with :::class\n\nAnnotate a node with `:::className` to apply a CSS class. A built-in `highlight` class is provided:\n\n```mermaid-example\ntreeView-beta\n    src/\n        App.tsx :::highlight\n        index.js\n    package.json\n```\n\n```mermaid\ntreeView-beta\n    src/\n        App.tsx :::highlight\n        index.js\n    package.json\n```\n\n### Inline descriptions with `##`\n\nAdd a visible description after `##` — rendered next to the label in italic:\n\n```mermaid-example\ntreeView-beta\n    src/\n        index.js ## app entry point\n        config.ts ## runtime configuration\n    package.json ## project manifest\n```\n\n```mermaid\ntreeView-beta\n    src/\n        index.js ## app entry point\n        config.ts ## runtime configuration\n    package.json ## project manifest\n```\n\n### Icon overrides with icon()\n\nOverride the auto-detected icon with `icon(name)`:\n\n```mermaid-example\ntreeView-beta\n    data/\n        model.bin icon(database)\n        weights.h5 icon(database)\n    src/\n        index.js\n```\n\n```mermaid\ntreeView-beta\n    data/\n        model.bin icon(database)\n        weights.h5 icon(database)\n    src/\n        index.js\n```\n\n### Combined annotations\n\nAnnotations can be combined in any order:\n\n```mermaid-example\ntreeView-beta\n    my-project/\n        src/\n            App.tsx :::highlight icon(react) ## main component\n            index.js ## entry point\n        .env ## environment variables\n        Dockerfile\n        package.json\n```\n\n```mermaid\ntreeView-beta\n    my-project/\n        src/\n            App.tsx :::highlight icon(react) ## main component\n            index.js ## entry point\n        .env ## environment variables\n        Dockerfile\n        package.json\n```\n\n## Comments\n\nUse `%%` for invisible comments (standard Mermaid convention):\n\n```\ntreeView-beta\n    %% Generated files — do not edit\n    src/\n        generated/\n        index.js\n```\n\n## Examples\n\nBasic with quoted labels:\n\n```mermaid-example\ntreeView-beta\n    "packages"\n        "mermaid"\n            "src"\n        "parser"\n```\n\n```mermaid\ntreeView-beta\n    "packages"\n        "mermaid"\n            "src"\n        "parser"\n```\n\nWith custom config:\n\n```mermaid-example\n---\nconfig:\n    treeView:\n        rowIndent: 80\n        lineThickness: 3\n    themeVariables:\n        treeView:\n            labelFontSize: \'20px\'\n            labelColor: \'#FF0000\'\n            lineColor: \'#00FF00\'\n---\ntreeView-beta\n    "packages"\n        "mermaid"\n            "src"\n        "parser"\n```\n\n```mermaid\n---\nconfig:\n    treeView:\n        rowIndent: 80\n        lineThickness: 3\n    themeVariables:\n        treeView:\n            labelFontSize: \'20px\'\n            labelColor: \'#FF0000\'\n            lineColor: \'#00FF00\'\n---\ntreeView-beta\n    "packages"\n        "mermaid"\n            "src"\n        "parser"\n```\n\n## Config Variables\n\n| Property      | Description                       | Default Value |\n| ------------- | --------------------------------- | ------------- |\n| rowIndent     | Indentation for each row          | 10            |\n| paddingX      | Horizontal padding of row         | 5             |\n| paddingY      | Vertical padding of row           | 5             |\n| lineThickness | Thickness of the line             | 1             |\n| showIcons     | Whether to show file/folder icons | true          |\n\n### Theme Variables\n\n| Property         | Description                    | Default Value        |\n| ---------------- | ------------------------------ | -------------------- |\n| labelFontSize    | Font size of the label         | \'16px\'               |\n| labelColor       | Color of the label             | \'black\'              |\n| lineColor        | Color of the line              | \'black\'              |\n| iconColor        | Color of file-type icons       | \'#546e7a\'            |\n| descriptionColor | Color of `##` description text | \'#6a9955\'            |\n| highlightBg      | Highlight background fill      | rgba(255,193,7,0.15) |\n| highlightStroke  | Highlight border stroke        | #ffc107              |\n\n## Supported Icons\n\nIcons are auto-detected from file extensions and known filenames:\n\n| Extension / Filename  | Icon       |\n| --------------------- | ---------- |\n| `.js`, `.mjs`, `.cjs` | javascript |\n| `.ts`                 | typescript |\n| `.jsx`, `.tsx`        | react      |\n| `.py`                 | python     |\n| `.json`               | json       |\n| `.md`, `.mdx`         | markdown   |\n| `.html`, `.htm`       | html       |\n| `.css`, `.scss`       | css        |\n| `.yaml`, `.yml`       | yaml       |\n| `.sh`, `.bash`        | terminal   |\n| `.sql`, `.db`         | database   |\n| `.lock`               | lock       |\n| `.gitignore`          | git        |\n| `Dockerfile`          | docker     |\n| `Makefile`            | terminal   |\n| Directories (`/`)     | folder     |\n| Unknown extension     | file       |\n';
+const __vite_glob_0_41 = '> **Warning**\n>\n> ## THIS IS AN AUTOGENERATED FILE. DO NOT EDIT.\n>\n> ## Please edit the corresponding file in [/packages/mermaid/src/docs/syntax/treemap.md](../../packages/mermaid/src/docs/syntax/treemap.md).\n\n# Treemap Diagram\n\n> A treemap diagram displays hierarchical data as a set of nested rectangles. Each branch of the tree is represented by a rectangle, which is then tiled with smaller rectangles representing sub-branches.\n\n> **Warning**\n> This is a new diagram type in Mermaid. Its syntax may evolve in future versions.\n\n## Introduction\n\nTreemap diagrams are an effective way to visualize hierarchical data and show proportions between categories and subcategories. The size of each rectangle is proportional to the value it represents, making it easy to compare different parts of a hierarchy.\n\nTreemap diagrams are particularly useful for:\n\n- Visualizing hierarchical data structures\n- Comparing proportions between categories\n- Displaying large amounts of hierarchical data in a limited space\n- Identifying patterns and outliers in hierarchical data\n\n## Syntax\n\n```\ntreemap-beta\n"Section 1"\n    "Leaf 1.1": 12\n    "Section 1.2"\n      "Leaf 1.2.1": 12\n"Section 2"\n    "Leaf 2.1": 20\n    "Leaf 2.2": 25\n```\n\n### Node Definition\n\nNodes in a treemap are defined using the following syntax:\n\n- **Section/Parent nodes**: Defined with quoted text `"Section Name"`\n- **Leaf nodes with values**: Defined with quoted text followed by a colon and value `"Leaf Name": value`\n- **Hierarchy**: Created using indentation (spaces or tabs)\n- **Styling**: Nodes can be styled using the `:::class` syntax\n\n## Examples\n\n### Basic Treemap\n\n```mermaid-example\ntreemap-beta\n"Category A"\n    "Item A1": 10\n    "Item A2": 20\n"Category B"\n    "Item B1": 15\n    "Item B2": 25\n```\n\n```mermaid\ntreemap-beta\n"Category A"\n    "Item A1": 10\n    "Item A2": 20\n"Category B"\n    "Item B1": 15\n    "Item B2": 25\n```\n\n### Hierarchical Treemap\n\n```mermaid-example\ntreemap-beta\n"Products"\n    "Electronics"\n        "Phones": 50\n        "Computers": 30\n        "Accessories": 20\n    "Clothing"\n        "Men\'s": 40\n        "Women\'s": 40\n```\n\n```mermaid\ntreemap-beta\n"Products"\n    "Electronics"\n        "Phones": 50\n        "Computers": 30\n        "Accessories": 20\n    "Clothing"\n        "Men\'s": 40\n        "Women\'s": 40\n```\n\n### Treemap with Styling\n\n```mermaid-example\ntreemap-beta\n"Section 1"\n    "Leaf 1.1": 12\n    "Section 1.2":::class1\n      "Leaf 1.2.1": 12\n"Section 2"\n    "Leaf 2.1": 20:::class1\n    "Leaf 2.2": 25\n    "Leaf 2.3": 12\n\nclassDef class1 fill:red,color:blue,stroke:#FFD600;\n```\n\n```mermaid\ntreemap-beta\n"Section 1"\n    "Leaf 1.1": 12\n    "Section 1.2":::class1\n      "Leaf 1.2.1": 12\n"Section 2"\n    "Leaf 2.1": 20:::class1\n    "Leaf 2.2": 25\n    "Leaf 2.3": 12\n\nclassDef class1 fill:red,color:blue,stroke:#FFD600;\n```\n\n## Styling and Configuration\n\nTreemap diagrams can be customized using Mermaid\'s styling and configuration options.\n\n### Using classDef for Styling\n\nYou can define custom styles for nodes using the `classDef` syntax, which is a standard feature across many Mermaid diagram types:\n\n```mermaid-example\ntreemap-beta\n"Main"\n    "A": 20\n    "B":::important\n        "B1": 10\n        "B2": 15\n    "C": 5\n\nclassDef important fill:#f96,stroke:#333,stroke-width:2px;\n```\n\n```mermaid\ntreemap-beta\n"Main"\n    "A": 20\n    "B":::important\n        "B1": 10\n        "B2": 15\n    "C": 5\n\nclassDef important fill:#f96,stroke:#333,stroke-width:2px;\n```\n\n### Theme Configuration\n\nYou can customize the colors of your treemap using the theme configuration:\n\n```mermaid-example\n---\nconfig:\n    theme: \'forest\'\n---\ntreemap-beta\n"Category A"\n    "Item A1": 10\n    "Item A2": 20\n"Category B"\n    "Item B1": 15\n    "Item B2": 25\n```\n\n```mermaid\n---\nconfig:\n    theme: \'forest\'\n---\ntreemap-beta\n"Category A"\n    "Item A1": 10\n    "Item A2": 20\n"Category B"\n    "Item B1": 15\n    "Item B2": 25\n```\n\n### Diagram Padding\n\nYou can adjust the padding around the treemap diagram using the `diagramPadding` configuration option:\n\n```mermaid-example\n---\nconfig:\n  treemap:\n    diagramPadding: 200\n---\ntreemap-beta\n"Category A"\n    "Item A1": 10\n    "Item A2": 20\n"Category B"\n    "Item B1": 15\n    "Item B2": 25\n```\n\n```mermaid\n---\nconfig:\n  treemap:\n    diagramPadding: 200\n---\ntreemap-beta\n"Category A"\n    "Item A1": 10\n    "Item A2": 20\n"Category B"\n    "Item B1": 15\n    "Item B2": 25\n```\n\n## Configuration Options\n\nThe treemap diagram supports the following configuration options:\n\n| Option         | Description                                                                 | Default |\n| -------------- | --------------------------------------------------------------------------- | ------- |\n| useMaxWidth    | When true, the diagram width is set to 100% and scales with available space | true    |\n| padding        | Internal padding between nodes                                              | 10      |\n| diagramPadding | Padding around the entire diagram                                           | 8       |\n| showValues     | Whether to show values in the treemap                                       | true    |\n| nodeWidth      | Width of nodes                                                              | 100     |\n| nodeHeight     | Height of nodes                                                             | 40      |\n| borderWidth    | Width of borders                                                            | 1       |\n| valueFontSize  | Font size for values                                                        | 12      |\n| labelFontSize  | Font size for labels                                                        | 14      |\n| valueFormat    | Format for values (see Value Formatting section)                            | \',\'     |\n\n## Advanced Features\n\n### Value Formatting\n\nValues in treemap diagrams can be formatted to display in different ways using the `valueFormat` configuration option. This option primarily uses [D3\'s format specifiers](https://github.com/d3/d3-format#locale_format) to control how numbers are displayed, with some additional special cases for common formats.\n\nSome common format patterns:\n\n- `,` - Thousands separator (default)\n- `$` - Add dollar sign\n- `.1f` - Show one decimal place\n- `.1%` - Show as percentage with one decimal place\n- `$0,0` - Dollar sign with thousands separator\n- `$.2f` - Dollar sign with 2 decimal places\n- `$,.2f` - Dollar sign with thousands separator and 2 decimal places\n\nThe treemap diagram supports both standard D3 format specifiers and some common currency formats that combine the dollar sign with other formatting options.\n\nExample with currency formatting:\n\n```mermaid-example\n---\nconfig:\n  treemap:\n    valueFormat: \'$0,0\'\n---\ntreemap-beta\n"Budget"\n    "Operations"\n        "Salaries": 700000\n        "Equipment": 200000\n        "Supplies": 100000\n    "Marketing"\n        "Advertising": 400000\n        "Events": 100000\n```\n\n```mermaid\n---\nconfig:\n  treemap:\n    valueFormat: \'$0,0\'\n---\ntreemap-beta\n"Budget"\n    "Operations"\n        "Salaries": 700000\n        "Equipment": 200000\n        "Supplies": 100000\n    "Marketing"\n        "Advertising": 400000\n        "Events": 100000\n```\n\nExample with percentage formatting:\n\n```mermaid-example\n---\nconfig:\n  treemap:\n    valueFormat: \'$.1%\'\n---\ntreemap-beta\n"Market Share"\n    "Company A": 0.35\n    "Company B": 0.25\n    "Company C": 0.15\n    "Others": 0.25\n```\n\n```mermaid\n---\nconfig:\n  treemap:\n    valueFormat: \'$.1%\'\n---\ntreemap-beta\n"Market Share"\n    "Company A": 0.35\n    "Company B": 0.25\n    "Company C": 0.15\n    "Others": 0.25\n```\n\n## Common Use Cases\n\nTreemap diagrams are commonly used for:\n\n1. **Financial Data**: Visualizing budget allocations, market shares, or portfolio compositions\n2. **File System Analysis**: Showing disk space usage by folders and files\n3. **Population Demographics**: Displaying population distribution across regions and subregions\n4. **Product Hierarchies**: Visualizing product categories and their sales volumes\n5. **Organizational Structures**: Representing departments and team sizes in a company\n\n## Limitations\n\n- Treemap diagrams work best when the data has a natural hierarchy\n- Very small values may be difficult to see or label in a treemap diagram\n- Deep hierarchies (many levels) can be challenging to represent clearly\n- Treemap diagrams are not well suited for representing data with negative values\n\n## Related Diagrams\n\nIf treemap diagrams don\'t suit your needs, consider these alternatives:\n\n- [**Pie Charts**](./pie.md): For simple proportion comparisons without hierarchy\n- **Sunburst Diagrams**: For hierarchical data with a radial layout (yet to be released in Mermaid).\n- [**Sankey Diagrams**](./sankey.md): For flow-based hierarchical data\n\n## Notes\n\nThe treemap diagram implementation in Mermaid is designed to be simple to use while providing powerful visualization capabilities. As this is a newer diagram type, feedback and feature requests are welcome through the Mermaid GitHub repository.\n';
+const __vite_glob_0_42 = '> **Warning**\n>\n> ## THIS IS AN AUTOGENERATED FILE. DO NOT EDIT.\n>\n> ## Please edit the corresponding file in [/packages/mermaid/src/docs/syntax/xyChart.md](../../packages/mermaid/src/docs/syntax/xyChart.md).\n\n# XY Chart\n\n> In the context of mermaid-js, the XY chart is a comprehensive charting module that encompasses various types of charts that utilize both x-axis and y-axis for data representation. Presently, it includes two fundamental chart types: the bar chart and the line chart. These charts are designed to visually display and analyze data that involve two numerical variables.\n\n> It\'s important to note that while the current implementation of mermaid-js includes these two chart types, the framework is designed to be dynamic and adaptable. Therefore, it has the capacity for expansion and the inclusion of additional chart types in the future. This means that users can expect an evolving suite of charting options within the XY chart module, catering to various data visualization needs as new chart types are introduced over time.\n\n## Example\n\n```mermaid-example\nxychart\n    title "Sales Revenue"\n    x-axis [jan, feb, mar, apr, may, jun, jul, aug, sep, oct, nov, dec]\n    y-axis "Revenue (in $)" 4000 --> 11000\n    bar [5000, 6000, 7500, 8200, 9500, 10500, 11000, 10200, 9200, 8500, 7000, 6000]\n    line [5000, 6000, 7500, 8200, 9500, 10500, 11000, 10200, 9200, 8500, 7000, 6000]\n```\n\n```mermaid\nxychart\n    title "Sales Revenue"\n    x-axis [jan, feb, mar, apr, may, jun, jul, aug, sep, oct, nov, dec]\n    y-axis "Revenue (in $)" 4000 --> 11000\n    bar [5000, 6000, 7500, 8200, 9500, 10500, 11000, 10200, 9200, 8500, 7000, 6000]\n    line [5000, 6000, 7500, 8200, 9500, 10500, 11000, 10200, 9200, 8500, 7000, 6000]\n```\n\n## Syntax\n\n> **Note**\n> All text values that contain only one word can be written without `"`. If a text value has many words in it, specifically if it contains spaces, enclose the value in `"`\n\n### Orientations\n\nThe chart can be drawn horizontal or vertical, default value is vertical.\n\n```\nxychart horizontal\n...\n```\n\n### Title\n\nThe title is a short description of the chart and it will always render on top of the chart.\n\n#### Example\n\n```\nxychart\n    title "This is a simple example"\n    ...\n```\n\n> **Note**\n> If the title is a single word one no need to use `"`, but if it has space `"` is needed\n\n### x-axis\n\nThe x-axis primarily serves as a categorical value, although it can also function as a numeric range value when needed.\n\n#### Example\n\n1. `x-axis title min --> max` x-axis will function as numeric with the given range\n2. `x-axis "title with space" [cat1, "cat2 with space", cat3]` x-axis if categorical, categories are text type\n\n### y-axis\n\nThe y-axis is employed to represent numerical range values, it cannot have categorical values.\n\n#### Example\n\n1. `y-axis title min --> max`\n2. `y-axis title` it will only add the title, the range will be auto generated from data.\n\n> **Note**\n> Both x and y axis are optional if not provided we will try to create the range\n\n### Line chart\n\nA line chart offers the capability to graphically depict lines.\n\n#### Example\n\n1. `line [2.3, 45, .98, -3.4]` it can have all valid numeric values.\n2. `line "series name" [2.3, 45, .98, -3.4]` adds the line to the legend.\n\n### Bar chart\n\nA bar chart offers the capability to graphically depict bars.\n\n#### Example\n\n1. `bar [2.3, 45, .98, -3.4]` it can have all valid numeric values.\n2. `bar "series name" [2.3, 45, .98, -3.4]` adds the bar to the legend.\n\n### Legend (v\\<MERMAID_RELEASE_VERSION>+)\n\nNamed line and bar plots are automatically shown in a legend. Unnamed plots are omitted from the legend.\n\n```mermaid-example\nxychart-beta\n  title "An Example Chart"\n  x-axis ["90d", "60d", "30d", "7d", "1d", "Current"]\n  y-axis "Seconds" 0 --> 198.2\n  line "avg" [48.1, 41.5, 45.7, 72.8, 67.7, 59.9]\n  line "p50" [38.2, 36.8, 39.7, 54.5, 49.0, 38.4]\n  line "p95" [112.2, 75.3, 103.0, 177.0, 180.2, 109.4]\n```\n\n```mermaid\nxychart-beta\n  title "An Example Chart"\n  x-axis ["90d", "60d", "30d", "7d", "1d", "Current"]\n  y-axis "Seconds" 0 --> 198.2\n  line "avg" [48.1, 41.5, 45.7, 72.8, 67.7, 59.9]\n  line "p50" [38.2, 36.8, 39.7, 54.5, 49.0, 38.4]\n  line "p95" [112.2, 75.3, 103.0, 177.0, 180.2, 109.4]\n```\n\n#### Simplest example\n\nThe only two things required are the chart name (`xychart`) and one data set. So you will be able to draw a chart with a simple config like\n\n```\nxychart\n    line [+1.3, .6, 2.4, -.34]\n```\n\n## Chart Configurations\n\n| Parameter                | Description                                                   | Default value |\n| ------------------------ | ------------------------------------------------------------- | :-----------: |\n| width                    | Width of the chart                                            |      700      |\n| height                   | Height of the chart                                           |      500      |\n| titlePadding             | Top and Bottom padding of the title                           |      10       |\n| titleFontSize            | Title font size                                               |      20       |\n| showTitle                | Title to be shown or not                                      |     true      |\n| showLegend               | Legend to be shown for named plots or not                     |     true      |\n| legendFontSize           | Legend font size                                              |      14       |\n| legendPadding            | Padding around the legend                                     |      10       |\n| xAxis                    | xAxis configuration                                           |  AxisConfig   |\n| yAxis                    | yAxis configuration                                           |  AxisConfig   |\n| chartOrientation         | \'vertical\' or \'horizontal\'                                    |  \'vertical\'   |\n| plotReservedSpacePercent | Minimum space plots will take inside the chart                |      50       |\n| showDataLabel            | Should show the value corresponding to the bar within the bar |     false     |\n| showDataLabelOutsideBar  | If showing data label then show it outside the bar.           |     false     |\n\n### AxisConfig\n\n| Parameter     | Description                                                  | Default value |\n| ------------- | ------------------------------------------------------------ | :-----------: |\n| showLabel     | Show axis labels or tick values                              |     true      |\n| labelFontSize | Font size of the label to be drawn                           |      14       |\n| labelPadding  | Top and Bottom padding of the label                          |       5       |\n| showTitle     | Axis title to be shown or not                                |     true      |\n| titleFontSize | Axis title font size                                         |      16       |\n| titlePadding  | Top and Bottom padding of Axis title                         |       5       |\n| showTick      | Tick to be shown or not                                      |     true      |\n| tickLength    | How long the tick will be                                    |       5       |\n| tickWidth     | How width the tick will be                                   |       2       |\n| showAxisLine  | Axis line to be shown or not                                 |     true      |\n| axisLineWidth | Thickness of the axis line                                   |       2       |\n| labelRotation | Label rotation in degrees (only applicable on bottom X axis) |       0       |\n\n## Chart Theme Variables\n\nThemes for xychart reside inside the `xychart` attribute, allowing customization through the following syntax:\n\n```yaml\n---\nconfig:\n  themeVariables:\n    xyChart:\n      titleColor: \'#ff0000\'\n---\n```\n\n| Parameter        | Description                                               |\n| ---------------- | --------------------------------------------------------- |\n| backgroundColor  | Background color of the whole chart                       |\n| titleColor       | Color of the Title text                                   |\n| dataLabelColor   | Color of the Data labels (if shown)                       |\n| legendTextColor  | Color of the legend text                                  |\n| xAxisLabelColor  | Color of the x-axis labels                                |\n| xAxisTitleColor  | Color of the x-axis title                                 |\n| xAxisTickColor   | Color of the x-axis tick                                  |\n| xAxisLineColor   | Color of the x-axis line                                  |\n| yAxisLabelColor  | Color of the y-axis labels                                |\n| yAxisTitleColor  | Color of the y-axis title                                 |\n| yAxisTickColor   | Color of the y-axis tick                                  |\n| yAxisLineColor   | Color of the y-axis line                                  |\n| plotColorPalette | String of colors separated by comma e.g. "#f3456, #43445" |\n\n### Setting Colors for Lines and Bars\n\nTo set the color for lines and bars, use the `plotColorPalette` parameter. Colors in the palette will correspond sequentially to the elements in your chart (e.g., first bar/line will use the first color specified in the palette).\n\n```mermaid-example\n---\nconfig:\n  themeVariables:\n    xyChart:\n      plotColorPalette: \'#000000, #0000FF, #00FF00, #FF0000\'\n---\nxychart\ntitle "Different Colors in xyChart"\nx-axis "categoriesX" ["Category 1", "Category 2", "Category 3", "Category 4"]\ny-axis "valuesY" 0 --> 50\n%% Black line\nline [10,20,30,40]\n%% Blue bar\nbar [20,30,25,35]\n%% Green bar\nbar [15,25,20,30]\n%% Red line\nline [5,15,25,35]\n```\n\n```mermaid\n---\nconfig:\n  themeVariables:\n    xyChart:\n      plotColorPalette: \'#000000, #0000FF, #00FF00, #FF0000\'\n---\nxychart\ntitle "Different Colors in xyChart"\nx-axis "categoriesX" ["Category 1", "Category 2", "Category 3", "Category 4"]\ny-axis "valuesY" 0 --> 50\n%% Black line\nline [10,20,30,40]\n%% Blue bar\nbar [20,30,25,35]\n%% Green bar\nbar [15,25,20,30]\n%% Red line\nline [5,15,25,35]\n```\n\n## Displaying individual values on a bar chart (v11.14.0+)\n\nTo show the value corresponding to a bar specify `showDataLabel: true`.\n\n```mermaid-example\n---\nconfig:\n    xyChart:\n        showDataLabel: true\n---\nxychart\n    title "Genres in top 100 book survey of 2025"\n    x-axis [comedy, romance, mystery, crime, "non fiction", other]\n    y-axis "Number of Books" 0 --> 30\n    bar [12,2,20,25,17,24]\n```\n\n```mermaid\n---\nconfig:\n    xyChart:\n        showDataLabel: true\n---\nxychart\n    title "Genres in top 100 book survey of 2025"\n    x-axis [comedy, romance, mystery, crime, "non fiction", other]\n    y-axis "Number of Books" 0 --> 30\n    bar [12,2,20,25,17,24]\n```\n\nLabels are shown within the bar by default. To show the labels outside the bar, specify `showDataLabelOutsideBar: true`.\n\n```mermaid-example\n---\nconfig:\n    xyChart:\n        showDataLabel: true\n        showDataLabelOutsideBar: true\n---\nxychart\n    title "Genres in top 100 book survey of 2025"\n    x-axis [comedy, romance, mystery, crime, "non fiction", other]\n    y-axis "Number of Books" 0 --> 30\n    bar [12,2,20,25,17,24]\n```\n\n```mermaid\n---\nconfig:\n    xyChart:\n        showDataLabel: true\n        showDataLabelOutsideBar: true\n---\nxychart\n    title "Genres in top 100 book survey of 2025"\n    x-axis [comedy, romance, mystery, crime, "non fiction", other]\n    y-axis "Number of Books" 0 --> 30\n    bar [12,2,20,25,17,24]\n```\n\n## Per-point text labels for line charts (v\\<MERMAID_RELEASE_VERSION>+)\n\nEach data point in a `line` can optionally include a quoted string label after the numeric value. Labels render above points in vertical orientation, or to the right in horizontal orientation, using the line\'s stroke color.\n\n```mermaid-example\nxychart\n    title "Smallest AI models scoring above 60% on MMLU"\n    x-axis "Date" ["Apr 2022", "Feb 2023", "Jul 2023", "Sep 2023", "Apr 2024"]\n    y-axis "Parameters (B)" 0 --> 600\n    line [540 "PaLM", 65 "LLaMA-65B", 34 "Llama 2 34B", 7 "Mistral 7B", 3.8 "Phi-3-mini"]\n```\n\n```mermaid\nxychart\n    title "Smallest AI models scoring above 60% on MMLU"\n    x-axis "Date" ["Apr 2022", "Feb 2023", "Jul 2023", "Sep 2023", "Apr 2024"]\n    y-axis "Parameters (B)" 0 --> 600\n    line [540 "PaLM", 65 "LLaMA-65B", 34 "Llama 2 34B", 7 "Mistral 7B", 3.8 "Phi-3-mini"]\n```\n\nLabels are optional per point — you can mix labeled and unlabeled values:\n\n```mermaid-example\nxychart\n    title "Quarterly Performance"\n    x-axis [Q1, Q2, Q3, Q4]\n    y-axis "Revenue ($M)" 0 --> 100\n    line [25 "Launch", 45, 72, 90 "Target Hit"]\n```\n\n```mermaid\nxychart\n    title "Quarterly Performance"\n    x-axis [Q1, Q2, Q3, Q4]\n    y-axis "Revenue ($M)" 0 --> 100\n    line [25 "Launch", 45, 72, 90 "Target Hit"]\n```\n\nExisting syntax without labels continues to work unchanged.\n\n> **Note**\n> Point labels use a fixed font size of 12px. In vertical charts, labels appear above each point. In horizontal charts, labels appear to the right. Labels are currently supported on `line` plots only; the syntax is accepted on `bar` plots but labels are ignored.\n\n## Example on config and theme\n\n```mermaid-example\n---\nconfig:\n    xyChart:\n        width: 900\n        height: 600\n        showDataLabel: true\n    themeVariables:\n        xyChart:\n            titleColor: "#ff0000"\n---\nxychart\n    title "Sales Revenue"\n    x-axis [jan, feb, mar, apr, may, jun, jul, aug, sep, oct, nov, dec]\n    y-axis "Revenue (in $)" 4000 --> 11000\n    bar [5000, 6000, 7500, 8200, 9500, 10500, 11000, 10200, 9200, 8500, 7000, 6000]\n    line [5000, 6000, 7500, 8200, 9500, 10500, 11000, 10200, 9200, 8500, 7000, 6000]\n```\n\n```mermaid\n---\nconfig:\n    xyChart:\n        width: 900\n        height: 600\n        showDataLabel: true\n    themeVariables:\n        xyChart:\n            titleColor: "#ff0000"\n---\nxychart\n    title "Sales Revenue"\n    x-axis [jan, feb, mar, apr, may, jun, jul, aug, sep, oct, nov, dec]\n    y-axis "Revenue (in $)" 4000 --> 11000\n    bar [5000, 6000, 7500, 8200, 9500, 10500, 11000, 10200, 9200, 8500, 7000, 6000]\n    line [5000, 6000, 7500, 8200, 9500, 10500, 11000, 10200, 9200, 8500, 7000, 6000]\n```\n';
+const __vite_glob_0_43 = '# 阶段流程（plan / tasks / execute / done / new-spec）\n\n## plan\n\n理解文档，分析现有代码，编写技术实现方案，更新到当前文档中；需要用户介入的事项以三级标题写入 `## 待确认项`，待用户后续审阅批注；暂时只需更新文档，不要实施代码。\n\n**目标：** 输出 `## 现状分析`、`## 技术实现方案`、`## 待确认项` 三节；禁止输出任务清单格式 `- [ ]`。\n\n若 `## 追加任务` 存在 `- [open] [feat|refct|fix] ...` 条目，必须将其纳入分析范围；plan 阶段不修改 `[open]` 状态标记。\n\n### 待确认项的三种类型\n\n一个待确认项，要么让用户**抉择**，要么让用户**确认**，要么请用户**自由补充**：\n\n| 类型     | 标记                | 语义                                                                                    | 何时用                |\n| -------- | ------------------- | --------------------------------------------------------------------------------------- | --------------------- |\n| 抉择型   | `[choice]`          | 给用户**选择权**：存在多个都可行、优劣取决于你拿不到的信息（业务优先级/外部约束）的方案 | 多方案差异大、难取舍  |\n| 确认型   | `[confirm]`         | 给用户**否决权**：只有一个可行方案，但它有明显代价（技术债/影响面/不可逆）              | 单方案但影响重大      |\n| 自由文本 | `（自由文本）` 后缀 | 请用户补一段开放说明                                                                    | 需要主观文案/开放意见 |\n\n> 无标记且带有序候选，向后兼容视为 `[choice]`。\n\n### 准入门槛（写入待确认项前必过的自检）\n\n**第一道过滤器先于类型判断**：这个答案，你能否通过读代码、跑测试、查项目约定自己确定？\n\n- **能** → 禁止写成待确认项，自己去查、去定，把决策+理由写进 `## 技术实现方案`（决策说明），不要打断用户。\n- **不能**（决策依赖用户独有信息，或选错的返工不可逆）→ 才写成待确认项，并归入 choice/confirm。\n\n> 待确认项是压力释放阀，不是免责声明。被你砍掉的判断不该凭空消失，要落成 `## 技术实现方案` 里的决策说明（决策 + 理由 + 被否决的备选）。\n\n### 抉择型 [choice] 正确示例\n\n```\n### 5.1 [choice] 候选答案的展现形式应采用哪种？\n1. 嵌套子列表\n2. 表格 (推荐)\n```\n\n- 候选写一级有序列表；恰 1 个候选以 ` (推荐)` / ` （推荐）` 结尾。\n- 空态与格式由 lint 的 `pending-questions/*` 规则保证。\n\n### 确认型 [confirm] 正确示例\n\n```\n### 5.2 [confirm] 将 UserID 从 int 迁移为 uuid\n\n**方案**：一次性迁移，双写过渡 2 周。\n**影响**：🔴 需停机窗口；对外 /api/user 字段类型变更，客户端需同步。\n```\n\n- 只有 `**方案**` 与 `**影响**`（或 `**代价**`）两字段，**不列候选**。\n- 影响行用红/黄语义标注严重度：🔴 breaking（破坏性/不可逆）、🟡 affected（有影响但可控）。\n- 确认型 = "我要这么干了，除非你喊停" 的知会 + 急停按钮：放行是常态，用户否决才是例外。\n\n### 确认型的否决语义（用户在 GUI 上如何回应）\n\n用户对确认型只有两种回应：**确认放行** 或 **否决**。否决必须携带理由，并细分意图（GUI 渲染为嵌套单选）：\n\n| 用户决策                  | 回写 `！！！选择：…`                 | 含义                   |\n| ------------------------- | ------------------------------------ | ---------------------- |\n| 确认，按此推进            | `确认，按此推进`                     | 接受代价，继续         |\n| 否决·换方案               | `否决·换方案`                        | 原目标下另寻实现       |\n| 否决·补约束               | `否决·补约束`                        | 用户补充你漏掉的硬约束 |\n| 否决·弃目标·废弃当前目标  | `否决·弃目标·废弃当前目标，继续其余` | 该目标不做，其余照旧   |\n| 否决·弃目标·放弃整个 spec | `否决·弃目标·放弃整个 spec`          | 整条 spec 作废         |\n\n> 决策不改动 API：编码进批注的 `选择：…`（结构化意图）+ `备注：…`（理由）。tasks 阶段按下表消费。\n\n### 图形化补充（plan 收尾子步骤）\n\n方案文字定稿后、结束 plan 前，**必须**专门回看 `## 现状分析`、`## 技术实现方案` 两节做一次 mermaid 图形化补充（仅此两节，其它章节不动）：\n\n- 加载 [mermaid.md](./mermaid.md)，先服从其**核心原则「图优先、精确信息折叠」**：表层给图（认知层），精确细节（路径、行号、类型/源码全文）折叠进 `<details>` 精确层，图与折叠互补不重复。\n- 按选型表与「必须用图」触发词补图：分步/分支散文→flowchart，接口/类型定义→classDiagram；含「兼容性/影响范围」时出结构图并按红=breaking、黄=affected 语义配色。\n- 这是一道独立聚焦的工序（不新增 stage）：把「想清楚方案 / 写成文字」与「回看补图」分开，避免图形化被跳过。补图完成后再结束 plan。\n\n### 待确认项自检（plan 收尾子步骤）\n\n方案与图形化定稿后、结束 plan 前，**必须**专门回看 `## 待确认项` 做一次自检（与「图形化补充」同构：把"写方案"与"回看校验"分开，避免自检被跳过）：\n\n1. **准入过滤**：逐条问"能否自己查证？"——能则删除该条、把决策落进 `## 技术实现方案`（决策说明）。\n2. **类型归类**：留下的每条明确标 `[choice]` 或 `[confirm]`（或 `（自由文本）`）；单一类型，不兼具。\n3. **确认型补影响**：每个 `[confirm]` 必带 `**方案**` 与 `**影响**`（红/黄语义）；影响写不出来，说明它其实够不上确认型，降级或删除。\n\n自检完成后再结束 plan。\n\n空态整章仅一行斜体占位：\n\n```\n## 5. 待确认项\n\n_暂无_\n```\n\n> 格式由 lint 的 `pending-questions/*` 规则保证；不确定时运行 `yorz lint` 查看报错。\n\n## tasks\n\n根据批注内容（`！！！` 前缀）更新技术方案；审查批注是否正确解答了待确认项；若引入新增/扩展需求或新增 bug，切回 plan；若存在冲突或歧义，回退 plan 并写入待确认项后退出；否则将技术方案拆解为可执行任务，写入文档，然后进入 execute。\n\n### 批注消费规则\n\n- 读取并消费所有 `！！！` 批注，将批注意图合并进 `## 技术实现方案` 与 `## 任务清单`。\n- 处理完成后**删除对应 `！！！` 文本**，然后**整段删除** `## 用户批注` 章节。\n\n### 确认型答复的消费\n\n当批注含 `！！！选择：<决策>；备注：<理由>`（引用行的前缀 `待确认项`/`待确认问题` 皆可），按 `选择：` 分派下游行为，并**无论确认或否决都留痕**——在 `## 技术实现方案` 追加一行决策记录：`> 决策记录：<条目> —— 用户<决策>，理由：<理由>。`（决策记录不随 `## 用户批注` 删除而蒸发）：\n\n| `选择：`                           | 下游行为                                                                                       |\n| ---------------------------------- | ---------------------------------------------------------------------------------------------- |\n| 确认，按此推进                     | 接受代价，落决策记录，继续拆任务                                                               |\n| 否决·换方案                        | 切回 plan：原目标下另寻实现（新方案可能又产生 choice/confirm）                                 |\n| 否决·补约束                        | 切回 plan：把理由当硬约束重算方案                                                              |\n| 否决·弃目标·废弃当前目标，继续其余 | 从 `## 需求` 剔除该目标，落决策记录，继续其余目标                                              |\n| 否决·弃目标·放弃整个 spec          | 落决策记录（作废），将 `stage` 置 `done` 终止，`last_action` 记「用户放弃整个 spec，标记终止」 |\n\n### 任务清单正确示例\n\n```\n## 6. 任务清单\n\n- [ ] 删除 src/foo.ts 中的 deprecatedFunc（验收：grep 无残留引用）\n- [ ] 更新 index.ts 导出（验收：tsc --noEmit 通过）\n```\n\n> 每项任务包含"动作 + 对象 + 验收点"；仅使用单层 `- [ ]`；禁止泛化任务。\n\n### `[manual]` 人工确认任务标记\n\n对「需人工确认、Agent 不能自动完成」的事项，用 `- [ ] [manual] ...` 标注：\n\n```\n- [ ] [manual] 联系运维确认灰度窗口（验收：人工回复确认）\n```\n\n`done` 收尾判定**忽略**未勾选的 `[manual]` 项：只要其余非 manual 任务全部完成，即可收尾为 `done`，无需等待人工项被勾选（详见 execute 的「收尾为 done」）。\n\n### 自动衔接\n\n> 任务量不构成暂停理由：以下衔接规则与任务清单长度、改动半径无关。\n\n若待确认项为 `_暂无_` 且无新冲突，同一轮继续进入 execute，**同一轮衔接 execute 前后不得**向用户追加任何"是否执行/是否继续"询问。\n\n## execute\n\n顺序执行 `## 任务清单` 中未完成项（`- [ ]`）。执行中若发现新增/扩展需求或新增 bug，立即停止，切回 plan。\n\n> **执行过程中不得对用户做整批/中段元确认**：除"新需求/新 bug → 切回 plan"这一合法阻塞外，任务清单内部的任何疑问都必须以 `## 待确认项` 形式写回触发重开，禁止追加"是否继续 / 我是否应该执行下一项"等问句停顿。\n\n### 每完成一项后立刻\n\n- 将该项从 `- [ ]` 改为 `- [x]`。\n- 在 `## 执行记录` 增加一条结果（改动点、验证方式、阻塞项若有）。\n\n### 默认执行验证\n\n若仓库存在可用测试/构建命令，默认执行并记录结果；若当前环境无法执行，记录原因。\n\n### 追加任务 `[open] → [fixed]` 状态机\n\n若本轮起因是 `## 追加任务` 中的 `[open]` 条目：每完成一个追加项，把状态标记从 `[open]` 改为 `[fixed]`（位置和正文保留不变），在 `## 执行记录` 追加一条结果。已 `[fixed]` 的条目保留作为历史，不删除。\n\n### 收尾为 done\n\n当 `## 任务清单` 不存在未完成的**非 `[manual]`** 任务（`- [ ] [manual]` 人工确认项被忽略），且 `## 待确认项` 为 `_暂无_`、无任何 `！！！` 批注、无 `## 追加任务` 的 `[open]` 条目时，在 execute 收尾同一轮：\n\n- 将 `stage` 置为 `done`，`last_action` 记「任务全部完成，标记 done」。\n- 在 `## 执行记录` 追加一条收尾条目。\n\n`done` 是终止态：机器 / GUI 可据 `stage=done` 直接判定完成。此后不再自动推进；收到新增/扩展需求、新 bug，或 `## 追加任务` 出现 `[open]` 时，按「变更重开流程」切回 `plan`。\n\n## new-spec\n\n当 `spec_path` 缺省且无法从 session 上下文恢复时，自动生成路径与初始骨架。\n\n### 步骤\n\n1. **提炼摘要**：从用户输入提炼 kebab-case `summary-name`（≤ 40 字符，不以数字开头，必须语义化）。中文为主难以提炼时使用 `untitled-<NNN>` 占位。\n2. **判定 type**：`feat` / `refct` / `fix`；prompt 中已显式给出时直接使用；不确定时询问用户，兜底取 `feat`。\n3. **生成 id**：`YYMMDD.<type>.<summary-name>`（如 `260614.feat.spec-frontmatter`）。\n4. **生成路径**：`<specsDir>/<id>/spec.md`。id 冲突时追加 `-2`、`-3` 后缀。\n5. **初始化文档**：写入 frontmatter（`stage: plan`、`last_action: 新建 spec`、`updated_at` 本地秒级字符串、`summary` ≤ 200 字符）；建议创建全部章节（背景 / 需求 / 现状分析 / 技术实现方案 / 待确认项 / 任务清单 / 执行记录），将用户原始需求写入背景或需求。\n6. **进入 plan**：初始化后在同一轮继续推进 plan，不要因为"文档已创建"就退出。\n\n### CLI 触发模式\n\nCLI/Service 同时给出 `类型：<type>` 与需求但未提供 `spec_path` 时，必须自动进入新建流程，不询问类型/路径；初始化后同一轮继续推进 plan，直到遇到真正阻塞才退出。\n';
 async function isGitRepo(cwd) {
   try {
     await stat(join(cwd, ".git"));
@@ -145,52 +346,52 @@ async function runGitInit(cwd) {
   });
 }
 const SKILL_DIR_NAME = "yorz-spec";
-const SKILL_DIR_NAMES = ["yorz-spec", "yorz-debug"];
-const AUTO_INSTALL_AGENTS = ["claude", "opencode", "codex"];
+const SKILL_DIR_NAMES = ["yorz-spec", "yorz-debug", "yorz-git-ops"];
 const SKILL_FILES = /* @__PURE__ */ Object.assign({
   "../skill/yorz-debug/SKILL.md": __vite_glob_0_0,
   "../skill/yorz-debug/index.json": __vite_glob_0_1,
-  "../skill/yorz-spec/SKILL.md": __vite_glob_0_2,
-  "../skill/yorz-spec/__tests__/fixtures/append-task-state/input.spec.md": __vite_glob_0_3,
-  "../skill/yorz-spec/__tests__/fixtures/append-task-state/meta.json": __vite_glob_0_4,
-  "../skill/yorz-spec/__tests__/fixtures/execute-checkbox-flip/input.spec.md": __vite_glob_0_5,
-  "../skill/yorz-spec/__tests__/fixtures/execute-checkbox-flip/meta.json": __vite_glob_0_6,
-  "../skill/yorz-spec/__tests__/fixtures/new-spec-skeleton/meta.json": __vite_glob_0_7,
-  "../skill/yorz-spec/__tests__/fixtures/plan-candidates/input.spec.md": __vite_glob_0_8,
-  "../skill/yorz-spec/__tests__/fixtures/plan-candidates/meta.json": __vite_glob_0_9,
-  "../skill/yorz-spec/__tests__/fixtures/reopen-on-new-requirement/input.spec.md": __vite_glob_0_10,
-  "../skill/yorz-spec/__tests__/fixtures/reopen-on-new-requirement/meta.json": __vite_glob_0_11,
-  "../skill/yorz-spec/__tests__/fixtures/tasks-consume-annotations/input.spec.md": __vite_glob_0_12,
-  "../skill/yorz-spec/__tests__/fixtures/tasks-consume-annotations/meta.json": __vite_glob_0_13,
-  "../skill/yorz-spec/index.json": __vite_glob_0_14,
-  "../skill/yorz-spec/mermaid.md": __vite_glob_0_15,
-  "../skill/yorz-spec/references/architecture.md": __vite_glob_0_16,
-  "../skill/yorz-spec/references/classDiagram.md": __vite_glob_0_17,
-  "../skill/yorz-spec/references/config-configuration.md": __vite_glob_0_18,
-  "../skill/yorz-spec/references/config-directives.md": __vite_glob_0_19,
-  "../skill/yorz-spec/references/config-layouts.md": __vite_glob_0_20,
-  "../skill/yorz-spec/references/config-math.md": __vite_glob_0_21,
-  "../skill/yorz-spec/references/config-theming.md": __vite_glob_0_22,
-  "../skill/yorz-spec/references/config-tidy-tree.md": __vite_glob_0_23,
-  "../skill/yorz-spec/references/entityRelationshipDiagram.md": __vite_glob_0_24,
-  "../skill/yorz-spec/references/eventmodeling.md": __vite_glob_0_25,
-  "../skill/yorz-spec/references/examples.md": __vite_glob_0_26,
-  "../skill/yorz-spec/references/flowchart.md": __vite_glob_0_27,
-  "../skill/yorz-spec/references/gantt.md": __vite_glob_0_28,
-  "../skill/yorz-spec/references/gitgraph.md": __vite_glob_0_29,
-  "../skill/yorz-spec/references/mindmap.md": __vite_glob_0_30,
-  "../skill/yorz-spec/references/packet.md": __vite_glob_0_31,
-  "../skill/yorz-spec/references/quadrantChart.md": __vite_glob_0_32,
-  "../skill/yorz-spec/references/radar.md": __vite_glob_0_33,
-  "../skill/yorz-spec/references/sequenceDiagram.md": __vite_glob_0_34,
-  "../skill/yorz-spec/references/stateDiagram.md": __vite_glob_0_35,
-  "../skill/yorz-spec/references/swimlanes.md": __vite_glob_0_36,
-  "../skill/yorz-spec/references/timeline.md": __vite_glob_0_37,
-  "../skill/yorz-spec/references/treeView.md": __vite_glob_0_38,
-  "../skill/yorz-spec/references/treemap.md": __vite_glob_0_39,
-  "../skill/yorz-spec/references/xyChart.md": __vite_glob_0_40,
-  "../skill/yorz-spec/review.md": __vite_glob_0_41,
-  "../skill/yorz-spec/stages.md": __vite_glob_0_42
+  "../skill/yorz-git-ops/SKILL.md": __vite_glob_0_2,
+  "../skill/yorz-git-ops/index.json": __vite_glob_0_3,
+  "../skill/yorz-spec/SKILL.md": __vite_glob_0_4,
+  "../skill/yorz-spec/__tests__/fixtures/append-task-state/input.spec.md": __vite_glob_0_5,
+  "../skill/yorz-spec/__tests__/fixtures/append-task-state/meta.json": __vite_glob_0_6,
+  "../skill/yorz-spec/__tests__/fixtures/execute-checkbox-flip/input.spec.md": __vite_glob_0_7,
+  "../skill/yorz-spec/__tests__/fixtures/execute-checkbox-flip/meta.json": __vite_glob_0_8,
+  "../skill/yorz-spec/__tests__/fixtures/new-spec-skeleton/meta.json": __vite_glob_0_9,
+  "../skill/yorz-spec/__tests__/fixtures/plan-candidates/input.spec.md": __vite_glob_0_10,
+  "../skill/yorz-spec/__tests__/fixtures/plan-candidates/meta.json": __vite_glob_0_11,
+  "../skill/yorz-spec/__tests__/fixtures/reopen-on-new-requirement/input.spec.md": __vite_glob_0_12,
+  "../skill/yorz-spec/__tests__/fixtures/reopen-on-new-requirement/meta.json": __vite_glob_0_13,
+  "../skill/yorz-spec/__tests__/fixtures/tasks-consume-annotations/input.spec.md": __vite_glob_0_14,
+  "../skill/yorz-spec/__tests__/fixtures/tasks-consume-annotations/meta.json": __vite_glob_0_15,
+  "../skill/yorz-spec/index.json": __vite_glob_0_16,
+  "../skill/yorz-spec/mermaid.md": __vite_glob_0_17,
+  "../skill/yorz-spec/references/architecture.md": __vite_glob_0_18,
+  "../skill/yorz-spec/references/classDiagram.md": __vite_glob_0_19,
+  "../skill/yorz-spec/references/config-configuration.md": __vite_glob_0_20,
+  "../skill/yorz-spec/references/config-directives.md": __vite_glob_0_21,
+  "../skill/yorz-spec/references/config-layouts.md": __vite_glob_0_22,
+  "../skill/yorz-spec/references/config-math.md": __vite_glob_0_23,
+  "../skill/yorz-spec/references/config-theming.md": __vite_glob_0_24,
+  "../skill/yorz-spec/references/config-tidy-tree.md": __vite_glob_0_25,
+  "../skill/yorz-spec/references/entityRelationshipDiagram.md": __vite_glob_0_26,
+  "../skill/yorz-spec/references/eventmodeling.md": __vite_glob_0_27,
+  "../skill/yorz-spec/references/examples.md": __vite_glob_0_28,
+  "../skill/yorz-spec/references/flowchart.md": __vite_glob_0_29,
+  "../skill/yorz-spec/references/gantt.md": __vite_glob_0_30,
+  "../skill/yorz-spec/references/gitgraph.md": __vite_glob_0_31,
+  "../skill/yorz-spec/references/mindmap.md": __vite_glob_0_32,
+  "../skill/yorz-spec/references/packet.md": __vite_glob_0_33,
+  "../skill/yorz-spec/references/quadrantChart.md": __vite_glob_0_34,
+  "../skill/yorz-spec/references/radar.md": __vite_glob_0_35,
+  "../skill/yorz-spec/references/sequenceDiagram.md": __vite_glob_0_36,
+  "../skill/yorz-spec/references/stateDiagram.md": __vite_glob_0_37,
+  "../skill/yorz-spec/references/swimlanes.md": __vite_glob_0_38,
+  "../skill/yorz-spec/references/timeline.md": __vite_glob_0_39,
+  "../skill/yorz-spec/references/treeView.md": __vite_glob_0_40,
+  "../skill/yorz-spec/references/treemap.md": __vite_glob_0_41,
+  "../skill/yorz-spec/references/xyChart.md": __vite_glob_0_42,
+  "../skill/yorz-spec/stages.md": __vite_glob_0_43
 });
 const SKILL_ROOT = "../skill/";
 function resolveSkillFiles(skillDir = SKILL_DIR_NAME) {
@@ -206,8 +407,7 @@ function resolveSkillFiles(skillDir = SKILL_DIR_NAME) {
   return files2.sort((a, b) => a.relPath.localeCompare(b.relPath));
 }
 async function install(opts, skillName = SKILL_DIR_NAME) {
-  const adapter = getAdapter(opts.agent);
-  const baseDir = adapter.resolveSkillsDir(opts.scope, { home: opts.home, cwd: opts.cwd });
+  const baseDir = opts.skillsDir ?? resolveGlobalSkillsDir();
   const skillDir = join(baseDir, skillName);
   const entry = join(skillDir, "SKILL.md");
   const overwritten = await dirExists(skillDir);
@@ -260,22 +460,63 @@ function fingerprintFiles(files2) {
   return hash.digest("hex");
 }
 async function ensureSkillsInstalled(opts) {
+  const baseDir = opts.skillsDir ?? resolveGlobalSkillsDir();
+  const results = [];
+  for (const skill of SKILL_DIR_NAMES) {
+    const skillDir = join(baseDir, skill);
+    const entry = join(skillDir, "SKILL.md");
+    const bundled = computeBundledFingerprint(skill);
+    const installed = await readInstalledFingerprint(skillDir, skill);
+    if (installed === bundled) {
+      results.push({ skill, status: "up-to-date", path: entry });
+      continue;
+    }
+    const status = installed === null ? "installed" : "updated";
+    const result = await install({ skillsDir: baseDir, cwd: opts.cwd }, skill);
+    results.push({ skill, status, path: result.path });
+  }
+  return results;
+}
+function legacySkillBaseDirs(home, cwd) {
+  return [
+    join(home, ".claude", "skills"),
+    join(home, ".config", "opencode", "skills"),
+    join(home, ".codex", "skills"),
+    join(cwd, ".claude", "skills"),
+    join(cwd, ".opencode", "skills"),
+    join(cwd, ".codex", "skills")
+  ];
+}
+function parseSkillFrontmatterName(content) {
+  const match = /^---\r?\n([\s\S]*?)\r?\n---/.exec(content);
+  if (!match) return null;
+  for (const line of match[1].split(/\r?\n/)) {
+    const kv = /^name:\s*(.+?)\s*$/.exec(line);
+    if (kv) return kv[1].replace(/^['"]|['"]$/g, "");
+  }
+  return null;
+}
+async function cleanupLegacyAgentSkills(opts) {
   const results = [];
-  for (const agent of AUTO_INSTALL_AGENTS) {
-    const adapter = getAdapter(agent);
-    const baseDir = adapter.resolveSkillsDir("user", { home: opts.home, cwd: opts.cwd });
+  for (const baseDir of legacySkillBaseDirs(opts.home, opts.cwd)) {
     for (const skill of SKILL_DIR_NAMES) {
       const skillDir = join(baseDir, skill);
-      const entry = join(skillDir, "SKILL.md");
-      const bundled = computeBundledFingerprint(skill);
-      const installed = await readInstalledFingerprint(skillDir, skill);
-      if (installed === bundled) {
-        results.push({ agent, skill, status: "up-to-date", path: entry });
+      if (!await dirExists(skillDir)) {
+        results.push({ skill, path: skillDir, removed: false, reason: "absent" });
         continue;
       }
-      const status = installed === null ? "installed" : "updated";
-      const result = await install({ agent, scope: "user", home: opts.home, cwd: opts.cwd }, skill);
-      results.push({ agent, skill, status, path: result.path });
+      let name2 = null;
+      try {
+        name2 = parseSkillFrontmatterName(await readFile(join(skillDir, "SKILL.md"), "utf8"));
+      } catch {
+        name2 = null;
+      }
+      if (name2 !== skill) {
+        results.push({ skill, path: skillDir, removed: false, reason: "foreign" });
+        continue;
+      }
+      await rm(skillDir, { recursive: true, force: true });
+      results.push({ skill, path: skillDir, removed: true, reason: "removed" });
     }
   }
   return results;
@@ -316,9 +557,8 @@ async function ensureTmpIgnored(cwd) {
   await writeFile(giPath, next, "utf8");
   return { updated: true, path: giPath };
 }
-async function uninstall(opts) {
-  const adapter = getAdapter(opts.agent);
-  const baseDir = adapter.resolveSkillsDir(opts.scope, { home: opts.home, cwd: opts.cwd });
+async function uninstall(opts = {}) {
+  const baseDir = opts.skillsDir ?? resolveGlobalSkillsDir();
   const results = [];
   for (const skill of SKILL_DIR_NAMES) {
     const skillDir = join(baseDir, skill);
@@ -597,198 +837,27 @@ function stripExt(name2) {
   const ext = extname(name2);
   return ext ? name2.slice(0, name2.length - ext.length) : name2;
 }
-function sanitize(text) {
-  let cleaned = text.replace(/[\s\\/:*?"<>|\x00-\x1f]+/g, "-");
-  cleaned = cleaned.replace(/\.+/g, "-");
-  return cleaned.replace(/^-+|-+$/g, "").slice(0, 64);
-}
-function uniquify(name2, existing) {
-  if (!existing.includes(name2)) return name2;
-  const ext = extname(name2);
-  const base = stripExt(name2);
-  for (let i = 1; i < 1e3; i++) {
-    const candidate = `${base}-${i}${ext}`;
-    if (!existing.includes(candidate)) return candidate;
-  }
-  return `${base}-${randomUUID().slice(0, 4)}${ext}`;
-}
-function isSafeName(name2) {
-  if (!name2) return false;
-  if (name2.includes("/") || name2.includes("\\")) return false;
-  if (name2 === "." || name2 === "..") return false;
-  if (name2.startsWith(".")) return false;
-  return true;
-}
-const CURRENT_VERSION$1 = 1;
-const DEFAULT_GLOBAL_AGENT = { defaultKind: "claude" };
-const DEFAULT_NOTIFICATIONS = {
-  sessionEnd: { banner: false, sound: false }
-};
-function resolveGlobalConfigDir(env = process.env) {
-  if (env.YORZ_HOME && env.YORZ_HOME.trim()) return env.YORZ_HOME.trim();
-  const xdg = env.XDG_CONFIG_HOME?.trim();
-  const base = xdg && xdg.length > 0 ? xdg : join(homedir(), ".config");
-  return join(base, "yorz");
-}
-function resolveGlobalConfigPath(env = process.env) {
-  return join(resolveGlobalConfigDir(env), "projects.json");
-}
-async function loadGlobalConfig(filePath) {
-  const fp = filePath ?? resolveGlobalConfigPath();
-  if (!existsSync(fp)) return defaultGlobalConfig();
-  let raw;
-  try {
-    raw = await readFile(fp, "utf8");
-  } catch {
-    return defaultGlobalConfig();
-  }
-  if (!raw.trim()) return defaultGlobalConfig();
-  let parsed;
-  try {
-    parsed = JSON.parse(raw);
-  } catch {
-    return defaultGlobalConfig();
-  }
-  return normalizeConfig$1(parsed);
-}
-async function saveGlobalConfig(config, filePath) {
-  const fp = filePath ?? resolveGlobalConfigPath();
-  await mkdir(dirname(fp), { recursive: true });
-  const normalized = normalizeConfig$1(config);
-  const body = `${JSON.stringify(normalized, null, 2)}
-`;
-  const tmp = `${fp}.tmp-${process.pid}-${Date.now().toString(36)}`;
-  await writeFile(tmp, body, "utf8");
-  await rename(tmp, fp);
-}
-function normalizeConfig$1(value) {
-  if (!value || typeof value !== "object") return defaultGlobalConfig();
-  const obj = value;
-  const projectsRaw = Array.isArray(obj.projects) ? obj.projects : [];
-  const projects = [];
-  for (const item of projectsRaw) {
-    if (!item || typeof item !== "object") continue;
-    const it = item;
-    const id = typeof it.id === "string" ? it.id : "";
-    const path = typeof it.path === "string" ? it.path : "";
-    if (!id || !path) continue;
-    const addedAt = typeof it.addedAt === "string" ? it.addedAt : "";
-    const lastActivityAt = typeof it.lastActivityAt === "string" ? it.lastActivityAt : null;
-    const worktree = normalizeWorktree(it.worktree);
-    const entry = { id, path, addedAt, lastActivityAt };
-    if (worktree) entry.worktree = worktree;
-    projects.push(entry);
-  }
-  return {
-    version: CURRENT_VERSION$1,
-    projects,
-    agent: normalizeAgent$1(obj.agent),
-    notifications: normalizeNotifications(obj.notifications)
-  };
-}
-function defaultGlobalConfig() {
-  return {
-    version: CURRENT_VERSION$1,
-    projects: [],
-    agent: { defaultKind: DEFAULT_GLOBAL_AGENT.defaultKind },
-    notifications: {
-      sessionEnd: {
-        banner: DEFAULT_NOTIFICATIONS.sessionEnd.banner,
-        sound: DEFAULT_NOTIFICATIONS.sessionEnd.sound
-      }
-    }
-  };
-}
-function normalizeAgent$1(value) {
-  if (!value || typeof value !== "object") return { defaultKind: DEFAULT_GLOBAL_AGENT.defaultKind };
-  const obj = value;
-  const defaultKind = obj.defaultKind;
-  if (defaultKind === "opencode" || defaultKind === "codex") return { defaultKind };
-  return { defaultKind: "claude" };
-}
-function normalizeNotifications(value) {
-  if (!value || typeof value !== "object") return defaultGlobalConfig().notifications;
-  const obj = value;
-  const sessionEndRaw = obj.sessionEnd;
-  if (!sessionEndRaw || typeof sessionEndRaw !== "object")
-    return defaultGlobalConfig().notifications;
-  const sessionEndObj = sessionEndRaw;
-  return {
-    sessionEnd: {
-      banner: typeof sessionEndObj.banner === "boolean" ? sessionEndObj.banner : DEFAULT_NOTIFICATIONS.sessionEnd.banner,
-      sound: typeof sessionEndObj.sound === "boolean" ? sessionEndObj.sound : DEFAULT_NOTIFICATIONS.sessionEnd.sound
-    }
-  };
-}
-function normalizeWorktree(value) {
-  if (!value || typeof value !== "object") return void 0;
-  const it = value;
-  const mainProjectId = typeof it.mainProjectId === "string" ? it.mainProjectId : "";
-  const mainPath = typeof it.mainPath === "string" ? it.mainPath : "";
-  const branch = typeof it.branch === "string" ? it.branch : "";
-  const specId = typeof it.specId === "string" ? it.specId : "";
-  const createdAt = typeof it.createdAt === "string" ? it.createdAt : "";
-  if (!mainProjectId || !mainPath || !branch) return void 0;
-  const cleanSlug = typeof it.cleanSlug === "string" ? it.cleanSlug : void 0;
-  const meta = { mainProjectId, mainPath, branch, specId, createdAt };
-  if (cleanSlug) meta.cleanSlug = cleanSlug;
-  return meta;
-}
-function generateProjectId(absPath) {
-  const base = basename$1(absPath);
-  const slug = slugify(base) || "proj";
-  const hash = createHash("sha256").update(absPath).digest("hex").slice(0, 6);
-  return `${slug}-${hash}`;
-}
-function slugify(text) {
-  return text.toLowerCase().replace(/[^a-z0-9-]+/g, "-").replace(/^-+|-+$/g, "").slice(0, 40).replace(/-+$/, "");
-}
-async function addProject(absPath, filePath, now = () => /* @__PURE__ */ new Date()) {
-  const config = await loadGlobalConfig(filePath);
-  const existing = config.projects.find((p) => p.path === absPath);
-  if (existing) return { entry: existing, created: false };
-  const entry = {
-    id: generateProjectId(absPath),
-    path: absPath,
-    addedAt: now().toISOString(),
-    lastActivityAt: null
-  };
-  config.projects.push(entry);
-  await saveGlobalConfig(config, filePath);
-  return { entry, created: true };
-}
-async function setProjectWorktree(id, worktree, filePath) {
-  const config = await loadGlobalConfig(filePath);
-  const target = config.projects.find((p) => p.id === id);
-  if (!target) return false;
-  if (worktree) target.worktree = worktree;
-  else delete target.worktree;
-  await saveGlobalConfig(config, filePath);
-  return true;
-}
-async function removeProject(id, filePath) {
-  const config = await loadGlobalConfig(filePath);
-  const before = config.projects.length;
-  config.projects = config.projects.filter((p) => p.id !== id);
-  if (config.projects.length === before) return false;
-  await saveGlobalConfig(config, filePath);
-  return true;
+function sanitize(text) {
+  let cleaned = text.replace(/[\s\\/:*?"<>|\x00-\x1f]+/g, "-");
+  cleaned = cleaned.replace(/\.+/g, "-");
+  return cleaned.replace(/^-+|-+$/g, "").slice(0, 64);
 }
-async function prepareProjectDir(input, cwd) {
-  if (typeof input !== "string" || !input.trim()) {
-    throw new Error("path required");
-  }
-  const trimmed = input.trim();
-  const abs = isAbsolute(trimmed) ? resolve(trimmed) : resolve(cwd ?? process.cwd(), trimmed);
-  if (!existsSync(abs)) {
-    throw new Error(`path does not exist: ${abs}`);
-  }
-  const stats = await stat(abs);
-  if (!stats.isDirectory()) {
-    throw new Error(`path is not a directory: ${abs}`);
+function uniquify(name2, existing) {
+  if (!existing.includes(name2)) return name2;
+  const ext = extname(name2);
+  const base = stripExt(name2);
+  for (let i = 1; i < 1e3; i++) {
+    const candidate = `${base}-${i}${ext}`;
+    if (!existing.includes(candidate)) return candidate;
   }
-  await mkdir(join(abs, ".yorz", "specs"), { recursive: true });
-  return abs;
+  return `${base}-${randomUUID().slice(0, 4)}${ext}`;
+}
+function isSafeName(name2) {
+  if (!name2) return false;
+  if (name2.includes("/") || name2.includes("\\")) return false;
+  if (name2 === "." || name2 === "..") return false;
+  if (name2.startsWith(".")) return false;
+  return true;
 }
 const LEVEL_WEIGHT = {
   debug: 10,
@@ -977,6 +1046,12 @@ function configureLogger(patch) {
   logger.configure(patch);
   return logger;
 }
+function skillEntryPath(skillName, env = process.env) {
+  return resolveSkillEntry(skillName, env);
+}
+function skillRef(skillName, env = process.env) {
+  return `请先完整阅读并严格遵循 ${skillEntryPath(skillName, env)}（YorZ 内置 ${skillName} skill 规则）`;
+}
 function createSpecsRoutes(resolveProject) {
   const app = new Hono();
   const need = async (c) => {
@@ -1142,7 +1217,7 @@ function createSpecsRoutes(resolveProject) {
         specId,
         "resume",
         await buildDebugRuntimeContext(p)
-      ) : `请使用 yorz-spec skill 处理 spec：${p.specsDirRelative}/${specId}/spec.md`;
+      ) : `${skillRef("yorz-spec")}，然后处理 spec：${p.specsDirRelative}/${specId}/spec.md`;
       const handle = await p.sessions.send(sessionId, prompt);
       return c.json({ ok: true, runId: handle.runId, sessionId });
     }
@@ -1156,7 +1231,7 @@ function createSpecsRoutes(resolveProject) {
     if (!detail) return c.json({ error: "spec not found" }, 404);
     const { sessionId } = await p.sessions.ensureSessionForSpec(specId);
     const debugActive = await readDebugMdStatus(join(p.specsDir, specId)) === "debugging";
-    const prompt = debugActive ? buildDebugPrompt(p.specsDirRelative, specId, "resume", await buildDebugRuntimeContext(p)) : `请使用 yorz-spec skill 处理 spec：${p.specsDirRelative}/${specId}/spec.md`;
+    const prompt = debugActive ? buildDebugPrompt(p.specsDirRelative, specId, "resume", await buildDebugRuntimeContext(p)) : `${skillRef("yorz-spec")}，然后处理 spec：${p.specsDirRelative}/${specId}/spec.md`;
     const handle = await p.sessions.send(sessionId, prompt);
     return c.json({ runId: handle.runId, sessionId });
   });
@@ -1204,7 +1279,7 @@ ${text}
 }
 function buildDraftPrompt(type2, requirement, draftId) {
   const lines = [
-    "请按 yorz-spec skill 的「新建 spec」流程，根据下方信息创建新的 spec 文档，并立即按 plan 阶段继续推进直至阻塞。",
+    `${skillRef("yorz-spec")}，然后按其「新建 spec」流程，根据下方信息创建新的 spec 文档，并立即按 plan 阶段继续推进直至阻塞。`,
     "",
     `类型：${type2}（已由调用方指定，不要再询问）`,
     "需求：",
@@ -1282,9 +1357,9 @@ function buildDebugPrompt(specsDirRelative, specId, mode, runtimeContext = "") {
   const specPath = `${specsDirRelative}/${specId}/spec.md`;
   const debugPath = `${specsDirRelative}/${specId}/debug.md`;
   if (mode === "resume") {
-    return `请使用 yorz-debug skill 继续调试：spec 目录 ${specsDirRelative}/${specId}（含 ${specPath}）。该目录下已存在处于 debugging 状态的 ${debugPath}，请定位其活跃记录块（frontmatter active 指向的 ## Debug NNN）继续「假设 → 取证 → 验证」循环，勿新建记录块。` + runtimeContext;
+    return `${skillRef("yorz-debug")}，然后继续调试：spec 目录 ${specsDirRelative}/${specId}（含 ${specPath}）。该目录下已存在处于 debugging 状态的 ${debugPath}，请定位其活跃记录块（frontmatter active 指向的 ## Debug NNN）继续「假设 → 取证 → 验证」循环，勿新建记录块。` + runtimeContext;
   }
-  return `请使用 yorz-debug skill 进入 Debug 模式：spec 目录 ${specsDirRelative}/${specId}（含 ${specPath}）。若 ${debugPath} 不存在则创建，否则在文末追加新的 ## Debug 记录块；进入后立即 git stash create 打快照写入 Debug 基线，再开始「假设 → 取证 → 验证」循环。` + runtimeContext;
+  return `${skillRef("yorz-debug")}，然后进入 Debug 模式：spec 目录 ${specsDirRelative}/${specId}（含 ${specPath}）。若 ${debugPath} 不存在则创建，否则在文末追加新的 ## Debug 记录块；进入后立即 git stash create 打快照写入 Debug 基线，再开始「假设 → 取证 → 验证」循环。` + runtimeContext;
 }
 async function buildDebugRuntimeContext(project) {
   return formatDebugRuntimeContext(await project.commands.listRuns());
@@ -1456,7 +1531,7 @@ function buildChatDebugPrompt(prompt, now = /* @__PURE__ */ new Date()) {
   const debugPath = `${CHAT_DEBUG_DIR_REL}/debug-${formatDebugTimestamp(now)}.md`;
   const bug = body || "请先根据对话上下文确认待调试问题；若上下文不足，请向用户补齐复现信息。";
   return [
-    `请使用 yorz-debug skill 进入 Debug 模式。`,
+    `${skillRef("yorz-debug")}，然后进入 Debug 模式。`,
     `本次是普通 chat 独立触发，没有 spec_dir。Debug 活文档必须写入临时文件 \`${debugPath}\`。`,
     `写入前请确保目录 \`${CHAT_DEBUG_DIR_REL}/\` 存在；该目录属于临时目录，会由 YorZ 定时清理。`,
     `如果该文件不存在则创建；本文件只承载本次 chat debug 记录，不需要追加复用其他文件。`,
@@ -1808,24 +1883,6 @@ function createSpecReviewRoutes(resolveProject) {
     if (!project) return c.json({ error: "project not found" }, 404);
     return project;
   };
-  app.post("/projects/:projectId/specs/:id/review", async (c) => {
-    const p = await need(c);
-    if (p instanceof Response) return p;
-    const specId = c.req.param("id");
-    const detail = await p.store.read(specId);
-    if (!detail) return c.json({ error: "spec not found" }, 404);
-    const specRel = `${p.specsDirRelative}/${specId}/spec.md`;
-    const reviewRel = `${p.specsDirRelative}/${specId}/review.md`;
-    const prompt = `请使用 yorz-spec skill 的 "Review / Git Ops 阶段" 流程处理本次 review：
-- spec 文档：${specRel}
-- 输出文件：${reviewRel}（追加新二级标题条目，禁止覆盖历史）
-- 必含 4 节：变更总结 / 影响范围 / 风险提醒 / 变更文件清单
-- 触发时间使用本机当前时间，格式 \`YYYY-MM-DD HH:mm:ss\`
-`;
-    const { sessionId } = await p.sessions.ensureSessionForSpec(specId);
-    const handle = await p.sessions.send(sessionId, prompt);
-    return c.json({ runId: handle.runId, sessionId });
-  });
   app.post("/projects/:projectId/specs/:id/git", async (c) => {
     const p = await need(c);
     if (p instanceof Response) return p;
@@ -1843,27 +1900,11 @@ function createSpecReviewRoutes(resolveProject) {
       return c.json({ error: "action must be one of commit | discard | stash" }, 400);
     }
     const specRel = `${p.specsDirRelative}/${specId}/spec.md`;
-    const reviewRel = `${p.specsDirRelative}/${specId}/review.md`;
-    const prompt = buildGitOpsPrompt(action, specId, specRel, reviewRel);
+    const prompt = buildGitOpsPrompt(action, specId, specRel);
     const { sessionId } = await p.sessions.ensureSessionForSpec(specId);
     const handle = await p.sessions.send(sessionId, prompt);
     return c.json({ runId: handle.runId, sessionId });
   });
-  app.get("/projects/:projectId/specs/:id/review", async (c) => {
-    const p = await need(c);
-    if (p instanceof Response) return p;
-    const specId = c.req.param("id");
-    const detail = await p.store.read(specId);
-    if (!detail) return c.json({ error: "spec not found" }, 404);
-    const file = join(p.specsDir, specId, "review.md");
-    if (!existsSync(file)) return c.json({ text: "" });
-    try {
-      const text = await readFile(file, "utf8");
-      return c.json({ text });
-    } catch {
-      return c.json({ text: "" });
-    }
-  });
   app.get("/projects/:projectId/specs/:id/debug", async (c) => {
     const p = await need(c);
     if (p instanceof Response) return p;
@@ -1967,15 +2008,15 @@ function createSpecReviewRoutes(resolveProject) {
   });
   return app;
 }
-function buildGitOpsPrompt(action, specId, specRel, reviewRel) {
-  const base = `请使用 yorz-spec skill 的 "Review / Git Ops 阶段" 流程执行 git 操作：
+function buildGitOpsPrompt(action, specId, specRel) {
+  const base = `${skillRef("yorz-git-ops")}，然后执行 git 操作：
 - spec 文档：${specRel}
-- 最近一次 review：${reviewRel}（如不存在，请先依据 git status/diff 自行判断本次 spec 关联的变更）
+- 请依据 spec 文档与 git status/diff 自行判断本次 spec 关联的变更文件
 - spec-id：${specId}
 `;
   switch (action) {
     case "commit":
-      return base + `- 动作：git-commit。请基于 review 报告与 git status，由你自主判断本次 spec 相关的变更文件，执行 \`git add\` + \`git commit\`；commit message 由你生成，不带 scope；禁止 \`git push\` 与 \`git reset --hard\`。
+      return base + `- 动作：git-commit。请基于 spec 文档与 git status/diff，由你自主判断本次 spec 相关的变更文件，执行 \`git add\` + \`git commit\`；commit message 由你生成，不带 scope；禁止 \`git push\` 与 \`git reset --hard\`。
 `;
     case "discard":
       return base + `- 动作：git-discard。请使用 \`git restore --staged --worktree -- <paths>\` 与 \`git clean -fd -- <paths>\` 丢弃 spec 相关的未提交变更；对 untracked 新文件应先在终端输出列表再处理；不要预先 stash 备份；禁止 \`git reset --hard\` 与 \`git push\`。
@@ -2585,7 +2626,7 @@ function createGlobalConfigRoutes(globalConfigPath) {
   const app = new Hono();
   app.get("/global-config", async (c) => {
     const cfg = await loadGlobalConfig(globalConfigPath);
-    return c.json({ agent: cfg.agent, notifications: cfg.notifications });
+    return c.json({ agent: cfg.agent, notifications: cfg.notifications, shortcuts: cfg.shortcuts });
   });
   app.put("/global-config", async (c) => {
     let raw;
@@ -2599,8 +2640,12 @@ function createGlobalConfigRoutes(globalConfigPath) {
     const cfg = await loadGlobalConfig(globalConfigPath);
     cfg.agent = parsed.agent;
     cfg.notifications = parsed.notifications;
+    cfg.shortcuts = parsed.shortcuts;
     await saveGlobalConfig(cfg, globalConfigPath);
-    return c.json({ ok: true, config: { agent: cfg.agent, notifications: cfg.notifications } });
+    return c.json({
+      ok: true,
+      config: { agent: cfg.agent, notifications: cfg.notifications, shortcuts: cfg.shortcuts }
+    });
   });
   return app;
 }
@@ -2632,9 +2677,27 @@ function parseBody(value) {
   if (typeof s.sound !== "boolean") {
     return { error: "notifications.sessionEnd.sound must be a boolean" };
   }
+  const shortcutsRaw = obj.shortcuts ?? {};
+  if (typeof shortcutsRaw !== "object") {
+    return { error: "shortcuts must be an object" };
+  }
+  const shortcutObj = shortcutsRaw;
+  for (const key of Object.keys(shortcutObj)) {
+    if (!SHORTCUT_ACTION_IDS.includes(key)) {
+      return { error: `unknown shortcut action: ${key}` };
+    }
+    const value2 = shortcutObj[key];
+    if (value2 !== null && typeof value2 !== "string") {
+      return { error: `shortcuts.${key} must be a string or null` };
+    }
+    if (typeof value2 === "string" && !normalizeShortcutBinding(value2)) {
+      return { error: `shortcuts.${key} is not a valid shortcut binding` };
+    }
+  }
   return {
     agent: { defaultKind },
-    notifications: { sessionEnd: { banner: s.banner, sound: s.sound } }
+    notifications: { sessionEnd: { banner: s.banner, sound: s.sound } },
+    shortcuts: normalizeShortcuts(shortcutObj)
   };
 }
 function createSpecDraftsRoutes(resolveProject) {
@@ -3835,6 +3898,93 @@ class RegistryEventBus {
     this.debounceTimer.unref?.();
   }
 }
+class SessionStore {
+  file;
+  cache = null;
+  writeChain = Promise.resolve();
+  constructor(projectPath) {
+    this.file = join(projectPath, ".yorz", "tmp", "sessions", "index.json");
+  }
+  async load() {
+    if (this.cache) return this.cache;
+    try {
+      const raw = await readFile(this.file, "utf8");
+      const parsed = JSON.parse(raw);
+      this.cache = Array.isArray(parsed) ? parsed : [];
+    } catch {
+      this.cache = [];
+    }
+    return this.cache;
+  }
+  async persist() {
+    const snapshot = this.cache ?? [];
+    this.writeChain = this.writeChain.then(async () => {
+      await mkdir(dirname(this.file), { recursive: true });
+      await writeFile(this.file, JSON.stringify(snapshot, null, 2), "utf8");
+    });
+    await this.writeChain;
+  }
+  async list() {
+    const items = await this.load();
+    return [...items].sort((a, b) => b.updatedAt - a.updatedAt);
+  }
+  async get(id) {
+    const items = await this.load();
+    return items.find((s) => s.id === id);
+  }
+  async getBySpec(specId) {
+    const items = await this.load();
+    return items.find((s) => s.specId === specId);
+  }
+  async upsert(info) {
+    const items = await this.load();
+    const idx = items.findIndex((s) => s.id === info.id);
+    if (idx >= 0) items[idx] = { ...items[idx], ...info };
+    else items.push(info);
+    await this.persist();
+  }
+  async create(kind, id, title, specId) {
+    const now = Date.now();
+    const info = { id, title, kind, createdAt: now, updatedAt: now };
+    if (specId) info.specId = specId;
+    await this.upsert(info);
+    return info;
+  }
+  /** Rewrite a provisional/empty id once the adapter surfaces the real one. */
+  async reconcileId(oldId, newId) {
+    if (oldId === newId) return;
+    const items = await this.load();
+    const entry = items.find((s) => s.id === oldId);
+    if (!entry) return;
+    entry.id = newId;
+    entry.updatedAt = Date.now();
+    await this.persist();
+  }
+  async updateTitle(id, title) {
+    const items = await this.load();
+    const entry = items.find((s) => s.id === id);
+    if (!entry) return;
+    entry.title = title;
+    entry.updatedAt = Date.now();
+    await this.persist();
+  }
+  async bindSpec(id, specId) {
+    const items = await this.load();
+    const entry = items.find((s) => s.id === id);
+    if (!entry) return false;
+    entry.specId = specId;
+    entry.updatedAt = Date.now();
+    await this.persist();
+    return true;
+  }
+  async touch(id) {
+    const items = await this.load();
+    const entry = items.find((s) => s.id === id);
+    if (!entry) return;
+    entry.updatedAt = Date.now();
+    await this.persist();
+  }
+}
 const worktreeLog = () => getLogger().child("worktree");
 class WorktreeManager {
   registry;
@@ -3900,6 +4050,27 @@ class WorktreeManager {
     const next = { ...entry.worktree, specId };
     await setProjectWorktree(worktreeProjectId, next, this.globalConfigPath);
   }
+  /**
+   * Migrate session index entries from the worktree to the main project before
+   * the worktree directory is removed. Claude SDK transcript files survive
+   * worktree removal (they live in ~/.claude/projects/), and getSessionMessages
+   * searches globally by session ID, so only the YorZ session index needs migrating.
+   */
+  async migrateSessions(wtPath, mainPath) {
+    const wtStore = new SessionStore(wtPath);
+    const mainStore = new SessionStore(mainPath);
+    const sessions = await wtStore.list();
+    for (const s of sessions) {
+      await mainStore.upsert(s);
+    }
+    if (sessions.length > 0) {
+      worktreeLog().info("sessions migrated", {
+        from: wtPath,
+        to: mainPath,
+        count: sessions.length
+      });
+    }
+  }
   async mergeBackToMain(input) {
     const entry = await this.registry.findEntry(input.worktreeProjectId);
     if (!entry) throw new GitError("not_found", `project not found: ${input.worktreeProjectId}`);
@@ -3941,6 +4112,7 @@ class WorktreeManager {
     }
     const head = await runGitChecked(mainPath, ["rev-parse", "HEAD"]);
     const mergeCommit = head.stdout.trim();
+    await this.migrateSessions(wtPath, mainPath);
     await runGitRaw(mainPath, ["worktree", "remove", wtPath]);
     if (existsSync(wtPath)) {
       await runGitRaw(mainPath, ["worktree", "remove", "--force", wtPath]);
@@ -4239,7 +4411,7 @@ function createApp(opts) {
       const { sessionId } = await main.sessions.ensureSessionForSpec(specId);
       void main.sessions.send(
         sessionId,
-        `请使用 yorz-spec skill 处理 spec：${main.specsDirRelative}/${specId}/spec.md`
+        `${skillRef("yorz-spec")}，然后处理 spec：${main.specsDirRelative}/${specId}/spec.md`
       );
     }
   });
@@ -4940,7 +5112,7 @@ class ClaudeAdapter {
     return new ClaudeSession(id, this.cwd, false);
   }
   async listSessions() {
-    const infos = await listSessions({ dir: this.cwd });
+    const infos = await listSessions({ dir: this.cwd, includeWorktrees: false });
     return infos.map((s) => ({
       id: s.sessionId,
       title: s.customTitle ?? s.summary ?? s.firstPrompt ?? s.sessionId,
@@ -5648,93 +5820,6 @@ class SessionManager {
     this.emitters.clear();
   }
 }
-class SessionStore {
-  file;
-  cache = null;
-  writeChain = Promise.resolve();
-  constructor(projectPath) {
-    this.file = join(projectPath, ".yorz", "tmp", "sessions", "index.json");
-  }
-  async load() {
-    if (this.cache) return this.cache;
-    try {
-      const raw = await readFile(this.file, "utf8");
-      const parsed = JSON.parse(raw);
-      this.cache = Array.isArray(parsed) ? parsed : [];
-    } catch {
-      this.cache = [];
-    }
-    return this.cache;
-  }
-  async persist() {
-    const snapshot = this.cache ?? [];
-    this.writeChain = this.writeChain.then(async () => {
-      await mkdir(dirname(this.file), { recursive: true });
-      await writeFile(this.file, JSON.stringify(snapshot, null, 2), "utf8");
-    });
-    await this.writeChain;
-  }
-  async list() {
-    const items = await this.load();
-    return [...items].sort((a, b) => b.updatedAt - a.updatedAt);
-  }
-  async get(id) {
-    const items = await this.load();
-    return items.find((s) => s.id === id);
-  }
-  async getBySpec(specId) {
-    const items = await this.load();
-    return items.find((s) => s.specId === specId);
-  }
-  async upsert(info) {
-    const items = await this.load();
-    const idx = items.findIndex((s) => s.id === info.id);
-    if (idx >= 0) items[idx] = { ...items[idx], ...info };
-    else items.push(info);
-    await this.persist();
-  }
-  async create(kind, id, title, specId) {
-    const now = Date.now();
-    const info = { id, title, kind, createdAt: now, updatedAt: now };
-    if (specId) info.specId = specId;
-    await this.upsert(info);
-    return info;
-  }
-  /** Rewrite a provisional/empty id once the adapter surfaces the real one. */
-  async reconcileId(oldId, newId) {
-    if (oldId === newId) return;
-    const items = await this.load();
-    const entry = items.find((s) => s.id === oldId);
-    if (!entry) return;
-    entry.id = newId;
-    entry.updatedAt = Date.now();
-    await this.persist();
-  }
-  async updateTitle(id, title) {
-    const items = await this.load();
-    const entry = items.find((s) => s.id === id);
-    if (!entry) return;
-    entry.title = title;
-    entry.updatedAt = Date.now();
-    await this.persist();
-  }
-  async bindSpec(id, specId) {
-    const items = await this.load();
-    const entry = items.find((s) => s.id === id);
-    if (!entry) return false;
-    entry.specId = specId;
-    entry.updatedAt = Date.now();
-    await this.persist();
-    return true;
-  }
-  async touch(id) {
-    const items = await this.load();
-    const entry = items.find((s) => s.id === id);
-    if (!entry) return;
-    entry.updatedAt = Date.now();
-    await this.persist();
-  }
-}
 const execFileP = promisify(execFile);
 const COMMAND_TIMEOUT_MS = 4e3;
 function createSessionEndNotifier(opts = {}) {
@@ -6468,16 +6553,22 @@ async function runRestartServe(opts = {}) {
   console.log(`YorZ Service restart scheduled (pid=${child.pid ?? "unknown"}).`);
 }
 async function ensureSkillsInstalledWithLog(cwd) {
-  const results = await ensureSkillsInstalled({ home: homedir(), cwd });
+  const results = await ensureSkillsInstalled({ cwd });
   for (const r of results) {
     if (r.status === "installed") {
-      console.log(`[skill][${r.agent}] ${r.skill} installed: ${r.path}`);
+      console.log(`[skill] ${r.skill} installed: ${r.path}`);
     } else if (r.status === "updated") {
-      console.log(`[skill][${r.agent}] ${r.skill} updated: ${r.path}`);
+      console.log(`[skill] ${r.skill} updated: ${r.path}`);
     } else {
-      console.log(`[skill][${r.agent}] ${r.skill} is up to date`);
+      console.log(`[skill] ${r.skill} is up to date: ${r.path}`);
     }
   }
+  const legacy = await cleanupLegacyAgentSkills({ home: homedir(), cwd });
+  for (const r of legacy) {
+    if (r.reason === "removed") console.log(`[skill][legacy] ${r.skill} removed: ${r.path}`);
+    else if (r.reason === "foreign")
+      console.log(`[skill][legacy] ${r.skill} kept (not a YorZ skill): ${r.path}`);
+  }
 }
 async function runStopServe() {
   silenceConsoleMirror();
@@ -7773,32 +7864,32 @@ Total: ${errorCount} error(s), ${warnCount} warn(s) across ${reports.length} fil
   }
   return { reports, errorCount, warnCount, exitCode };
 }
-const INSTALL_SCOPE_DEFAULT = "user";
-const ALL_AGENTS = ["claude", "opencode", "codex"];
-function parseAgents(value) {
-  if (value === "all") return ALL_AGENTS;
-  if (value === "claude" || value === "opencode" || value === "codex") return [value];
-  throw new Error(`Invalid --agent: ${value}. Use 'claude' | 'opencode' | 'codex' | 'all'.`);
-}
-function parseScope(value) {
-  if (value === "user" || value === "project") return value;
-  throw new Error(`Invalid --scope: ${value}. Use 'user' or 'project'.`);
-}
 const program = new Command();
 program.name("yorz").description("YorZ CLI — manage the yorz-spec skill.").version(pkg.version);
 const uninstallCmd = program.command("uninstall").description("Remove YorZ artifacts (skills, ...).");
 uninstallCmd.action(() => {
   uninstallCmd.help();
 });
-uninstallCmd.command("skills").description("Remove the yorz-spec skill from the target agent(s).").option("-a, --agent <agent>", "target agent: claude | opencode | codex | all", "all").option("-s, --scope <scope>", "uninstall scope: user | project", INSTALL_SCOPE_DEFAULT).action(async (opts) => {
-  const agents = parseAgents(opts.agent);
-  const scope = parseScope(opts.scope);
-  for (const agent of agents) {
-    const results = await uninstall({ agent, scope, home: homedir(), cwd: process.cwd() });
-    for (const result of results) {
-      if (result.removed) console.log(`[${agent}] ${result.skill} removed: ${result.path}`);
-      else console.log(`[${agent}] ${result.skill} not installed at ${result.path}`);
-    }
+uninstallCmd.command("skills").description("Remove the bundled YorZ skills from the shared global skills directory.").option(
+  "--legacy",
+  "instead remove skill dirs written by older versions into each Agent’s own skills directory",
+  false
+).action(async (opts) => {
+  if (opts.legacy) {
+    const results2 = await cleanupLegacyAgentSkills({ home: homedir(), cwd: process.cwd() });
+    for (const result of results2) {
+      if (result.reason === "removed")
+        console.log(`[legacy] ${result.skill} removed: ${result.path}`);
+      else if (result.reason === "foreign")
+        console.log(`[legacy] ${result.skill} kept (not a YorZ skill): ${result.path}`);
+    }
+    if (!results2.some((r) => r.removed)) console.log("[legacy] no legacy skill dirs to remove");
+    return;
+  }
+  const results = await uninstall();
+  for (const result of results) {
+    if (result.removed) console.log(`[skill] ${result.skill} removed: ${result.path}`);
+    else console.log(`[skill] ${result.skill} not installed at ${result.path}`);
   }
 });
 program.command("add <path>").description("Initialize and register a directory as a YorZ project.").option("-y, --yes", "skip the git-init confirmation prompt", false).action(async (input, opts) => {