diff --git a/backend/llm.py b/backend/llm.py
index 548ab4b..5002c67 100644
--- a/backend/llm.py
+++ b/backend/llm.py
@@ -1,6 +1,7 @@
 import os
 import time
 import logging
+import asyncio
 from datetime import datetime
 import ollama
 from dotenv import load_dotenv
@@ -97,6 +98,17 @@ async def call_ollama(
             kwargs["think"] = thinking
 
         response = await client.chat(**kwargs)
+    except asyncio.CancelledError:
+        elapsed_ms = (time.perf_counter() - start) * 1000
+        end_dt = datetime.now()
+        logger.info(
+            "[LLM][%s] call_time [%s --> %s]",
+            tag,
+            start_dt.strftime("%H:%M:%S"),
+            end_dt.strftime("%H:%M:%S"),
+        )
+        logger.warning("[LLM][%s] request cancelled after %.1fms", tag, elapsed_ms)
+        raise
     except Exception:
         elapsed_ms = (time.perf_counter() - start) * 1000
         end_dt = datetime.now()
diff --git a/backend/main.py b/backend/main.py
index 3803ff6..a23c3cc 100644
--- a/backend/main.py
+++ b/backend/main.py
@@ -1,16 +1,19 @@
-from fastapi import FastAPI, Request, HTTPException, Security
-from fastapi.security import APIKeyHeader
-from fastapi.middleware.cors import CORSMiddleware
-from fastapi.responses import StreamingResponse, JSONResponse
-from pydantic import BaseModel
-import json
+import asyncio
 import base64
-import uuid
+import json
 import logging
+import uuid
+from typing import Optional
+
+from fastapi import FastAPI, HTTPException, Request, Security
+from fastapi.middleware.cors import CORSMiddleware
+from fastapi.responses import JSONResponse, StreamingResponse
+from fastapi.security import APIKeyHeader
+from pydantic import BaseModel
 
-from prompt import build_completion_prompts, prepare_prompt_context
-from llm import call_ollama, call_vlm_ocr
 from geoip import get_ip_location_text
+from llm import call_ollama, call_vlm_ocr
+from prompt import build_completion_prompts, prepare_prompt_context
 
 logging.basicConfig(
     level=logging.INFO,
@@ -20,44 +23,54 @@ logger = logging.getLogger("api")
 
 app = FastAPI()
 
+ACTIVE_COMPLETIONS: dict[str, asyncio.Task] = {}
+ACTIVE_COMPLETIONS_LOCK = asyncio.Lock()
+
 app.add_middleware(
     CORSMiddleware,
     allow_origins=["*"],
     allow_credentials=True,
     allow_methods=["*"],
-    allow_headers=["*", "X-API-Key", "X-Client-IP"],
+    allow_headers=["*", "X-API-Key", "X-Client-IP", "X-Request-Id"],
 )
 
-API_KEY = "your-secret-key-here"  # 建议从环境变量读取
+API_KEY = "your-secret-key-here"
 api_key_header = APIKeyHeader(name="X-API-Key")
 
+
 async def get_api_key(api_key: str = Security(api_key_header)):
     if api_key != API_KEY:
         raise HTTPException(
             status_code=403,
-            detail="Could not validate credentials"
+            detail="Could not validate credentials",
         )
     return api_key
 
-from typing import Optional
 
 class UserPreferences(BaseModel):
-    language: str = 'auto'
-    currency: str = 'auto'
-    timezone: str = 'auto'
+    language: str = "auto"
+    currency: str = "auto"
+    timezone: str = "auto"
+
 
 class CompletionRequest(BaseModel):
     prefix: str
     suffix: str
-    languageId: str = 'markdown'
-    model_thinking: str = 'low'
+    languageId: str = "markdown"
+    model_thinking: str = "low"
     privacy_mode: bool = False
     user_preferences: Optional[UserPreferences] = None
 
+
+class CancelCompletionRequest(BaseModel):
+    request_id: str
+    reason: str = "abort"
+
+
 class OCRRequest(BaseModel):
     image: str
     filename: str = "image.jpg"
-    language: str = 'auto'
+    language: str = "auto"
 
 
 def _preview(text: str, limit: int = 80) -> str:
@@ -66,73 +79,143 @@ def _preview(text: str, limit: int = 80) -> str:
         return value
     return value[:limit] + "..."
 
+
+def _sse_payload(payload: dict) -> str:
+    return f"data: {json.dumps(payload)}\n\n"
+
+
 def get_client_ip(request: Request) -> str:
-    return request.headers.get("X-Client-IP") or request.client.host if request.client else "unknown"
+    if request.client:
+        return request.headers.get("X-Client-IP") or request.client.host
+    return request.headers.get("X-Client-IP") or "unknown"
+
 
 @app.post("/v1/completions")
 async def create_completion(request: Request, req: CompletionRequest, api_key: str = Security(get_api_key)):
-    request_id = str(uuid.uuid4())[:8]
-    
+    request_id = request.headers.get("X-Request-Id") or str(uuid.uuid4())
+    request_tag = request_id[:8]
+    inference_task: Optional[asyncio.Task] = None
+
     client_ip = "hidden"
     location = ""
-    
+
     if not req.privacy_mode:
         client_ip = get_client_ip(request)
-        # 查询 IP 归属地
         location = get_ip_location_text(client_ip)
         if location:
-            logger.info("[%s] client_location=%s", request_id, location)
-    
+            logger.info("[%s] client_location=%s", request_tag, location)
+
     try:
         logger.info(
-            "[%s] /v1/completions client_ip=%s prefix_chars=%d suffix_chars=%d lang=%s thinking=%s privacy=%s",
+            "[%s] /v1/completions request_id=%s client_ip=%s prefix_chars=%d suffix_chars=%d lang=%s thinking=%s privacy=%s",
+            request_tag,
             request_id,
             client_ip,
             len(req.prefix or ""),
             len(req.suffix or ""),
             req.languageId,
             req.model_thinking,
-            req.privacy_mode
-        )
-        llm_prefix, llm_suffix = prepare_prompt_context(req.prefix or "", req.suffix or "")
-        logger.info("[%s] llm_input_prefix=%r", request_id, llm_prefix)
-        logger.info("[%s] llm_input_suffix=%r", request_id, llm_suffix)
-        
-        system_prompt, user_prompt = build_completion_prompts(
-            req.prefix, 
-            req.suffix, 
-            req.languageId, 
-            location=location,
-            thinking_level=req.model_thinking,
-            preferences=req.user_preferences
-        )
-        result = await call_ollama(
-            user_prompt,
-            system_prompt=system_prompt,
-            tag=f"{request_id}-primary", 
-            temperature=0.7,
-            thinking=req.model_thinking if req.model_thinking != "none" else None
+            req.privacy_mode,
         )
 
+        llm_prefix, llm_suffix = prepare_prompt_context(req.prefix or "", req.suffix or "")
+        logger.info("[%s] llm_input_prefix=%r", request_tag, llm_prefix)
+        logger.info("[%s] llm_input_suffix=%r", request_tag, llm_suffix)
+
+        system_prompt, user_prompt = build_completion_prompts(
+            req.prefix,
+            req.suffix,
+            req.languageId,
+            location=location,
+            thinking_level=req.model_thinking,
+            preferences=req.user_preferences,
+        )
+
+        inference_task = asyncio.create_task(
+            call_ollama(
+                user_prompt,
+                system_prompt=system_prompt,
+                tag=f"{request_tag}-primary",
+                temperature=0.7,
+                thinking=req.model_thinking if req.model_thinking != "none" else None,
+            )
+        )
+
+        async with ACTIVE_COMPLETIONS_LOCK:
+            existing = ACTIVE_COMPLETIONS.get(request_id)
+            if existing and not existing.done():
+                existing.cancel()
+            ACTIVE_COMPLETIONS[request_id] = inference_task
+
+        result = await inference_task
         content = result["content"] or ""
         if not content.strip():
-            logger.warning("[%s] primary returned empty content, returning empty result", request_id)
+            logger.warning("[%s] primary returned empty content, returning empty result", request_tag)
         logger.info(
-            "[%s] completion resolved source=primary content_chars=%d content_preview='%s'",
+            "[%s] completion resolved source=primary request_id=%s content_chars=%d content_preview='%s'",
+            request_tag,
             request_id,
             len(content),
             _preview(content, 120),
         )
 
         async def generate():
-            yield f"data: {json.dumps({'content': content})}\n\n"
-            yield f"data: {json.dumps({'done': True})}\n\n"
+            yield _sse_payload({"content": content})
+            yield _sse_payload({"done": True})
 
         return StreamingResponse(generate(), media_type="text/event-stream")
+    except asyncio.CancelledError:
+        logger.info("[%s] /v1/completions cancelled request_id=%s", request_tag, request_id)
 
+        async def cancelled():
+            yield _sse_payload({"cancelled": True, "request_id": request_id, "done": True})
+
+        return StreamingResponse(cancelled(), media_type="text/event-stream")
     except Exception as e:
-        logger.exception("[%s] /v1/completions failed: %s", request_id, e)
+        logger.exception("[%s] /v1/completions failed request_id=%s: %s", request_tag, request_id, e)
         return JSONResponse(content={"error": str(e)}, status_code=500)
+    finally:
+        async with ACTIVE_COMPLETIONS_LOCK:
+            active = ACTIVE_COMPLETIONS.get(request_id)
+            if active is not None and active is inference_task:
+                ACTIVE_COMPLETIONS.pop(request_id, None)
+
+
+@app.post("/v1/completions/cancel")
+async def cancel_completion(req: CancelCompletionRequest, api_key: str = Security(get_api_key)):
+    request_tag = str(uuid.uuid4())[:8]
+    request_id = req.request_id or ""
+
+    async with ACTIVE_COMPLETIONS_LOCK:
+        task = ACTIVE_COMPLETIONS.get(request_id)
+        if task is None:
+            logger.info(
+                "[%s] /v1/completions/cancel request_id=%s status=not_found reason=%s",
+                request_tag,
+                request_id,
+                req.reason,
+            )
+            return {"cancelled": False, "status": "not_found"}
+
+        if task.done():
+            logger.info(
+                "[%s] /v1/completions/cancel request_id=%s status=already_done reason=%s",
+                request_tag,
+                request_id,
+                req.reason,
+            )
+            return {"cancelled": False, "status": "already_done"}
+
+        task.cancel()
+
+    logger.info(
+        "[%s] /v1/completions/cancel request_id=%s status=ok reason=%s",
+        request_tag,
+        request_id,
+        req.reason,
+    )
+    return {"cancelled": True, "status": "ok"}
+
 
 @app.post("/v1/ocr")
 async def ocr_image(request: OCRRequest, api_key: str = Security(get_api_key)):
@@ -159,6 +242,8 @@ async def ocr_image(request: OCRRequest, api_key: str = Security(get_api_key)):
         logger.exception("[%s] /v1/ocr failed: %s", request_id, e)
         return JSONResponse(content={"error": str(e)}, status_code=500)
 
+
 if __name__ == "__main__":
     import uvicorn
+
     uvicorn.run(app, host="0.0.0.0", port=8001)
diff --git a/backend/prompt.py b/backend/prompt.py
index 17cba2c..6dafde4 100644
--- a/backend/prompt.py
+++ b/backend/prompt.py
@@ -63,6 +63,14 @@ def _prepare_context(prefix: str, suffix: str) -> Tuple[str, str]:
 
 
 FENCE_LINE_RE = re.compile(r"^[ \t]*```.*$")
+FENCE_INFO_RE = re.compile(r"^[ \t]*```[ \t]*(.*)$")
+MERMAID_CONTEXT_RE = re.compile(
+    r"```[ \t]*mermaid\b|"
+    r"\b(flowchart|sequencediagram|classdiagram|statediagram(?:-v2)?|"
+    r"erdiagram|journey|gantt|pie|mindmap|timeline|gitgraph|quadrantchart|xychart-beta)\b|"
+    r"\bgraph[ \t]+(TD|TB|BT|RL|LR)\b",
+    re.IGNORECASE,
+)
 
 
 def _cursor_in_fenced_code_block(prefix: str) -> bool:
@@ -71,12 +79,48 @@ def _cursor_in_fenced_code_block(prefix: str) -> bool:
     The state is computed by toggling on each markdown fence line that matches:
     ^[ \t]*```.*$
     """
+    return _active_fence_language(prefix) != "none"
+
+
+def _active_fence_language(prefix: str) -> str:
+    """
+    Return active fence language at cursor based on prefix.
+    - "none": cursor is outside fenced code block
+    - "unknown": cursor is inside a fence without language tag
+    - "<language>": cursor is inside a fenced block with language tag
+    """
     normalized = _normalize_newlines(prefix)
     in_fence = False
+    active_language = "none"
     for line in normalized.split("\n"):
         if FENCE_LINE_RE.match(line):
-            in_fence = not in_fence
-    return in_fence
+            if in_fence:
+                in_fence = False
+                active_language = "none"
+            else:
+                info_match = FENCE_INFO_RE.match(line)
+                info = info_match.group(1).strip() if info_match else ""
+                if not info:
+                    active_language = "unknown"
+                else:
+                    first_token = info.split()[0]
+                    lang_chars = []
+                    for ch in first_token.strip():
+                        if ch.isalnum() or ch in "-_+.":
+                            lang_chars.append(ch)
+                    active_language = "".join(lang_chars)[:32].lower() or "unknown"
+                in_fence = True
+    return active_language if in_fence else "none"
+
+
+def _is_mermaid_context(prefix: str, suffix: str, cursor_fence_language: str) -> bool:
+    if cursor_fence_language == "mermaid":
+        return True
+
+    prefix_tail = (prefix or "")[-1200:]
+    suffix_head = (suffix or "")[:400]
+    combined = f"{prefix_tail}\n{suffix_head}"
+    return MERMAID_CONTEXT_RE.search(combined) is not None
 
 
 def prepare_prompt_context(prefix: str, suffix: str) -> Tuple[str, str]:
@@ -113,22 +157,36 @@ Hard constraints you must follow:
   - Do not output code snippets as inline backticks.
   - Choose the language tag from context (no default fallback tag instruction).
 
-4) Boundary newline repair:
+4) Mermaid-specific completion rules:
+- Read CURSOR_FENCE_LANGUAGE and MERMAID_CONTEXT from the user prompt.
+- If CURSOR_FENCE_LANGUAGE=mermaid:
+  - Output Mermaid statements only.
+  - Never output triple backticks.
+  - Never output prose explanations.
+- If CURSOR_IN_FENCED_CODE_BLOCK=false and MERMAID_CONTEXT=true:
+  - Output a complete Mermaid fenced block:
+    ```mermaid
+    ...
+    ```
+  - Keep Mermaid syntax valid and concise.
+- Never mix Mermaid code and explanatory narration in one output.
+
+5) Boundary newline repair:
 - Read PREFIX_ENDS_WITH_NEWLINE and SUFFIX_STARTS_WITH_NEWLINE from the user prompt.
 - Carefully reason about whether OUTPUT should start or end with a newline.
 - If PREFIX lacks a required boundary newline, add it at OUTPUT start.
 - If SUFFIX lacks a required boundary newline, add it at OUTPUT end.
 - Ensure PREFIX + OUTPUT + SUFFIX is structurally natural.
 
-5) Context stitching:
+6) Context stitching:
 - Do not repeat text that already appears at the start of SUFFIX.
 - Preserve nearby language, tone, punctuation, indentation, and markdown structure.
 - Continue existing structures naturally (lists, tables, block quotes, headings).
 
-6) OCR safety:
+7) OCR safety:
 - PREFIX may include hidden OCR metadata tags like <OCR:...>.
 - Never output any OCR tag.
-- Never output strings containing <OCR: or > as OCR artifacts."""
+- Never output OCR tag fragments such as <OCR:...>."""
     return system_prompt.strip()
 
 
@@ -227,6 +285,29 @@ The area is $A = \\pi r^2$.
 
 ```javascript
 const area = (r) => Math.PI * r * r;
+```
+
+[EX13] Cursor inside mermaid fence: no backticks, mermaid lines only
+CURSOR_IN_FENCED_CODE_BLOCK=true
+CURSOR_FENCE_LANGUAGE=mermaid
+<PREFIX>```mermaid
+flowchart TD
+A[Start] --> </PREFIX>
+<SUFFIX>
+```</SUFFIX>
+Expected OUTPUT:
+B{Valid?}
+B -->|Yes| C[Done]
+
+[EX14] Mermaid context outside fence: return full mermaid block
+CURSOR_IN_FENCED_CODE_BLOCK=false
+MERMAID_CONTEXT=true
+<PREFIX>Please provide a simple release pipeline diagram.</PREFIX>
+<SUFFIX></SUFFIX>
+Expected OUTPUT:
+```mermaid
+flowchart LR
+Build --> Test --> Deploy
 ```"""
 
 
@@ -243,7 +324,11 @@ def build_completion_prompts(
     recent_prefix = _normalize_newlines(recent_prefix)
     recent_suffix = _normalize_newlines(recent_suffix)
 
-    cursor_in_fenced_code_block = _cursor_in_fenced_code_block(recent_prefix)
+    cursor_fence_language = _active_fence_language(recent_prefix)
+    cursor_in_fenced_code_block = cursor_fence_language != "none"
+    mermaid_context = _is_mermaid_context(
+        recent_prefix, recent_suffix, cursor_fence_language
+    )
     prefix_ends_with_newline = recent_prefix.endswith("\n")
     suffix_starts_with_newline = recent_suffix.startswith("\n")
 
@@ -268,6 +353,8 @@ Editor language id: {safe_language_id}
 
 Completion state flags:
 - CURSOR_IN_FENCED_CODE_BLOCK: {"true" if cursor_in_fenced_code_block else "false"}
+- CURSOR_FENCE_LANGUAGE: {cursor_fence_language}
+- MERMAID_CONTEXT: {"true" if mermaid_context else "false"}
 - PREFIX_ENDS_WITH_NEWLINE: {"true" if prefix_ends_with_newline else "false"}
 - SUFFIX_STARTS_WITH_NEWLINE: {"true" if suffix_starts_with_newline else "false"}
 
diff --git a/backend/tests/test_main_cancel.py b/backend/tests/test_main_cancel.py
new file mode 100644
index 0000000..a4c6d55
--- /dev/null
+++ b/backend/tests/test_main_cancel.py
@@ -0,0 +1,118 @@
+import asyncio
+import importlib
+import sys
+import threading
+from pathlib import Path
+
+import pytest
+from fastapi.testclient import TestClient
+
+
+BACKEND_DIR = Path(__file__).resolve().parents[1]
+if str(BACKEND_DIR) not in sys.path:
+    sys.path.insert(0, str(BACKEND_DIR))
+
+try:
+    main = importlib.import_module("main")
+except ModuleNotFoundError:
+    pytest.skip("main module dependencies are not available", allow_module_level=True)
+
+
+API_KEY_HEADERS = {"X-API-Key": "your-secret-key-here"}
+
+
+def _completion_payload():
+    return {
+        "prefix": "hello",
+        "suffix": "",
+        "languageId": "markdown",
+        "model_thinking": "low",
+        "privacy_mode": True,
+    }
+
+
+def test_cancel_endpoint_cancels_running_task(monkeypatch):
+    main.ACTIVE_COMPLETIONS.clear()
+    started = threading.Event()
+    cancelled = threading.Event()
+
+    async def fake_call_ollama(*args, **kwargs):
+        started.set()
+        try:
+            while True:
+                await asyncio.sleep(0.05)
+        except asyncio.CancelledError:
+            cancelled.set()
+            raise
+
+    monkeypatch.setattr(main, "call_ollama", fake_call_ollama)
+    monkeypatch.setattr(main, "build_completion_prompts", lambda *a, **k: ("system", "user"))
+    monkeypatch.setattr(main, "prepare_prompt_context", lambda *a, **k: ("prefix", "suffix"))
+
+    with TestClient(main.app) as client:
+        request_id = "req-cancel-1"
+        completion_headers = {**API_KEY_HEADERS, "X-Request-Id": request_id}
+        response_box = {}
+
+        def send_completion():
+            response_box["response"] = client.post(
+                "/v1/completions",
+                headers=completion_headers,
+                json=_completion_payload(),
+            )
+
+        completion_thread = threading.Thread(target=send_completion, daemon=True)
+        completion_thread.start()
+
+        assert started.wait(timeout=2.0)
+
+        cancel_response = client.post(
+            "/v1/completions/cancel",
+            headers=API_KEY_HEADERS,
+            json={"request_id": request_id, "reason": "superseded"},
+        )
+        assert cancel_response.status_code == 200
+        assert cancel_response.json() == {"cancelled": True, "status": "ok"}
+
+        completion_thread.join(timeout=5.0)
+        assert not completion_thread.is_alive()
+        assert cancelled.wait(timeout=2.0)
+
+        completion_response = response_box["response"]
+        assert completion_response.status_code == 200
+        assert '"cancelled": true' in completion_response.text
+
+
+def test_cancel_not_found():
+    main.ACTIVE_COMPLETIONS.clear()
+    with TestClient(main.app) as client:
+        response = client.post(
+            "/v1/completions/cancel",
+            headers=API_KEY_HEADERS,
+            json={"request_id": "missing", "reason": "abort"},
+        )
+    assert response.status_code == 200
+    assert response.json() == {"cancelled": False, "status": "not_found"}
+
+
+def test_completion_normal_flow(monkeypatch):
+    main.ACTIVE_COMPLETIONS.clear()
+
+    async def fake_call_ollama(*args, **kwargs):
+        return {"content": "completion text", "think": ""}
+
+    monkeypatch.setattr(main, "call_ollama", fake_call_ollama)
+    monkeypatch.setattr(main, "build_completion_prompts", lambda *a, **k: ("system", "user"))
+    monkeypatch.setattr(main, "prepare_prompt_context", lambda *a, **k: ("prefix", "suffix"))
+
+    with TestClient(main.app) as client:
+        response = client.post(
+            "/v1/completions",
+            headers=API_KEY_HEADERS,
+            json=_completion_payload(),
+        )
+
+    assert response.status_code == 200
+    assert '"content": "completion text"' in response.text
+    assert '"done": true' in response.text
+    assert main.ACTIVE_COMPLETIONS == {}
diff --git a/backend/tests/test_prompt.py b/backend/tests/test_prompt.py
index 8a2daa7..389807d 100644
--- a/backend/tests/test_prompt.py
+++ b/backend/tests/test_prompt.py
@@ -21,7 +21,13 @@ def test_prompt_builds_system_and_user():
     assert "$...$" in system_prompt
     assert "$$...$$" in system_prompt
     assert "```{language}" in system_prompt
+    assert "Mermaid-specific completion rules" in system_prompt
+    assert "CURSOR_FENCE_LANGUAGE" in system_prompt
+    assert "MERMAID_CONTEXT" in system_prompt
+    assert "Output Mermaid statements only." in system_prompt
     assert "CURSOR_IN_FENCED_CODE_BLOCK" in user_prompt
+    assert "CURSOR_FENCE_LANGUAGE" in user_prompt
+    assert "MERMAID_CONTEXT" in user_prompt
     assert "PREFIX_ENDS_WITH_NEWLINE" in user_prompt
     assert "SUFFIX_STARTS_WITH_NEWLINE" in user_prompt
 
@@ -33,12 +39,22 @@ def test_cursor_in_fence_detection():
     assert prompt._cursor_in_fenced_code_block("text ```not-a-fence``` tail") is False
 
 
+def test_active_fence_language_detection():
+    assert prompt._active_fence_language("") == "none"
+    assert prompt._active_fence_language("```mermaid\nflowchart TD\nA-->B\n") == "mermaid"
+    assert prompt._active_fence_language("```python\nprint('x')\n") == "python"
+    assert prompt._active_fence_language("```\nline\n") == "unknown"
+    assert prompt._active_fence_language("```mermaid\nA-->B\n```\n") == "none"
+
+
 def test_newline_flags():
     _, user_prompt_a = prompt.build_completion_prompts(
         prefix="Hello",
         suffix="World",
     )
     assert "CURSOR_IN_FENCED_CODE_BLOCK: false" in user_prompt_a
+    assert "CURSOR_FENCE_LANGUAGE: none" in user_prompt_a
+    assert "MERMAID_CONTEXT: false" in user_prompt_a
     assert "PREFIX_ENDS_WITH_NEWLINE: false" in user_prompt_a
     assert "SUFFIX_STARTS_WITH_NEWLINE: false" in user_prompt_a
 
@@ -46,11 +62,30 @@ def test_newline_flags():
         prefix="Hello\n",
         suffix="\nWorld",
     )
+    assert "CURSOR_FENCE_LANGUAGE: none" in user_prompt_b
     assert "PREFIX_ENDS_WITH_NEWLINE: true" in user_prompt_b
     assert "SUFFIX_STARTS_WITH_NEWLINE: true" in user_prompt_b
 
 
+def test_mermaid_context_flags():
+    _, prompt_in_mermaid = prompt.build_completion_prompts(
+        prefix="```mermaid\nflowchart TD\nA --> ",
+        suffix="\n```",
+    )
+    assert "CURSOR_IN_FENCED_CODE_BLOCK: true" in prompt_in_mermaid
+    assert "CURSOR_FENCE_LANGUAGE: mermaid" in prompt_in_mermaid
+    assert "MERMAID_CONTEXT: true" in prompt_in_mermaid
+
+    _, prompt_mermaid_keyword = prompt.build_completion_prompts(
+        prefix="Please draw a mermaid flowchart for deploy pipeline.",
+        suffix="",
+    )
+    assert "CURSOR_IN_FENCED_CODE_BLOCK: false" in prompt_mermaid_keyword
+    assert "CURSOR_FENCE_LANGUAGE: none" in prompt_mermaid_keyword
+    assert "MERMAID_CONTEXT: true" in prompt_mermaid_keyword
+
+
 def test_examples_coverage():
     _, user_prompt = prompt.build_completion_prompts(prefix="", suffix="")
-    for ex in range(1, 13):
+    for ex in range(1, 15):
         assert f"[EX{ex:02d}]" in user_prompt
diff --git a/package-lock.json b/package-lock.json
index 300ddcc..a7c3b64 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -16,6 +16,7 @@
         "katex": "^0.16.9",
         "markdown-it": "^13.0.0",
         "markdown-it-math": "^3.0.2",
+        "mermaid": "^11.12.3",
         "pinia": "^2.3.1",
         "prismjs": "^1.29.0",
         "vue": "^3.5.24",
@@ -26,6 +27,19 @@
         "vite": "^7.2.4"
       }
     },
+    "node_modules/@antfu/install-pkg": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/@antfu/install-pkg/-/install-pkg-1.1.0.tgz",
+      "integrity": "sha512-MGQsmw10ZyI+EJo45CdSER4zEb+p31LpDAFp2Z3gkSd1yqVZGi0Ebx++YTEMonJy4oChEMLsxZ64j8FH6sSqtQ==",
+      "license": "MIT",
+      "dependencies": {
+        "package-manager-detector": "^1.3.0",
+        "tinyexec": "^1.0.1"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/antfu"
+      }
+    },
     "node_modules/@babel/helper-string-parser": {
       "version": "7.27.1",
       "resolved": "https://registry.npmjs.org/@babel/helper-string-parser/-/helper-string-parser-7.27.1.tgz",
@@ -72,6 +86,51 @@
         "node": ">=6.9.0"
       }
     },
+    "node_modules/@braintree/sanitize-url": {
+      "version": "7.1.2",
+      "resolved": "https://registry.npmjs.org/@braintree/sanitize-url/-/sanitize-url-7.1.2.tgz",
+      "integrity": "sha512-jigsZK+sMF/cuiB7sERuo9V7N9jx+dhmHHnQyDSVdpZwVutaBu7WvNYqMDLSgFgfB30n452TP3vjDAvFC973mA==",
+      "license": "MIT"
+    },
+    "node_modules/@chevrotain/cst-dts-gen": {
+      "version": "11.1.1",
+      "resolved": "https://registry.npmjs.org/@chevrotain/cst-dts-gen/-/cst-dts-gen-11.1.1.tgz",
+      "integrity": "sha512-fRHyv6/f542qQqiRGalrfJl/evD39mAvbJLCekPazhiextEatq1Jx1K/i9gSd5NNO0ds03ek0Cbo/4uVKmOBcw==",
+      "license": "Apache-2.0",
+      "dependencies": {
+        "@chevrotain/gast": "11.1.1",
+        "@chevrotain/types": "11.1.1",
+        "lodash-es": "4.17.23"
+      }
+    },
+    "node_modules/@chevrotain/gast": {
+      "version": "11.1.1",
+      "resolved": "https://registry.npmjs.org/@chevrotain/gast/-/gast-11.1.1.tgz",
+      "integrity": "sha512-Ko/5vPEYy1vn5CbCjjvnSO4U7GgxyGm+dfUZZJIWTlQFkXkyym0jFYrWEU10hyCjrA7rQtiHtBr0EaZqvHFZvg==",
+      "license": "Apache-2.0",
+      "dependencies": {
+        "@chevrotain/types": "11.1.1",
+        "lodash-es": "4.17.23"
+      }
+    },
+    "node_modules/@chevrotain/regexp-to-ast": {
+      "version": "11.1.1",
+      "resolved": "https://registry.npmjs.org/@chevrotain/regexp-to-ast/-/regexp-to-ast-11.1.1.tgz",
+      "integrity": "sha512-ctRw1OKSXkOrR8VTvOxrQ5USEc4sNrfwXHa1NuTcR7wre4YbjPcKw+82C2uylg/TEwFRgwLmbhlln4qkmDyteg==",
+      "license": "Apache-2.0"
+    },
+    "node_modules/@chevrotain/types": {
+      "version": "11.1.1",
+      "resolved": "https://registry.npmjs.org/@chevrotain/types/-/types-11.1.1.tgz",
+      "integrity": "sha512-wb2ToxG8LkgPYnKe9FH8oGn3TMCBdnwiuNC5l5y+CtlaVRbCytU0kbVsk6CGrqTL4ZN4ksJa0TXOYbxpbthtqw==",
+      "license": "Apache-2.0"
+    },
+    "node_modules/@chevrotain/utils": {
+      "version": "11.1.1",
+      "resolved": "https://registry.npmjs.org/@chevrotain/utils/-/utils-11.1.1.tgz",
+      "integrity": "sha512-71eTYMzYXYSFPrbg/ZwftSaSDld7UYlS8OQa3lNnn9jzNtpFbaReRRyghzqS7rI3CDaorqpPJJcXGHK+FE1TVQ==",
+      "license": "Apache-2.0"
+    },
     "node_modules/@codemirror/autocomplete": {
       "version": "6.20.0",
       "resolved": "https://registry.npmjs.org/@codemirror/autocomplete/-/autocomplete-6.20.0.tgz",
@@ -918,6 +977,23 @@
       "resolved": "https://registry.npmjs.org/@floating-ui/utils/-/utils-0.2.10.tgz",
       "integrity": "sha512-aGTxbpbg8/b5JfU1HXSrbH3wXZuLPJcNEcZQFMxLs3oSzgtVu6nFPkbbGGUvBcUjKV2YyB9Wxxabo+HEH9tcRQ=="
     },
+    "node_modules/@iconify/types": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/@iconify/types/-/types-2.0.0.tgz",
+      "integrity": "sha512-+wluvCrRhXrhyOmRDJ3q8mux9JkKy5SJ/v8ol2tu4FVjyYvtEzkc/3pK15ET6RKg4b4w4BmTk1+gsCUhf21Ykg==",
+      "license": "MIT"
+    },
+    "node_modules/@iconify/utils": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/@iconify/utils/-/utils-3.1.0.tgz",
+      "integrity": "sha512-Zlzem1ZXhI1iHeeERabLNzBHdOa4VhQbqAcOQaMKuTuyZCpwKbC2R4Dd0Zo3g9EAc+Y4fiarO8HIHRAth7+skw==",
+      "license": "MIT",
+      "dependencies": {
+        "@antfu/install-pkg": "^1.1.0",
+        "@iconify/types": "^2.0.0",
+        "mlly": "^1.8.0"
+      }
+    },
     "node_modules/@jridgewell/sourcemap-codec": {
       "version": "1.5.5",
       "resolved": "https://registry.npmjs.org/@jridgewell/sourcemap-codec/-/sourcemap-codec-1.5.5.tgz",
@@ -1089,6 +1165,15 @@
       "resolved": "https://registry.npmjs.org/@marijn/find-cluster-break/-/find-cluster-break-1.0.2.tgz",
       "integrity": "sha512-l0h88YhZFyKdXIFNfSWpyjStDjGHwZ/U7iobcK1cQQD8sejsONdQtTVU+1wVN1PBw40PiiHB1vA5S7VTfQiP9g=="
     },
+    "node_modules/@mermaid-js/parser": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/@mermaid-js/parser/-/parser-1.0.0.tgz",
+      "integrity": "sha512-vvK0Hi/VWndxoh03Mmz6wa1KDriSPjS2XMZL/1l19HFwygiObEEoEwSDxOqyLzzAI6J2PU3261JjTMTO7x+BPw==",
+      "license": "MIT",
+      "dependencies": {
+        "langium": "^4.0.0"
+      }
+    },
     "node_modules/@milkdown/components": {
       "version": "7.18.0",
       "resolved": "https://registry.npmjs.org/@milkdown/components/-/components-7.18.0.tgz",
@@ -1811,6 +1896,259 @@
         "win32"
       ]
     },
+    "node_modules/@types/d3": {
+      "version": "7.4.3",
+      "resolved": "https://registry.npmjs.org/@types/d3/-/d3-7.4.3.tgz",
+      "integrity": "sha512-lZXZ9ckh5R8uiFVt8ogUNf+pIrK4EsWrx2Np75WvF/eTpJ0FMHNhjXk8CKEx/+gpHbNQyJWehbFaTvqmHWB3ww==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/d3-array": "*",
+        "@types/d3-axis": "*",
+        "@types/d3-brush": "*",
+        "@types/d3-chord": "*",
+        "@types/d3-color": "*",
+        "@types/d3-contour": "*",
+        "@types/d3-delaunay": "*",
+        "@types/d3-dispatch": "*",
+        "@types/d3-drag": "*",
+        "@types/d3-dsv": "*",
+        "@types/d3-ease": "*",
+        "@types/d3-fetch": "*",
+        "@types/d3-force": "*",
+        "@types/d3-format": "*",
+        "@types/d3-geo": "*",
+        "@types/d3-hierarchy": "*",
+        "@types/d3-interpolate": "*",
+        "@types/d3-path": "*",
+        "@types/d3-polygon": "*",
+        "@types/d3-quadtree": "*",
+        "@types/d3-random": "*",
+        "@types/d3-scale": "*",
+        "@types/d3-scale-chromatic": "*",
+        "@types/d3-selection": "*",
+        "@types/d3-shape": "*",
+        "@types/d3-time": "*",
+        "@types/d3-time-format": "*",
+        "@types/d3-timer": "*",
+        "@types/d3-transition": "*",
+        "@types/d3-zoom": "*"
+      }
+    },
+    "node_modules/@types/d3-array": {
+      "version": "3.2.2",
+      "resolved": "https://registry.npmjs.org/@types/d3-array/-/d3-array-3.2.2.tgz",
+      "integrity": "sha512-hOLWVbm7uRza0BYXpIIW5pxfrKe0W+D5lrFiAEYR+pb6w3N2SwSMaJbXdUfSEv+dT4MfHBLtn5js0LAWaO6otw==",
+      "license": "MIT"
+    },
+    "node_modules/@types/d3-axis": {
+      "version": "3.0.6",
+      "resolved": "https://registry.npmjs.org/@types/d3-axis/-/d3-axis-3.0.6.tgz",
+      "integrity": "sha512-pYeijfZuBd87T0hGn0FO1vQ/cgLk6E1ALJjfkC0oJ8cbwkZl3TpgS8bVBLZN+2jjGgg38epgxb2zmoGtSfvgMw==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/d3-selection": "*"
+      }
+    },
+    "node_modules/@types/d3-brush": {
+      "version": "3.0.6",
+      "resolved": "https://registry.npmjs.org/@types/d3-brush/-/d3-brush-3.0.6.tgz",
+      "integrity": "sha512-nH60IZNNxEcrh6L1ZSMNA28rj27ut/2ZmI3r96Zd+1jrZD++zD3LsMIjWlvg4AYrHn/Pqz4CF3veCxGjtbqt7A==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/d3-selection": "*"
+      }
+    },
+    "node_modules/@types/d3-chord": {
+      "version": "3.0.6",
+      "resolved": "https://registry.npmjs.org/@types/d3-chord/-/d3-chord-3.0.6.tgz",
+      "integrity": "sha512-LFYWWd8nwfwEmTZG9PfQxd17HbNPksHBiJHaKuY1XeqscXacsS2tyoo6OdRsjf+NQYeB6XrNL3a25E3gH69lcg==",
+      "license": "MIT"
+    },
+    "node_modules/@types/d3-color": {
+      "version": "3.1.3",
+      "resolved": "https://registry.npmjs.org/@types/d3-color/-/d3-color-3.1.3.tgz",
+      "integrity": "sha512-iO90scth9WAbmgv7ogoq57O9YpKmFBbmoEoCHDB2xMBY0+/KVrqAaCDyCE16dUspeOvIxFFRI+0sEtqDqy2b4A==",
+      "license": "MIT"
+    },
+    "node_modules/@types/d3-contour": {
+      "version": "3.0.6",
+      "resolved": "https://registry.npmjs.org/@types/d3-contour/-/d3-contour-3.0.6.tgz",
+      "integrity": "sha512-BjzLgXGnCWjUSYGfH1cpdo41/hgdWETu4YxpezoztawmqsvCeep+8QGfiY6YbDvfgHz/DkjeIkkZVJavB4a3rg==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/d3-array": "*",
+        "@types/geojson": "*"
+      }
+    },
+    "node_modules/@types/d3-delaunay": {
+      "version": "6.0.4",
+      "resolved": "https://registry.npmjs.org/@types/d3-delaunay/-/d3-delaunay-6.0.4.tgz",
+      "integrity": "sha512-ZMaSKu4THYCU6sV64Lhg6qjf1orxBthaC161plr5KuPHo3CNm8DTHiLw/5Eq2b6TsNP0W0iJrUOFscY6Q450Hw==",
+      "license": "MIT"
+    },
+    "node_modules/@types/d3-dispatch": {
+      "version": "3.0.7",
+      "resolved": "https://registry.npmjs.org/@types/d3-dispatch/-/d3-dispatch-3.0.7.tgz",
+      "integrity": "sha512-5o9OIAdKkhN1QItV2oqaE5KMIiXAvDWBDPrD85e58Qlz1c1kI/J0NcqbEG88CoTwJrYe7ntUCVfeUl2UJKbWgA==",
+      "license": "MIT"
+    },
+    "node_modules/@types/d3-drag": {
+      "version": "3.0.7",
+      "resolved": "https://registry.npmjs.org/@types/d3-drag/-/d3-drag-3.0.7.tgz",
+      "integrity": "sha512-HE3jVKlzU9AaMazNufooRJ5ZpWmLIoc90A37WU2JMmeq28w1FQqCZswHZ3xR+SuxYftzHq6WU6KJHvqxKzTxxQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/d3-selection": "*"
+      }
+    },
+    "node_modules/@types/d3-dsv": {
+      "version": "3.0.7",
+      "resolved": "https://registry.npmjs.org/@types/d3-dsv/-/d3-dsv-3.0.7.tgz",
+      "integrity": "sha512-n6QBF9/+XASqcKK6waudgL0pf/S5XHPPI8APyMLLUHd8NqouBGLsU8MgtO7NINGtPBtk9Kko/W4ea0oAspwh9g==",
+      "license": "MIT"
+    },
+    "node_modules/@types/d3-ease": {
+      "version": "3.0.2",
+      "resolved": "https://registry.npmjs.org/@types/d3-ease/-/d3-ease-3.0.2.tgz",
+      "integrity": "sha512-NcV1JjO5oDzoK26oMzbILE6HW7uVXOHLQvHshBUW4UMdZGfiY6v5BeQwh9a9tCzv+CeefZQHJt5SRgK154RtiA==",
+      "license": "MIT"
+    },
+    "node_modules/@types/d3-fetch": {
+      "version": "3.0.7",
+      "resolved": "https://registry.npmjs.org/@types/d3-fetch/-/d3-fetch-3.0.7.tgz",
+      "integrity": "sha512-fTAfNmxSb9SOWNB9IoG5c8Hg6R+AzUHDRlsXsDZsNp6sxAEOP0tkP3gKkNSO/qmHPoBFTxNrjDprVHDQDvo5aA==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/d3-dsv": "*"
+      }
+    },
+    "node_modules/@types/d3-force": {
+      "version": "3.0.10",
+      "resolved": "https://registry.npmjs.org/@types/d3-force/-/d3-force-3.0.10.tgz",
+      "integrity": "sha512-ZYeSaCF3p73RdOKcjj+swRlZfnYpK1EbaDiYICEEp5Q6sUiqFaFQ9qgoshp5CzIyyb/yD09kD9o2zEltCexlgw==",
+      "license": "MIT"
+    },
+    "node_modules/@types/d3-format": {
+      "version": "3.0.4",
+      "resolved": "https://registry.npmjs.org/@types/d3-format/-/d3-format-3.0.4.tgz",
+      "integrity": "sha512-fALi2aI6shfg7vM5KiR1wNJnZ7r6UuggVqtDA+xiEdPZQwy/trcQaHnwShLuLdta2rTymCNpxYTiMZX/e09F4g==",
+      "license": "MIT"
+    },
+    "node_modules/@types/d3-geo": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/@types/d3-geo/-/d3-geo-3.1.0.tgz",
+      "integrity": "sha512-856sckF0oP/diXtS4jNsiQw/UuK5fQG8l/a9VVLeSouf1/PPbBE1i1W852zVwKwYCBkFJJB7nCFTbk6UMEXBOQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/geojson": "*"
+      }
+    },
+    "node_modules/@types/d3-hierarchy": {
+      "version": "3.1.7",
+      "resolved": "https://registry.npmjs.org/@types/d3-hierarchy/-/d3-hierarchy-3.1.7.tgz",
+      "integrity": "sha512-tJFtNoYBtRtkNysX1Xq4sxtjK8YgoWUNpIiUee0/jHGRwqvzYxkq0hGVbbOGSz+JgFxxRu4K8nb3YpG3CMARtg==",
+      "license": "MIT"
+    },
+    "node_modules/@types/d3-interpolate": {
+      "version": "3.0.4",
+      "resolved": "https://registry.npmjs.org/@types/d3-interpolate/-/d3-interpolate-3.0.4.tgz",
+      "integrity": "sha512-mgLPETlrpVV1YRJIglr4Ez47g7Yxjl1lj7YKsiMCb27VJH9W8NVM6Bb9d8kkpG/uAQS5AmbA48q2IAolKKo1MA==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/d3-color": "*"
+      }
+    },
+    "node_modules/@types/d3-path": {
+      "version": "3.1.1",
+      "resolved": "https://registry.npmjs.org/@types/d3-path/-/d3-path-3.1.1.tgz",
+      "integrity": "sha512-VMZBYyQvbGmWyWVea0EHs/BwLgxc+MKi1zLDCONksozI4YJMcTt8ZEuIR4Sb1MMTE8MMW49v0IwI5+b7RmfWlg==",
+      "license": "MIT"
+    },
+    "node_modules/@types/d3-polygon": {
+      "version": "3.0.2",
+      "resolved": "https://registry.npmjs.org/@types/d3-polygon/-/d3-polygon-3.0.2.tgz",
+      "integrity": "sha512-ZuWOtMaHCkN9xoeEMr1ubW2nGWsp4nIql+OPQRstu4ypeZ+zk3YKqQT0CXVe/PYqrKpZAi+J9mTs05TKwjXSRA==",
+      "license": "MIT"
+    },
+    "node_modules/@types/d3-quadtree": {
+      "version": "3.0.6",
+      "resolved": "https://registry.npmjs.org/@types/d3-quadtree/-/d3-quadtree-3.0.6.tgz",
+      "integrity": "sha512-oUzyO1/Zm6rsxKRHA1vH0NEDG58HrT5icx/azi9MF1TWdtttWl0UIUsjEQBBh+SIkrpd21ZjEv7ptxWys1ncsg==",
+      "license": "MIT"
+    },
+    "node_modules/@types/d3-random": {
+      "version": "3.0.3",
+      "resolved": "https://registry.npmjs.org/@types/d3-random/-/d3-random-3.0.3.tgz",
+      "integrity": "sha512-Imagg1vJ3y76Y2ea0871wpabqp613+8/r0mCLEBfdtqC7xMSfj9idOnmBYyMoULfHePJyxMAw3nWhJxzc+LFwQ==",
+      "license": "MIT"
+    },
+    "node_modules/@types/d3-scale": {
+      "version": "4.0.9",
+      "resolved": "https://registry.npmjs.org/@types/d3-scale/-/d3-scale-4.0.9.tgz",
+      "integrity": "sha512-dLmtwB8zkAeO/juAMfnV+sItKjlsw2lKdZVVy6LRr0cBmegxSABiLEpGVmSJJ8O08i4+sGR6qQtb6WtuwJdvVw==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/d3-time": "*"
+      }
+    },
+    "node_modules/@types/d3-scale-chromatic": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/@types/d3-scale-chromatic/-/d3-scale-chromatic-3.1.0.tgz",
+      "integrity": "sha512-iWMJgwkK7yTRmWqRB5plb1kadXyQ5Sj8V/zYlFGMUBbIPKQScw+Dku9cAAMgJG+z5GYDoMjWGLVOvjghDEFnKQ==",
+      "license": "MIT"
+    },
+    "node_modules/@types/d3-selection": {
+      "version": "3.0.11",
+      "resolved": "https://registry.npmjs.org/@types/d3-selection/-/d3-selection-3.0.11.tgz",
+      "integrity": "sha512-bhAXu23DJWsrI45xafYpkQ4NtcKMwWnAC/vKrd2l+nxMFuvOT3XMYTIj2opv8vq8AO5Yh7Qac/nSeP/3zjTK0w==",
+      "license": "MIT"
+    },
+    "node_modules/@types/d3-shape": {
+      "version": "3.1.8",
+      "resolved": "https://registry.npmjs.org/@types/d3-shape/-/d3-shape-3.1.8.tgz",
+      "integrity": "sha512-lae0iWfcDeR7qt7rA88BNiqdvPS5pFVPpo5OfjElwNaT2yyekbM0C9vK+yqBqEmHr6lDkRnYNoTBYlAgJa7a4w==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/d3-path": "*"
+      }
+    },
+    "node_modules/@types/d3-time": {
+      "version": "3.0.4",
+      "resolved": "https://registry.npmjs.org/@types/d3-time/-/d3-time-3.0.4.tgz",
+      "integrity": "sha512-yuzZug1nkAAaBlBBikKZTgzCeA+k1uy4ZFwWANOfKw5z5LRhV0gNA7gNkKm7HoK+HRN0wX3EkxGk0fpbWhmB7g==",
+      "license": "MIT"
+    },
+    "node_modules/@types/d3-time-format": {
+      "version": "4.0.3",
+      "resolved": "https://registry.npmjs.org/@types/d3-time-format/-/d3-time-format-4.0.3.tgz",
+      "integrity": "sha512-5xg9rC+wWL8kdDj153qZcsJ0FWiFt0J5RB6LYUNZjwSnesfblqrI/bJ1wBdJ8OQfncgbJG5+2F+qfqnqyzYxyg==",
+      "license": "MIT"
+    },
+    "node_modules/@types/d3-timer": {
+      "version": "3.0.2",
+      "resolved": "https://registry.npmjs.org/@types/d3-timer/-/d3-timer-3.0.2.tgz",
+      "integrity": "sha512-Ps3T8E8dZDam6fUyNiMkekK3XUsaUEik+idO9/YjPtfj2qruF8tFBXS7XhtE4iIXBLxhmLjP3SXpLhVf21I9Lw==",
+      "license": "MIT"
+    },
+    "node_modules/@types/d3-transition": {
+      "version": "3.0.9",
+      "resolved": "https://registry.npmjs.org/@types/d3-transition/-/d3-transition-3.0.9.tgz",
+      "integrity": "sha512-uZS5shfxzO3rGlu0cC3bjmMFKsXv+SmZZcgp0KD22ts4uGXp5EVYGzu/0YdwZeKmddhcAccYtREJKkPfXkZuCg==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/d3-selection": "*"
+      }
+    },
+    "node_modules/@types/d3-zoom": {
+      "version": "3.0.8",
+      "resolved": "https://registry.npmjs.org/@types/d3-zoom/-/d3-zoom-3.0.8.tgz",
+      "integrity": "sha512-iqMC4/YlFCSlO8+2Ii1GGGliCAY4XdeG748w5vQUbevlbDu0zSjH/+jojorQVBK/se0j6DUFNPBGSqD3YWYnDw==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/d3-interpolate": "*",
+        "@types/d3-selection": "*"
+      }
+    },
     "node_modules/@types/debug": {
       "version": "4.1.12",
       "resolved": "https://registry.npmjs.org/@types/debug/-/debug-4.1.12.tgz",
@@ -1826,6 +2164,12 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/@types/geojson": {
+      "version": "7946.0.16",
+      "resolved": "https://registry.npmjs.org/@types/geojson/-/geojson-7946.0.16.tgz",
+      "integrity": "sha512-6C8nqWur3j98U6+lXDfTUWIfgvZU+EumvpHKcYjujKH7woYyLj2sUmff0tRhrqM7BohUw7Pz3ZB1jj2gW9Fvmg==",
+      "license": "MIT"
+    },
     "node_modules/@types/hast": {
       "version": "3.0.4",
       "resolved": "https://registry.npmjs.org/@types/hast/-/hast-3.0.4.tgz",
@@ -2650,6 +2994,33 @@
         "url": "https://github.com/sponsors/wooorm"
       }
     },
+    "node_modules/chevrotain": {
+      "version": "11.1.1",
+      "resolved": "https://registry.npmjs.org/chevrotain/-/chevrotain-11.1.1.tgz",
+      "integrity": "sha512-f0yv5CPKaFxfsPTBzX7vGuim4oIC1/gcS7LUGdBSwl2dU6+FON6LVUksdOo1qJjoUvXNn45urgh8C+0a24pACQ==",
+      "license": "Apache-2.0",
+      "peer": true,
+      "dependencies": {
+        "@chevrotain/cst-dts-gen": "11.1.1",
+        "@chevrotain/gast": "11.1.1",
+        "@chevrotain/regexp-to-ast": "11.1.1",
+        "@chevrotain/types": "11.1.1",
+        "@chevrotain/utils": "11.1.1",
+        "lodash-es": "4.17.23"
+      }
+    },
+    "node_modules/chevrotain-allstar": {
+      "version": "0.3.1",
+      "resolved": "https://registry.npmjs.org/chevrotain-allstar/-/chevrotain-allstar-0.3.1.tgz",
+      "integrity": "sha512-b7g+y9A0v4mxCW1qUhf3BSVPg+/NvGErk/dOkrDaHA0nQIQGAtrOjlX//9OQtRlSCy+x9rfB5N8yC71lH1nvMw==",
+      "license": "MIT",
+      "dependencies": {
+        "lodash-es": "^4.17.21"
+      },
+      "peerDependencies": {
+        "chevrotain": "^11.0.0"
+      }
+    },
     "node_modules/chokidar": {
       "version": "1.7.0",
       "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-1.7.0.tgz",
@@ -2886,6 +3257,12 @@
       "license": "MIT",
       "optional": true
     },
+    "node_modules/confbox": {
+      "version": "0.1.8",
+      "resolved": "https://registry.npmjs.org/confbox/-/confbox-0.1.8.tgz",
+      "integrity": "sha512-RMtmw0iFkeR4YV+fUOSucriAQNb9g8zFR52MWCtl+cCZOFRNL6zeB395vPzFhEjjn4fMxXudmELnl/KF/WrK6w==",
+      "license": "MIT"
+    },
     "node_modules/convert-source-map": {
       "version": "1.9.0",
       "resolved": "https://registry.npmjs.org/convert-source-map/-/convert-source-map-1.9.0.tgz",
@@ -2918,6 +3295,15 @@
       "license": "MIT",
       "optional": true
     },
+    "node_modules/cose-base": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/cose-base/-/cose-base-1.0.3.tgz",
+      "integrity": "sha512-s9whTXInMSgAp/NVXVNuVxVKzGH2qck3aQlVHxDCdAEPgtMKwc4Wq6/QKhgdEdgbLSi9rBTAcPoRa6JpiG4ksg==",
+      "license": "MIT",
+      "dependencies": {
+        "layout-base": "^1.0.0"
+      }
+    },
     "node_modules/crelt": {
       "version": "1.0.6",
       "resolved": "https://registry.npmjs.org/crelt/-/crelt-1.0.6.tgz",
@@ -2929,6 +3315,534 @@
       "integrity": "sha512-z1HGKcYy2xA8AGQfwrn0PAy+PB7X/GSj3UVJW9qKyn43xWa+gl5nXmU4qqLMRzWVLFC8KusUX8T/0kCiOYpAIQ==",
       "license": "MIT"
     },
+    "node_modules/cytoscape": {
+      "version": "3.33.1",
+      "resolved": "https://registry.npmjs.org/cytoscape/-/cytoscape-3.33.1.tgz",
+      "integrity": "sha512-iJc4TwyANnOGR1OmWhsS9ayRS3s+XQ185FmuHObThD+5AeJCakAAbWv8KimMTt08xCCLNgneQwFp+JRJOr9qGQ==",
+      "license": "MIT",
+      "peer": true,
+      "engines": {
+        "node": ">=0.10"
+      }
+    },
+    "node_modules/cytoscape-cose-bilkent": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/cytoscape-cose-bilkent/-/cytoscape-cose-bilkent-4.1.0.tgz",
+      "integrity": "sha512-wgQlVIUJF13Quxiv5e1gstZ08rnZj2XaLHGoFMYXz7SkNfCDOOteKBE6SYRfA9WxxI/iBc3ajfDoc6hb/MRAHQ==",
+      "license": "MIT",
+      "dependencies": {
+        "cose-base": "^1.0.0"
+      },
+      "peerDependencies": {
+        "cytoscape": "^3.2.0"
+      }
+    },
+    "node_modules/cytoscape-fcose": {
+      "version": "2.2.0",
+      "resolved": "https://registry.npmjs.org/cytoscape-fcose/-/cytoscape-fcose-2.2.0.tgz",
+      "integrity": "sha512-ki1/VuRIHFCzxWNrsshHYPs6L7TvLu3DL+TyIGEsRcvVERmxokbf5Gdk7mFxZnTdiGtnA4cfSmjZJMviqSuZrQ==",
+      "license": "MIT",
+      "dependencies": {
+        "cose-base": "^2.2.0"
+      },
+      "peerDependencies": {
+        "cytoscape": "^3.2.0"
+      }
+    },
+    "node_modules/cytoscape-fcose/node_modules/cose-base": {
+      "version": "2.2.0",
+      "resolved": "https://registry.npmjs.org/cose-base/-/cose-base-2.2.0.tgz",
+      "integrity": "sha512-AzlgcsCbUMymkADOJtQm3wO9S3ltPfYOFD5033keQn9NJzIbtnZj+UdBJe7DYml/8TdbtHJW3j58SOnKhWY/5g==",
+      "license": "MIT",
+      "dependencies": {
+        "layout-base": "^2.0.0"
+      }
+    },
+    "node_modules/cytoscape-fcose/node_modules/layout-base": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/layout-base/-/layout-base-2.0.1.tgz",
+      "integrity": "sha512-dp3s92+uNI1hWIpPGH3jK2kxE2lMjdXdr+DH8ynZHpd6PUlH6x6cbuXnoMmiNumznqaNO31xu9e79F0uuZ0JFg==",
+      "license": "MIT"
+    },
+    "node_modules/d3": {
+      "version": "7.9.0",
+      "resolved": "https://registry.npmjs.org/d3/-/d3-7.9.0.tgz",
+      "integrity": "sha512-e1U46jVP+w7Iut8Jt8ri1YsPOvFpg46k+K8TpCb0P+zjCkjkPnV7WzfDJzMHy1LnA+wj5pLT1wjO901gLXeEhA==",
+      "license": "ISC",
+      "dependencies": {
+        "d3-array": "3",
+        "d3-axis": "3",
+        "d3-brush": "3",
+        "d3-chord": "3",
+        "d3-color": "3",
+        "d3-contour": "4",
+        "d3-delaunay": "6",
+        "d3-dispatch": "3",
+        "d3-drag": "3",
+        "d3-dsv": "3",
+        "d3-ease": "3",
+        "d3-fetch": "3",
+        "d3-force": "3",
+        "d3-format": "3",
+        "d3-geo": "3",
+        "d3-hierarchy": "3",
+        "d3-interpolate": "3",
+        "d3-path": "3",
+        "d3-polygon": "3",
+        "d3-quadtree": "3",
+        "d3-random": "3",
+        "d3-scale": "4",
+        "d3-scale-chromatic": "3",
+        "d3-selection": "3",
+        "d3-shape": "3",
+        "d3-time": "3",
+        "d3-time-format": "4",
+        "d3-timer": "3",
+        "d3-transition": "3",
+        "d3-zoom": "3"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-array": {
+      "version": "3.2.4",
+      "resolved": "https://registry.npmjs.org/d3-array/-/d3-array-3.2.4.tgz",
+      "integrity": "sha512-tdQAmyA18i4J7wprpYq8ClcxZy3SC31QMeByyCFyRt7BVHdREQZ5lpzoe5mFEYZUWe+oq8HBvk9JjpibyEV4Jg==",
+      "license": "ISC",
+      "dependencies": {
+        "internmap": "1 - 2"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-axis": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/d3-axis/-/d3-axis-3.0.0.tgz",
+      "integrity": "sha512-IH5tgjV4jE/GhHkRV0HiVYPDtvfjHQlQfJHs0usq7M30XcSBvOotpmH1IgkcXsO/5gEQZD43B//fc7SRT5S+xw==",
+      "license": "ISC",
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-brush": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/d3-brush/-/d3-brush-3.0.0.tgz",
+      "integrity": "sha512-ALnjWlVYkXsVIGlOsuWH1+3udkYFI48Ljihfnh8FZPF2QS9o+PzGLBslO0PjzVoHLZ2KCVgAM8NVkXPJB2aNnQ==",
+      "license": "ISC",
+      "dependencies": {
+        "d3-dispatch": "1 - 3",
+        "d3-drag": "2 - 3",
+        "d3-interpolate": "1 - 3",
+        "d3-selection": "3",
+        "d3-transition": "3"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-chord": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/d3-chord/-/d3-chord-3.0.1.tgz",
+      "integrity": "sha512-VE5S6TNa+j8msksl7HwjxMHDM2yNK3XCkusIlpX5kwauBfXuyLAtNg9jCp/iHH61tgI4sb6R/EIMWCqEIdjT/g==",
+      "license": "ISC",
+      "dependencies": {
+        "d3-path": "1 - 3"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-color": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/d3-color/-/d3-color-3.1.0.tgz",
+      "integrity": "sha512-zg/chbXyeBtMQ1LbD/WSoW2DpC3I0mpmPdW+ynRTj/x2DAWYrIY7qeZIHidozwV24m4iavr15lNwIwLxRmOxhA==",
+      "license": "ISC",
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-contour": {
+      "version": "4.0.2",
+      "resolved": "https://registry.npmjs.org/d3-contour/-/d3-contour-4.0.2.tgz",
+      "integrity": "sha512-4EzFTRIikzs47RGmdxbeUvLWtGedDUNkTcmzoeyg4sP/dvCexO47AaQL7VKy/gul85TOxw+IBgA8US2xwbToNA==",
+      "license": "ISC",
+      "dependencies": {
+        "d3-array": "^3.2.0"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-delaunay": {
+      "version": "6.0.4",
+      "resolved": "https://registry.npmjs.org/d3-delaunay/-/d3-delaunay-6.0.4.tgz",
+      "integrity": "sha512-mdjtIZ1XLAM8bm/hx3WwjfHt6Sggek7qH043O8KEjDXN40xi3vx/6pYSVTwLjEgiXQTbvaouWKynLBiUZ6SK6A==",
+      "license": "ISC",
+      "dependencies": {
+        "delaunator": "5"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-dispatch": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/d3-dispatch/-/d3-dispatch-3.0.1.tgz",
+      "integrity": "sha512-rzUyPU/S7rwUflMyLc1ETDeBj0NRuHKKAcvukozwhshr6g6c5d8zh4c2gQjY2bZ0dXeGLWc1PF174P2tVvKhfg==",
+      "license": "ISC",
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-drag": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/d3-drag/-/d3-drag-3.0.0.tgz",
+      "integrity": "sha512-pWbUJLdETVA8lQNJecMxoXfH6x+mO2UQo8rSmZ+QqxcbyA3hfeprFgIT//HW2nlHChWeIIMwS2Fq+gEARkhTkg==",
+      "license": "ISC",
+      "dependencies": {
+        "d3-dispatch": "1 - 3",
+        "d3-selection": "3"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-dsv": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/d3-dsv/-/d3-dsv-3.0.1.tgz",
+      "integrity": "sha512-UG6OvdI5afDIFP9w4G0mNq50dSOsXHJaRE8arAS5o9ApWnIElp8GZw1Dun8vP8OyHOZ/QJUKUJwxiiCCnUwm+Q==",
+      "license": "ISC",
+      "dependencies": {
+        "commander": "7",
+        "iconv-lite": "0.6",
+        "rw": "1"
+      },
+      "bin": {
+        "csv2json": "bin/dsv2json.js",
+        "csv2tsv": "bin/dsv2dsv.js",
+        "dsv2dsv": "bin/dsv2dsv.js",
+        "dsv2json": "bin/dsv2json.js",
+        "json2csv": "bin/json2dsv.js",
+        "json2dsv": "bin/json2dsv.js",
+        "json2tsv": "bin/json2dsv.js",
+        "tsv2csv": "bin/dsv2dsv.js",
+        "tsv2json": "bin/dsv2json.js"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-dsv/node_modules/commander": {
+      "version": "7.2.0",
+      "resolved": "https://registry.npmjs.org/commander/-/commander-7.2.0.tgz",
+      "integrity": "sha512-QrWXB+ZQSVPmIWIhtEO9H+gwHaMGYiF5ChvoJ+K9ZGHG/sVsa6yiesAD1GC/x46sET00Xlwo1u49RVVVzvcSkw==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/d3-dsv/node_modules/iconv-lite": {
+      "version": "0.6.3",
+      "resolved": "https://registry.npmjs.org/iconv-lite/-/iconv-lite-0.6.3.tgz",
+      "integrity": "sha512-4fCk79wshMdzMp2rH06qWrJE4iolqLhCUH+OiuIgU++RB0+94NlDL81atO7GX55uUKueo0txHNtvEyI6D7WdMw==",
+      "license": "MIT",
+      "dependencies": {
+        "safer-buffer": ">= 2.1.2 < 3.0.0"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/d3-ease": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/d3-ease/-/d3-ease-3.0.1.tgz",
+      "integrity": "sha512-wR/XK3D3XcLIZwpbvQwQ5fK+8Ykds1ip7A2Txe0yxncXSdq1L9skcG7blcedkOX+ZcgxGAmLX1FrRGbADwzi0w==",
+      "license": "BSD-3-Clause",
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-fetch": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/d3-fetch/-/d3-fetch-3.0.1.tgz",
+      "integrity": "sha512-kpkQIM20n3oLVBKGg6oHrUchHM3xODkTzjMoj7aWQFq5QEM+R6E4WkzT5+tojDY7yjez8KgCBRoj4aEr99Fdqw==",
+      "license": "ISC",
+      "dependencies": {
+        "d3-dsv": "1 - 3"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-force": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/d3-force/-/d3-force-3.0.0.tgz",
+      "integrity": "sha512-zxV/SsA+U4yte8051P4ECydjD/S+qeYtnaIyAs9tgHCqfguma/aAQDjo85A9Z6EKhBirHRJHXIgJUlffT4wdLg==",
+      "license": "ISC",
+      "dependencies": {
+        "d3-dispatch": "1 - 3",
+        "d3-quadtree": "1 - 3",
+        "d3-timer": "1 - 3"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-format": {
+      "version": "3.1.2",
+      "resolved": "https://registry.npmjs.org/d3-format/-/d3-format-3.1.2.tgz",
+      "integrity": "sha512-AJDdYOdnyRDV5b6ArilzCPPwc1ejkHcoyFarqlPqT7zRYjhavcT3uSrqcMvsgh2CgoPbK3RCwyHaVyxYcP2Arg==",
+      "license": "ISC",
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-geo": {
+      "version": "3.1.1",
+      "resolved": "https://registry.npmjs.org/d3-geo/-/d3-geo-3.1.1.tgz",
+      "integrity": "sha512-637ln3gXKXOwhalDzinUgY83KzNWZRKbYubaG+fGVuc/dxO64RRljtCTnf5ecMyE1RIdtqpkVcq0IbtU2S8j2Q==",
+      "license": "ISC",
+      "dependencies": {
+        "d3-array": "2.5.0 - 3"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-hierarchy": {
+      "version": "3.1.2",
+      "resolved": "https://registry.npmjs.org/d3-hierarchy/-/d3-hierarchy-3.1.2.tgz",
+      "integrity": "sha512-FX/9frcub54beBdugHjDCdikxThEqjnR93Qt7PvQTOHxyiNCAlvMrHhclk3cD5VeAaq9fxmfRp+CnWw9rEMBuA==",
+      "license": "ISC",
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-interpolate": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/d3-interpolate/-/d3-interpolate-3.0.1.tgz",
+      "integrity": "sha512-3bYs1rOD33uo8aqJfKP3JWPAibgw8Zm2+L9vBKEHJ2Rg+viTR7o5Mmv5mZcieN+FRYaAOWX5SJATX6k1PWz72g==",
+      "license": "ISC",
+      "dependencies": {
+        "d3-color": "1 - 3"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-path": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/d3-path/-/d3-path-3.1.0.tgz",
+      "integrity": "sha512-p3KP5HCf/bvjBSSKuXid6Zqijx7wIfNW+J/maPs+iwR35at5JCbLUT0LzF1cnjbCHWhqzQTIN2Jpe8pRebIEFQ==",
+      "license": "ISC",
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-polygon": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/d3-polygon/-/d3-polygon-3.0.1.tgz",
+      "integrity": "sha512-3vbA7vXYwfe1SYhED++fPUQlWSYTTGmFmQiany/gdbiWgU/iEyQzyymwL9SkJjFFuCS4902BSzewVGsHHmHtXg==",
+      "license": "ISC",
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-quadtree": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/d3-quadtree/-/d3-quadtree-3.0.1.tgz",
+      "integrity": "sha512-04xDrxQTDTCFwP5H6hRhsRcb9xxv2RzkcsygFzmkSIOJy3PeRJP7sNk3VRIbKXcog561P9oU0/rVH6vDROAgUw==",
+      "license": "ISC",
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-random": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/d3-random/-/d3-random-3.0.1.tgz",
+      "integrity": "sha512-FXMe9GfxTxqd5D6jFsQ+DJ8BJS4E/fT5mqqdjovykEB2oFbTMDVdg1MGFxfQW+FBOGoB++k8swBrgwSHT1cUXQ==",
+      "license": "ISC",
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-sankey": {
+      "version": "0.12.3",
+      "resolved": "https://registry.npmjs.org/d3-sankey/-/d3-sankey-0.12.3.tgz",
+      "integrity": "sha512-nQhsBRmM19Ax5xEIPLMY9ZmJ/cDvd1BG3UVvt5h3WRxKg5zGRbvnteTyWAbzeSvlh3tW7ZEmq4VwR5mB3tutmQ==",
+      "license": "BSD-3-Clause",
+      "dependencies": {
+        "d3-array": "1 - 2",
+        "d3-shape": "^1.2.0"
+      }
+    },
+    "node_modules/d3-sankey/node_modules/d3-array": {
+      "version": "2.12.1",
+      "resolved": "https://registry.npmjs.org/d3-array/-/d3-array-2.12.1.tgz",
+      "integrity": "sha512-B0ErZK/66mHtEsR1TkPEEkwdy+WDesimkM5gpZr5Dsg54BiTA5RXtYW5qTLIAcekaS9xfZrzBLF/OAkB3Qn1YQ==",
+      "license": "BSD-3-Clause",
+      "dependencies": {
+        "internmap": "^1.0.0"
+      }
+    },
+    "node_modules/d3-sankey/node_modules/d3-path": {
+      "version": "1.0.9",
+      "resolved": "https://registry.npmjs.org/d3-path/-/d3-path-1.0.9.tgz",
+      "integrity": "sha512-VLaYcn81dtHVTjEHd8B+pbe9yHWpXKZUC87PzoFmsFrJqgFwDe/qxfp5MlfsfM1V5E/iVt0MmEbWQ7FVIXh/bg==",
+      "license": "BSD-3-Clause"
+    },
+    "node_modules/d3-sankey/node_modules/d3-shape": {
+      "version": "1.3.7",
+      "resolved": "https://registry.npmjs.org/d3-shape/-/d3-shape-1.3.7.tgz",
+      "integrity": "sha512-EUkvKjqPFUAZyOlhY5gzCxCeI0Aep04LwIRpsZ/mLFelJiUfnK56jo5JMDSE7yyP2kLSb6LtF+S5chMk7uqPqw==",
+      "license": "BSD-3-Clause",
+      "dependencies": {
+        "d3-path": "1"
+      }
+    },
+    "node_modules/d3-sankey/node_modules/internmap": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/internmap/-/internmap-1.0.1.tgz",
+      "integrity": "sha512-lDB5YccMydFBtasVtxnZ3MRBHuaoE8GKsppq+EchKL2U4nK/DmEpPHNH8MZe5HkMtpSiTSOZwfN0tzYjO/lJEw==",
+      "license": "ISC"
+    },
+    "node_modules/d3-scale": {
+      "version": "4.0.2",
+      "resolved": "https://registry.npmjs.org/d3-scale/-/d3-scale-4.0.2.tgz",
+      "integrity": "sha512-GZW464g1SH7ag3Y7hXjf8RoUuAFIqklOAq3MRl4OaWabTFJY9PN/E1YklhXLh+OQ3fM9yS2nOkCoS+WLZ6kvxQ==",
+      "license": "ISC",
+      "dependencies": {
+        "d3-array": "2.10.0 - 3",
+        "d3-format": "1 - 3",
+        "d3-interpolate": "1.2.0 - 3",
+        "d3-time": "2.1.1 - 3",
+        "d3-time-format": "2 - 4"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-scale-chromatic": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/d3-scale-chromatic/-/d3-scale-chromatic-3.1.0.tgz",
+      "integrity": "sha512-A3s5PWiZ9YCXFye1o246KoscMWqf8BsD9eRiJ3He7C9OBaxKhAd5TFCdEx/7VbKtxxTsu//1mMJFrEt572cEyQ==",
+      "license": "ISC",
+      "dependencies": {
+        "d3-color": "1 - 3",
+        "d3-interpolate": "1 - 3"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-selection": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/d3-selection/-/d3-selection-3.0.0.tgz",
+      "integrity": "sha512-fmTRWbNMmsmWq6xJV8D19U/gw/bwrHfNXxrIN+HfZgnzqTHp9jOmKMhsTUjXOJnZOdZY9Q28y4yebKzqDKlxlQ==",
+      "license": "ISC",
+      "peer": true,
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-shape": {
+      "version": "3.2.0",
+      "resolved": "https://registry.npmjs.org/d3-shape/-/d3-shape-3.2.0.tgz",
+      "integrity": "sha512-SaLBuwGm3MOViRq2ABk3eLoxwZELpH6zhl3FbAoJ7Vm1gofKx6El1Ib5z23NUEhF9AsGl7y+dzLe5Cw2AArGTA==",
+      "license": "ISC",
+      "dependencies": {
+        "d3-path": "^3.1.0"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-time": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/d3-time/-/d3-time-3.1.0.tgz",
+      "integrity": "sha512-VqKjzBLejbSMT4IgbmVgDjpkYrNWUYJnbCGo874u7MMKIWsILRX+OpX/gTk8MqjpT1A/c6HY2dCA77ZN0lkQ2Q==",
+      "license": "ISC",
+      "dependencies": {
+        "d3-array": "2 - 3"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-time-format": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/d3-time-format/-/d3-time-format-4.1.0.tgz",
+      "integrity": "sha512-dJxPBlzC7NugB2PDLwo9Q8JiTR3M3e4/XANkreKSUxF8vvXKqm1Yfq4Q5dl8budlunRVlUUaDUgFt7eA8D6NLg==",
+      "license": "ISC",
+      "dependencies": {
+        "d3-time": "1 - 3"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-timer": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/d3-timer/-/d3-timer-3.0.1.tgz",
+      "integrity": "sha512-ndfJ/JxxMd3nw31uyKoY2naivF+r29V+Lc0svZxe1JvvIRmi8hUsrMvdOwgS1o6uBHmiz91geQ0ylPP0aj1VUA==",
+      "license": "ISC",
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-transition": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/d3-transition/-/d3-transition-3.0.1.tgz",
+      "integrity": "sha512-ApKvfjsSR6tg06xrL434C0WydLr7JewBB3V+/39RMHsaXTOG0zmt/OAXeng5M5LBm0ojmxJrpomQVZ1aPvBL4w==",
+      "license": "ISC",
+      "dependencies": {
+        "d3-color": "1 - 3",
+        "d3-dispatch": "1 - 3",
+        "d3-ease": "1 - 3",
+        "d3-interpolate": "1 - 3",
+        "d3-timer": "1 - 3"
+      },
+      "engines": {
+        "node": ">=12"
+      },
+      "peerDependencies": {
+        "d3-selection": "2 - 3"
+      }
+    },
+    "node_modules/d3-zoom": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/d3-zoom/-/d3-zoom-3.0.0.tgz",
+      "integrity": "sha512-b8AmV3kfQaqWAuacbPuNbL6vahnOJflOhexLzMMNLga62+/nh0JzvJ0aO/5a5MVgUFGS7Hu1P9P03o3fJkDCyw==",
+      "license": "ISC",
+      "dependencies": {
+        "d3-dispatch": "1 - 3",
+        "d3-drag": "2 - 3",
+        "d3-interpolate": "1 - 3",
+        "d3-selection": "2 - 3",
+        "d3-transition": "2 - 3"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/dagre-d3-es": {
+      "version": "7.0.13",
+      "resolved": "https://registry.npmjs.org/dagre-d3-es/-/dagre-d3-es-7.0.13.tgz",
+      "integrity": "sha512-efEhnxpSuwpYOKRm/L5KbqoZmNNukHa/Flty4Wp62JRvgH2ojwVgPgdYyr4twpieZnyRDdIH7PY2mopX26+j2Q==",
+      "license": "MIT",
+      "dependencies": {
+        "d3": "^7.9.0",
+        "lodash-es": "^4.17.21"
+      }
+    },
+    "node_modules/dayjs": {
+      "version": "1.11.19",
+      "resolved": "https://registry.npmjs.org/dayjs/-/dayjs-1.11.19.tgz",
+      "integrity": "sha512-t5EcLVS6QPBNqM2z8fakk/NKel+Xzshgt8FFKAn+qwlD1pzZWxh0nVCrvFK7ZDb6XucZeF9z8C7CBWTRIVApAw==",
+      "license": "MIT"
+    },
     "node_modules/debug": {
       "version": "4.4.3",
       "resolved": "https://registry.npmjs.org/debug/-/debug-4.4.3.tgz",
@@ -3033,6 +3947,15 @@
         "defs": "build/es5/defs"
       }
     },
+    "node_modules/delaunator": {
+      "version": "5.0.1",
+      "resolved": "https://registry.npmjs.org/delaunator/-/delaunator-5.0.1.tgz",
+      "integrity": "sha512-8nvh+XBe96aCESrGOqMp/84b13H9cdKbG5P2ejQCh4d4sK9RL4371qou9drQjMhvnPmhWl5hnmqbEE0fXr9Xnw==",
+      "license": "ISC",
+      "dependencies": {
+        "robust-predicates": "^3.0.2"
+      }
+    },
     "node_modules/dequal": {
       "version": "2.0.3",
       "resolved": "https://registry.npmjs.org/dequal/-/dequal-2.0.3.tgz",
@@ -3468,6 +4391,12 @@
       "license": "ISC",
       "optional": true
     },
+    "node_modules/hachure-fill": {
+      "version": "0.5.2",
+      "resolved": "https://registry.npmjs.org/hachure-fill/-/hachure-fill-0.5.2.tgz",
+      "integrity": "sha512-3GKBOn+m2LX9iq+JC1064cSFprJY4jL1jCXTcpnfER5HYE2l/4EfWSGzkPa/ZDBmYI0ZOEj5VHV/eKnPGkHuOg==",
+      "license": "MIT"
+    },
     "node_modules/has-ansi": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/has-ansi/-/has-ansi-2.0.0.tgz",
@@ -3618,6 +4547,15 @@
       "license": "ISC",
       "optional": true
     },
+    "node_modules/internmap": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/internmap/-/internmap-2.0.3.tgz",
+      "integrity": "sha512-5Hh7Y1wQbvY5ooGgPbDaL5iYLAPzMTUrjMulskHLH6wnv/A+1q5rgEaiuqEjB+oxGXIVZs1FF+R/KPN3ZSQYYg==",
+      "license": "ISC",
+      "engines": {
+        "node": ">=12"
+      }
+    },
     "node_modules/invert-kv": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/invert-kv/-/invert-kv-1.0.0.tgz",
@@ -3921,6 +4859,11 @@
         "katex": "cli.js"
       }
     },
+    "node_modules/khroma": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/khroma/-/khroma-2.1.0.tgz",
+      "integrity": "sha512-Ls993zuzfayK269Svk9hzpeGUKob/sIgZzyHYdjQoAdQetRKpOLj+k/QQQ/6Qi0Yz65mlROrfd+Ev+1+7dz9Kw=="
+    },
     "node_modules/kind-of": {
       "version": "3.2.2",
       "resolved": "https://registry.npmjs.org/kind-of/-/kind-of-3.2.2.tgz",
@@ -3934,6 +4877,29 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/langium": {
+      "version": "4.2.1",
+      "resolved": "https://registry.npmjs.org/langium/-/langium-4.2.1.tgz",
+      "integrity": "sha512-zu9QWmjpzJcomzdJQAHgDVhLGq5bLosVak1KVa40NzQHXfqr4eAHupvnPOVXEoLkg6Ocefvf/93d//SB7du4YQ==",
+      "license": "MIT",
+      "dependencies": {
+        "chevrotain": "~11.1.1",
+        "chevrotain-allstar": "~0.3.1",
+        "vscode-languageserver": "~9.0.1",
+        "vscode-languageserver-textdocument": "~1.0.11",
+        "vscode-uri": "~3.1.0"
+      },
+      "engines": {
+        "node": ">=20.10.0",
+        "npm": ">=10.2.3"
+      }
+    },
+    "node_modules/layout-base": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/layout-base/-/layout-base-1.0.2.tgz",
+      "integrity": "sha512-8h2oVEZNktL4BH2JCOI90iD1yXwL6iNW7KcCKT2QZgQJR2vbqDsldCTPRU9NifTCqHZci57XvQQ15YTu+sTYPg==",
+      "license": "MIT"
+    },
     "node_modules/lazy-cache": {
       "version": "1.0.4",
       "resolved": "https://registry.npmjs.org/lazy-cache/-/lazy-cache-1.0.4.tgz",
@@ -4089,6 +5055,18 @@
         "url": "https://github.com/sponsors/wooorm"
       }
     },
+    "node_modules/marked": {
+      "version": "16.4.2",
+      "resolved": "https://registry.npmjs.org/marked/-/marked-16.4.2.tgz",
+      "integrity": "sha512-TI3V8YYWvkVf3KJe1dRkpnjs68JUPyEa5vjKrp1XEEJUAOaQc+Qj+L1qWbPd0SJuAdQkFU0h73sXXqwDYxsiDA==",
+      "license": "MIT",
+      "bin": {
+        "marked": "bin/marked.js"
+      },
+      "engines": {
+        "node": ">= 20"
+      }
+    },
     "node_modules/math-random": {
       "version": "1.0.4",
       "resolved": "https://registry.npmjs.org/math-random/-/math-random-1.0.4.tgz",
@@ -4312,6 +5290,34 @@
       "integrity": "sha512-/sKlQJCBYVY9Ers9hqzKou4H6V5UWc/M59TH2dvkt+84itfnq7uFOMLpOiOS4ujvHP4etln18fmIxA5R5fll0g==",
       "license": "MIT"
     },
+    "node_modules/mermaid": {
+      "version": "11.12.3",
+      "resolved": "https://registry.npmjs.org/mermaid/-/mermaid-11.12.3.tgz",
+      "integrity": "sha512-wN5ZSgJQIC+CHJut9xaKWsknLxaFBwCPwPkGTSUYrTiHORWvpT8RxGk849HPnpUAQ+/9BPRqYb80jTpearrHzQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@braintree/sanitize-url": "^7.1.1",
+        "@iconify/utils": "^3.0.1",
+        "@mermaid-js/parser": "^1.0.0",
+        "@types/d3": "^7.4.3",
+        "cytoscape": "^3.29.3",
+        "cytoscape-cose-bilkent": "^4.1.0",
+        "cytoscape-fcose": "^2.2.0",
+        "d3": "^7.9.0",
+        "d3-sankey": "^0.12.3",
+        "dagre-d3-es": "7.0.13",
+        "dayjs": "^1.11.18",
+        "dompurify": "^3.2.5",
+        "katex": "^0.16.22",
+        "khroma": "^2.1.0",
+        "lodash-es": "^4.17.23",
+        "marked": "^16.2.1",
+        "roughjs": "^4.6.6",
+        "stylis": "^4.3.6",
+        "ts-dedent": "^2.2.0",
+        "uuid": "^11.1.0"
+      }
+    },
     "node_modules/micromark": {
       "version": "4.0.2",
       "resolved": "https://registry.npmjs.org/micromark/-/micromark-4.0.2.tgz",
@@ -4954,6 +5960,30 @@
         "mkdirp": "bin/cmd.js"
       }
     },
+    "node_modules/mlly": {
+      "version": "1.8.0",
+      "resolved": "https://registry.npmjs.org/mlly/-/mlly-1.8.0.tgz",
+      "integrity": "sha512-l8D9ODSRWLe2KHJSifWGwBqpTZXIXTeo8mlKjY+E2HAakaTeNpqAyBZ8GSqLzHgw4XmHmC8whvpjJNMbFZN7/g==",
+      "license": "MIT",
+      "dependencies": {
+        "acorn": "^8.15.0",
+        "pathe": "^2.0.3",
+        "pkg-types": "^1.3.1",
+        "ufo": "^1.6.1"
+      }
+    },
+    "node_modules/mlly/node_modules/acorn": {
+      "version": "8.16.0",
+      "resolved": "https://registry.npmjs.org/acorn/-/acorn-8.16.0.tgz",
+      "integrity": "sha512-UVJyE9MttOsBQIDKw1skb9nAwQuR5wuGD3+82K6JgJlm/Y+KI92oNsMNGZCYdDsVtRHSak0pcV5Dno5+4jh9sw==",
+      "license": "MIT",
+      "bin": {
+        "acorn": "bin/acorn"
+      },
+      "engines": {
+        "node": ">=0.4.0"
+      }
+    },
     "node_modules/ms": {
       "version": "2.1.3",
       "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.3.tgz",
@@ -5212,6 +6242,12 @@
         "object-assign": "^4.1.0"
       }
     },
+    "node_modules/package-manager-detector": {
+      "version": "1.6.0",
+      "resolved": "https://registry.npmjs.org/package-manager-detector/-/package-manager-detector-1.6.0.tgz",
+      "integrity": "sha512-61A5ThoTiDG/C8s8UMZwSorAGwMJ0ERVGj2OjoW5pAalsNOg15+iQiPzrLJ4jhZ1HJzmC2PIHT2oEiH3R5fzNA==",
+      "license": "MIT"
+    },
     "node_modules/parse-glob": {
       "version": "3.0.4",
       "resolved": "https://registry.npmjs.org/parse-glob/-/parse-glob-3.0.4.tgz",
@@ -5238,6 +6274,12 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/path-data-parser": {
+      "version": "0.1.0",
+      "resolved": "https://registry.npmjs.org/path-data-parser/-/path-data-parser-0.1.0.tgz",
+      "integrity": "sha512-NOnmBpt5Y2RWbuv0LMzsayp3lVylAHLPUTut412ZA3l+C4uw4ZVkQbjShYCQ8TCpUMdPapr4YjUqLYD6v68j+w==",
+      "license": "MIT"
+    },
     "node_modules/path-exists": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/path-exists/-/path-exists-1.0.0.tgz",
@@ -5265,6 +6307,12 @@
       "license": "MIT",
       "optional": true
     },
+    "node_modules/pathe": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/pathe/-/pathe-2.0.3.tgz",
+      "integrity": "sha512-WUjGcAqP1gQacoQe+OBJsFA7Ld4DyXuUIjZ5cc75cLHvJ7dtNsTugphxIADwspS+AraAUePCKrSVtPLFj/F88w==",
+      "license": "MIT"
+    },
     "node_modules/picocolors": {
       "version": "1.1.1",
       "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.1.1.tgz",
@@ -5307,6 +6355,33 @@
         }
       }
     },
+    "node_modules/pkg-types": {
+      "version": "1.3.1",
+      "resolved": "https://registry.npmjs.org/pkg-types/-/pkg-types-1.3.1.tgz",
+      "integrity": "sha512-/Jm5M4RvtBFVkKWRu2BLUTNP8/M2a+UwuAX+ae4770q1qVGtfjG+WTCupoZixokjmHiry8uI+dlY8KXYV5HVVQ==",
+      "license": "MIT",
+      "dependencies": {
+        "confbox": "^0.1.8",
+        "mlly": "^1.7.4",
+        "pathe": "^2.0.1"
+      }
+    },
+    "node_modules/points-on-curve": {
+      "version": "0.2.0",
+      "resolved": "https://registry.npmjs.org/points-on-curve/-/points-on-curve-0.2.0.tgz",
+      "integrity": "sha512-0mYKnYYe9ZcqMCWhUjItv/oHjvgEsfKvnUTg8sAtnHr3GVy7rGkXCb6d5cSyqrWqL4k81b9CPg3urd+T7aop3A==",
+      "license": "MIT"
+    },
+    "node_modules/points-on-path": {
+      "version": "0.2.1",
+      "resolved": "https://registry.npmjs.org/points-on-path/-/points-on-path-0.2.1.tgz",
+      "integrity": "sha512-25ClnWWuw7JbWZcgqY/gJ4FQWadKxGWk+3kR/7kD0tCaDtPPMj7oHu2ToLaVhfpnHrZzYby2w6tUA0eOIuUg8g==",
+      "license": "MIT",
+      "dependencies": {
+        "path-data-parser": "0.1.0",
+        "points-on-curve": "0.2.0"
+      }
+    },
     "node_modules/posix-character-classes": {
       "version": "0.1.1",
       "resolved": "https://registry.npmjs.org/posix-character-classes/-/posix-character-classes-0.1.1.tgz",
@@ -6208,6 +7283,12 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/robust-predicates": {
+      "version": "3.0.2",
+      "resolved": "https://registry.npmjs.org/robust-predicates/-/robust-predicates-3.0.2.tgz",
+      "integrity": "sha512-IXgzBWvWQwE6PrDI05OvmXUIruQTcoMDzRsOd5CDvHCVLcLHMTSYvOK5Cm46kWqlV3yAbuSpBZdJ5oP5OUoStg==",
+      "license": "Unlicense"
+    },
     "node_modules/rollup": {
       "version": "4.55.1",
       "resolved": "https://registry.npmjs.org/rollup/-/rollup-4.55.1.tgz",
@@ -6258,6 +7339,24 @@
       "resolved": "https://registry.npmjs.org/rope-sequence/-/rope-sequence-1.3.4.tgz",
       "integrity": "sha512-UT5EDe2cu2E/6O4igUr5PSFs23nvvukicWHx6GnOPlHAiiYbzNuCRQCuiUdHJQcqKalLKlrYJnjY0ySGsXNQXQ=="
     },
+    "node_modules/roughjs": {
+      "version": "4.6.6",
+      "resolved": "https://registry.npmjs.org/roughjs/-/roughjs-4.6.6.tgz",
+      "integrity": "sha512-ZUz/69+SYpFN/g/lUlo2FXcIjRkSu3nDarreVdGGndHEBJ6cXPdKguS8JGxwj5HA5xIbVKSmLgr5b3AWxtRfvQ==",
+      "license": "MIT",
+      "dependencies": {
+        "hachure-fill": "^0.5.2",
+        "path-data-parser": "^0.1.0",
+        "points-on-curve": "^0.2.0",
+        "points-on-path": "^0.2.1"
+      }
+    },
+    "node_modules/rw": {
+      "version": "1.3.3",
+      "resolved": "https://registry.npmjs.org/rw/-/rw-1.3.3.tgz",
+      "integrity": "sha512-PdhdWy89SiZogBLaw42zdeqtRJ//zFd2PgQavcICDUgJT5oW10QCRKbJ6bg4r0/UY2M6BWd5tkxuGFRvCkgfHQ==",
+      "license": "BSD-3-Clause"
+    },
     "node_modules/safe-buffer": {
       "version": "5.1.2",
       "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.1.2.tgz",
@@ -6279,8 +7378,7 @@
       "version": "2.1.2",
       "resolved": "https://registry.npmjs.org/safer-buffer/-/safer-buffer-2.1.2.tgz",
       "integrity": "sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg==",
-      "license": "MIT",
-      "optional": true
+      "license": "MIT"
     },
     "node_modules/set-value": {
       "version": "2.0.1",
@@ -6640,6 +7738,12 @@
       "resolved": "https://registry.npmjs.org/style-mod/-/style-mod-4.1.3.tgz",
       "integrity": "sha512-i/n8VsZydrugj3Iuzll8+x/00GH2vnYsk1eomD8QiRrSAeW6ItbCQDtfXCeJHd0iwiNagqjQkvpvREEPtW3IoQ=="
     },
+    "node_modules/stylis": {
+      "version": "4.3.6",
+      "resolved": "https://registry.npmjs.org/stylis/-/stylis-4.3.6.tgz",
+      "integrity": "sha512-yQ3rwFWRfwNUY7H5vpU0wfdkNSnvnJinhF9830Swlaxl03zsOjCfmX0ugac+3LtK0lYSgwL/KXc8oYL3mG4YFQ==",
+      "license": "MIT"
+    },
     "node_modules/supports-color": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-2.0.0.tgz",
@@ -6670,6 +7774,15 @@
       "license": "MIT",
       "optional": true
     },
+    "node_modules/tinyexec": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/tinyexec/-/tinyexec-1.0.2.tgz",
+      "integrity": "sha512-W/KYk+NFhkmsYpuHq5JykngiOCnxeVL8v8dFnqxSD8qEEdRfXk1SDM6JzNqcERbcGYj9tMrDQBYV9cjgnunFIg==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=18"
+      }
+    },
     "node_modules/tinyglobby": {
       "version": "0.2.15",
       "resolved": "https://registry.npmjs.org/tinyglobby/-/tinyglobby-0.2.15.tgz",
@@ -6787,12 +7900,27 @@
       "license": "MIT",
       "optional": true
     },
+    "node_modules/ts-dedent": {
+      "version": "2.2.0",
+      "resolved": "https://registry.npmjs.org/ts-dedent/-/ts-dedent-2.2.0.tgz",
+      "integrity": "sha512-q5W7tVM71e2xjHZTlgfTDoPF/SmqKG5hddq9SzR49CH2hayqRKJtQ4mtRlSxKaJlR/+9rEM+mnBHf7I2/BQcpQ==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=6.10"
+      }
+    },
     "node_modules/uc.micro": {
       "version": "1.0.6",
       "resolved": "https://registry.npmjs.org/uc.micro/-/uc.micro-1.0.6.tgz",
       "integrity": "sha512-8Y75pvTYkLJW2hWQHXxoqRgV7qb9B+9vFEtidML+7koHUFapnVJAZ6cKs+Qjz5Aw3aZWHMC6u0wJE3At+nSGwA==",
       "license": "MIT"
     },
+    "node_modules/ufo": {
+      "version": "1.6.3",
+      "resolved": "https://registry.npmjs.org/ufo/-/ufo-1.6.3.tgz",
+      "integrity": "sha512-yDJTmhydvl5lJzBmy/hyOAA0d+aqCBuwl818haVdYCRrWV84o7YyeVm4QlVHStqNrrJSTb6jKuFAVqAFsr+K3Q==",
+      "license": "MIT"
+    },
     "node_modules/unified": {
       "version": "11.0.5",
       "resolved": "https://registry.npmjs.org/unified/-/unified-11.0.5.tgz",
@@ -6991,6 +8119,19 @@
       "license": "MIT",
       "optional": true
     },
+    "node_modules/uuid": {
+      "version": "11.1.0",
+      "resolved": "https://registry.npmjs.org/uuid/-/uuid-11.1.0.tgz",
+      "integrity": "sha512-0/A9rDy9P7cJ+8w1c9WD9V//9Wj15Ce2MPz8Ri6032usz+NfePxx5AcN3bN+r6ZL6jEo066/yNYB3tn4pQEx+A==",
+      "funding": [
+        "https://github.com/sponsors/broofa",
+        "https://github.com/sponsors/ctavan"
+      ],
+      "license": "MIT",
+      "bin": {
+        "uuid": "dist/esm/bin/uuid"
+      }
+    },
     "node_modules/vfile": {
       "version": "6.0.3",
       "resolved": "https://registry.npmjs.org/vfile/-/vfile-6.0.3.tgz",
@@ -7093,6 +8234,55 @@
         }
       }
     },
+    "node_modules/vscode-jsonrpc": {
+      "version": "8.2.0",
+      "resolved": "https://registry.npmjs.org/vscode-jsonrpc/-/vscode-jsonrpc-8.2.0.tgz",
+      "integrity": "sha512-C+r0eKJUIfiDIfwJhria30+TYWPtuHJXHtI7J0YlOmKAo7ogxP20T0zxB7HZQIFhIyvoBPwWskjxrvAtfjyZfA==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=14.0.0"
+      }
+    },
+    "node_modules/vscode-languageserver": {
+      "version": "9.0.1",
+      "resolved": "https://registry.npmjs.org/vscode-languageserver/-/vscode-languageserver-9.0.1.tgz",
+      "integrity": "sha512-woByF3PDpkHFUreUa7Hos7+pUWdeWMXRd26+ZX2A8cFx6v/JPTtd4/uN0/jB6XQHYaOlHbio03NTHCqrgG5n7g==",
+      "license": "MIT",
+      "dependencies": {
+        "vscode-languageserver-protocol": "3.17.5"
+      },
+      "bin": {
+        "installServerIntoExtension": "bin/installServerIntoExtension"
+      }
+    },
+    "node_modules/vscode-languageserver-protocol": {
+      "version": "3.17.5",
+      "resolved": "https://registry.npmjs.org/vscode-languageserver-protocol/-/vscode-languageserver-protocol-3.17.5.tgz",
+      "integrity": "sha512-mb1bvRJN8SVznADSGWM9u/b07H7Ecg0I3OgXDuLdn307rl/J3A9YD6/eYOssqhecL27hK1IPZAsaqh00i/Jljg==",
+      "license": "MIT",
+      "dependencies": {
+        "vscode-jsonrpc": "8.2.0",
+        "vscode-languageserver-types": "3.17.5"
+      }
+    },
+    "node_modules/vscode-languageserver-textdocument": {
+      "version": "1.0.12",
+      "resolved": "https://registry.npmjs.org/vscode-languageserver-textdocument/-/vscode-languageserver-textdocument-1.0.12.tgz",
+      "integrity": "sha512-cxWNPesCnQCcMPeenjKKsOCKQZ/L6Tv19DTRIGuLWe32lyzWhihGVJ/rcckZXJxfdKCFvRLS3fpBIsV/ZGX4zA==",
+      "license": "MIT"
+    },
+    "node_modules/vscode-languageserver-types": {
+      "version": "3.17.5",
+      "resolved": "https://registry.npmjs.org/vscode-languageserver-types/-/vscode-languageserver-types-3.17.5.tgz",
+      "integrity": "sha512-Ld1VelNuX9pdF39h2Hgaeb5hEZM2Z3jUrrMgWQAu82jMtZp7p3vJT3BzToKtZI7NgQssZje5o0zryOrhQvzQAg==",
+      "license": "MIT"
+    },
+    "node_modules/vscode-uri": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/vscode-uri/-/vscode-uri-3.1.0.tgz",
+      "integrity": "sha512-/BpdSx+yCQGnCvecbyXdxHDkuk55/G3xwnC0GqY4gmQ3j+A+g8kzzgB4Nk/SINjqn6+waqw3EgbVF2QKExkRxQ==",
+      "license": "MIT"
+    },
     "node_modules/vue": {
       "version": "3.5.26",
       "resolved": "https://registry.npmjs.org/vue/-/vue-3.5.26.tgz",
diff --git a/package.json b/package.json
index 8367b5f..086c878 100644
--- a/package.json
+++ b/package.json
@@ -17,6 +17,7 @@
     "katex": "^0.16.9",
     "markdown-it": "^13.0.0",
     "markdown-it-math": "^3.0.2",
+    "mermaid": "^11.12.3",
     "pinia": "^2.3.1",
     "prismjs": "^1.29.0",
     "vue": "^3.5.24",
diff --git a/src/components/MilkdownEditor.vue b/src/components/MilkdownEditor.vue
index 16f9aa7..3ffab3e 100644
--- a/src/components/MilkdownEditor.vue
+++ b/src/components/MilkdownEditor.vue
@@ -1,4 +1,4 @@
-<template>
+<template>
   <div class="editor-container">
     <div ref="root" class="milkdown-editor"></div>
 
@@ -46,7 +46,7 @@
         </svg>
         <span class="btn-tooltip">{{ t('importMd') }}</span>
       </button>
-      <input type="file" ref="fileInputRef" @change="handleFileUpload" accept=".md" style="display:none">
+      <input type="file" ref="fileInputRef" @change="handleFileUpload" accept=".md,text/markdown,text/x-markdown" style="display:none">
       
       <button
         type="button"
@@ -79,11 +79,13 @@
           <span class="btn-tooltip">{{ t('uploadImg') }}</span>
         </button>
         <div v-if="showImageDropdown" class="image-dropdown">
+          <button v-if="supportsCameraCapture" type="button" @click="triggerCameraCapture">{{ cameraUploadLabel }}</button>
           <button type="button" @click="triggerImageUpload">{{ t('uploadImg') }}</button>
           <button type="button" @click="showUrlDialog = true; showImageDropdown = false">{{ t('insertUrl') }}</button>
         </div>
       </div>
       <input type="file" ref="imageInputRef" @change="handleImageUpload" accept="image/*" style="display:none">
+      <input type="file" ref="cameraInputRef" @change="handleImageUpload" accept="image/*" capture="environment" style="display:none">
       
       <button
         type="button"
@@ -137,6 +139,7 @@ import { editorViewCtx, serializerCtx } from '@milkdown/kit/core'
 import { Selection } from '@milkdown/prose/state'
 import { undo, redo, undoDepth, redoDepth } from '@milkdown/prose/history'
 import { copilotPlugin, copilotConfigCtx, copilotGhostMark, setCopilotEnabled, interruptCopilot, COPILOT_PLUGIN_KEY, SIZE_LIMIT, checkSizeLimit, clearGhostSuggestion } from '../plugins/copilotPlugin'
+import { mermaidRenderPreview, codeBlockConfig } from '../plugins/mermaidPlugin'
 import { fetchSuggestion } from '../utils/api.js'
 import { useSettingsStore } from '../stores/settings'
 import { OCR_URL } from '../utils/config.js'
@@ -149,6 +152,7 @@ const t = (key) => settings.t[key]
 const root = ref(null)
 const fileInputRef = ref(null)
 const imageInputRef = ref(null)
+const cameraInputRef = ref(null)
 const aiEnabled = ref(true)
 const contentSize = ref(0)
 const showImageDropdown = ref(false)
@@ -160,6 +164,12 @@ const isOverLimit = computed(() => contentSize.value > SIZE_LIMIT)
 const sizeInKB = computed(() => Math.floor(contentSize.value / 1024))
 const undoLabel = computed(() => t('undo') || 'Undo')
 const redoLabel = computed(() => t('redo') || 'Redo')
+const cameraUploadLabel = computed(() => t('cameraUpload') || 'Use Camera')
+const supportsCameraCapture = computed(() => {
+  if (typeof navigator === 'undefined') return false
+  const ua = navigator.userAgent || ''
+  return /Android|iPhone|iPad|iPod|Mobile/i.test(ua)
+})
 const aiButtonLabel = computed(() => {
   if (isOverLimit.value) return t('docTooLarge')
   return aiEnabled.value ? t('disableAI') : t('enableAI')
@@ -170,6 +180,8 @@ let markdownSyncTimer = null
 let rootResizeObserver = null
 const objectUrls = new Set()
 const IMAGE_NODE_TYPES = new Set(['image', 'image-block', 'imageBlock'])
+const MARKDOWN_EXT_RE = /\.md$/i
+const IMAGE_EXT_RE = /\.(png|jpe?g|gif|webp|bmp|svg|heic|heif|avif)$/i
 
 const revokeObjectUrl = (url) => {
   if (!objectUrls.has(url)) return
@@ -287,6 +299,29 @@ const handleRedo = () => {
   runHistoryCommand(redo)
 }
 
+const isMarkdownFile = (file) => {
+  if (!file) return false
+  const name = (file.name || '').toLowerCase()
+  const type = (file.type || '').toLowerCase()
+  return MARKDOWN_EXT_RE.test(name) || type === 'text/markdown' || type === 'text/x-markdown'
+}
+
+const isImageFile = (file) => {
+  if (!file) return false
+  const name = (file.name || '').toLowerCase()
+  const type = (file.type || '').toLowerCase()
+  return type.startsWith('image/') || IMAGE_EXT_RE.test(name)
+}
+
+const warnUnsupportedUploadType = () => {
+  alert(t('uploadFileTypeWarning') || 'Only Markdown (.md) files and image files are supported.')
+}
+
+const warnImageTooLarge = () => {
+  const limitMB = Math.floor(IMAGE_SIZE_LIMIT / 1024 / 1024)
+  alert(t('imgTooLarge') || `Image too large. Max ${limitMB}MB.`)
+}
+
 const performOCR = async (file, cacheKey, imageHash = '') => {
   if (!aiEnabled.value) return
   
@@ -329,6 +364,34 @@ const performOCR = async (file, cacheKey, imageHash = '') => {
   reader.readAsDataURL(file)
 }
 
+const prepareImageFile = async (file) => {
+  if (!isImageFile(file)) {
+    warnUnsupportedUploadType()
+    return null
+  }
+
+  if (file.size > IMAGE_SIZE_LIMIT) {
+    warnImageTooLarge()
+    return null
+  }
+
+  const objectUrl = URL.createObjectURL(file)
+  objectUrls.add(objectUrl)
+  
+  const arrayBuffer = await file.arrayBuffer()
+  const imageBytes = new Uint8Array(arrayBuffer)
+  const imageHash = await calculateImageHash(imageBytes)
+  const existingOcr = getOcrByHash(imageHash)
+  if (!existingOcr) {
+    performOCR(file, objectUrl, imageHash)
+  } else {
+    setOcrCache(objectUrl, existingOcr)
+    setOcrCache(file.name, existingOcr)
+  }
+
+  return objectUrl
+}
+
 onMounted(async () => {
     if (!root.value) throw new Error('root.value is null')
     updateEditorTailSpace()
@@ -341,12 +404,11 @@ onMounted(async () => {
     
     crepe = new Crepe({
         root: root.value,
-        defaultValue: '# 欢迎来到LLM-IN-TEXT\n\n一个即时LLM系统\n\n在下面开始你的创作...',
+        defaultValue: '# 娆㈣繋鏉ュ埌LLM-IN-TEXT\n\n涓€涓嵆鏃禠LM绯荤粺\n\n鍦ㄤ笅闈㈠紑濮嬩綘鐨勫垱浣?..',
         features: {
             [Crepe.Feature.Latex]: true,
             [Crepe.Feature.ImageBlock]: true,
             [Crepe.Feature.Table]: true,
-            [Crepe.Feature.Diagram]: true,
             [Crepe.Feature.ListCheck]: true,
         },
         featureConfigs: {
@@ -356,22 +418,8 @@ onMounted(async () => {
             },
             [Crepe.Feature.ImageBlock]: {
                 onUpload: async (file) => {
-                    if (file.size > IMAGE_SIZE_LIMIT) {
-                        alert(`图片大小不能超过 ${Math.floor(IMAGE_SIZE_LIMIT / 1024 / 1024)}MB`)
-                        return null
-                    }
-                    const objectUrl = URL.createObjectURL(file)
-                    objectUrls.add(objectUrl)
-                    const arrayBuffer = await file.arrayBuffer()
-                    const imageBytes = new Uint8Array(arrayBuffer)
-                    const imageHash = await calculateImageHash(imageBytes)
-                    const existingOcr = getOcrByHash(imageHash)
-                    if (!existingOcr) {
-                        performOCR(file, objectUrl, imageHash)
-                    } else {
-                        setOcrCache(objectUrl, existingOcr)
-                        setOcrCache(file.name, existingOcr)
-                    }
+                    const objectUrl = await prepareImageFile(file)
+                    if (!objectUrl) return null
                     clearCurrentGhost()
                     return objectUrl
                 }
@@ -391,6 +439,13 @@ onMounted(async () => {
         })
     })
 
+    crepe.editor.config((ctx) => {
+        ctx.update(codeBlockConfig.key, (prev) => ({
+            ...prev,
+            renderPreview: mermaidRenderPreview,
+        }))
+    })
+
     // Watch for debounce changes
     watch(() => settings.debounceMs, (newVal) => {
         if (!crepe) return
@@ -406,6 +461,7 @@ onMounted(async () => {
     crepe.editor.use(copilotConfigCtx)
     crepe.editor.use(copilotGhostMark)
     crepe.editor.use(copilotPlugin)
+
     
     await crepe.create()
     
@@ -440,8 +496,12 @@ const exportMarkdown = async () => {
     const blob = new Blob([markdown], { type: 'text/markdown' })
     const url = URL.createObjectURL(blob)
     const a = document.createElement('a')
+    const now = new Date()
+    const pad = (n) => String(n).padStart(2, '0')
+    const datePart = `${now.getFullYear()}${pad(now.getMonth() + 1)}${pad(now.getDate())}`
+    const timePart = `${pad(now.getHours())}${pad(now.getMinutes())}${pad(now.getSeconds())}`
     a.href = url
-    a.download = `document-${Date.now()}.md`
+    a.download = `save${datePart}${timePart}.md`
     document.body.appendChild(a)
     a.click()
     a.remove()
@@ -453,8 +513,25 @@ const triggerUpload = () => {
 }
 
 const handleFileUpload = async (event) => {
-    const file = event.target.files?.[0]
+    const input = event.target
+    const file = input.files?.[0]
     if (!file) return
+
+    if (isImageFile(file)) {
+        const objectUrl = await prepareImageFile(file)
+        if (objectUrl) {
+            clearCurrentGhost()
+            insertImageAtCursor(objectUrl)
+        }
+        input.value = ''
+        return
+    }
+
+    if (!isMarkdownFile(file)) {
+        warnUnsupportedUploadType()
+        input.value = ''
+        return
+    }
     
     try {
         const text = await file.text()
@@ -465,7 +542,7 @@ const handleFileUpload = async (event) => {
         console.error('[Error] Upload failed:', e)
     }
     
-    event.target.value = ''
+    input.value = ''
 }
 
 const toggleAI = async () => {
@@ -491,6 +568,11 @@ const triggerImageUpload = () => {
     imageInputRef.value?.click()
 }
 
+const triggerCameraCapture = () => {
+    showImageDropdown.value = false
+    cameraInputRef.value?.click()
+}
+
 const insertImageAtCursor = (src) => {
     if (!crepe || !src) return
     
@@ -512,33 +594,20 @@ const insertImageAtCursor = (src) => {
 }
 
 const handleImageUpload = async (event) => {
-    const file = event.target.files?.[0]
+    const input = event.target
+    const file = input.files?.[0]
     if (!file) return
-    
-    if (file.size > IMAGE_SIZE_LIMIT) {
-        alert(`图片大小不能超过 ${Math.floor(IMAGE_SIZE_LIMIT / 1024 / 1024)}MB`)
-        event.target.value = ''
+
+    const objectUrl = await prepareImageFile(file)
+    if (!objectUrl) {
+        input.value = ''
         return
     }
     
-    const objectUrl = URL.createObjectURL(file)
-    objectUrls.add(objectUrl)
-    
-    const arrayBuffer = await file.arrayBuffer()
-    const imageBytes = new Uint8Array(arrayBuffer)
-    const imageHash = await calculateImageHash(imageBytes)
-    const existingOcr = getOcrByHash(imageHash)
-    if (!existingOcr) {
-        performOCR(file, objectUrl, imageHash)
-    } else {
-        setOcrCache(objectUrl, existingOcr)
-        setOcrCache(file.name, existingOcr)
-    }
-    
     clearCurrentGhost()
     insertImageAtCursor(objectUrl)
     
-    event.target.value = ''
+    input.value = ''
 }
 
 const insertImageFromUrl = () => {
@@ -976,3 +1045,4 @@ onUnmounted(() => {
     background-color: var(--ghost-code-bg);
 }
 </style>
+
diff --git a/src/components/SettingsPanel.vue b/src/components/SettingsPanel.vue
index 74cf785..532beb7 100644
--- a/src/components/SettingsPanel.vue
+++ b/src/components/SettingsPanel.vue
@@ -1,5 +1,5 @@
 <script setup>
-import { ref, watch, computed } from 'vue'
+import { ref, watch, computed, onMounted, onUnmounted } from 'vue'
 import { useSettingsStore } from '../stores/settings'
 import { useTheme } from '../composables/useTheme'
 
@@ -7,6 +7,7 @@ const store = useSettingsStore()
 const { setTheme } = useTheme()
 
 const isOpen = ref(false)
+let systemThemeMediaQuery = null
 
 const togglePanel = () => {
   isOpen.value = !isOpen.value
@@ -16,15 +17,101 @@ const closePanel = () => {
   isOpen.value = false
 }
 
-// Theme Handling
-watch(() => store.theme, (newVal) => {
-  if (newVal === 'system') {
-    const isDark = window.matchMedia('(prefers-color-scheme: dark)').matches
-    setTheme(isDark ? 'dark' : 'light')
-  } else {
-    setTheme(newVal)
+const applyThemeByPreference = () => {
+  if (store.theme === 'system') {
+    if (typeof window !== 'undefined' && typeof window.matchMedia === 'function') {
+      const isDark = window.matchMedia('(prefers-color-scheme: dark)').matches
+      setTheme(isDark ? 'dark' : 'light')
+      return
+    }
+    setTheme('light')
+    return
   }
-}, { immediate: true })
+
+  setTheme(store.theme)
+}
+
+watch(
+  () => store.theme,
+  () => {
+    applyThemeByPreference()
+  },
+  { immediate: true }
+)
+
+const handleSystemThemeChange = (event) => {
+  if (store.theme !== 'system') return
+  setTheme(event.matches ? 'dark' : 'light')
+}
+
+onMounted(() => {
+  if (typeof window === 'undefined' || typeof window.matchMedia !== 'function') return
+
+  systemThemeMediaQuery = window.matchMedia('(prefers-color-scheme: dark)')
+
+  if (typeof systemThemeMediaQuery.addEventListener === 'function') {
+    systemThemeMediaQuery.addEventListener('change', handleSystemThemeChange)
+  } else if (typeof systemThemeMediaQuery.addListener === 'function') {
+    systemThemeMediaQuery.addListener(handleSystemThemeChange)
+  }
+})
+
+onUnmounted(() => {
+  if (!systemThemeMediaQuery) return
+
+  if (typeof systemThemeMediaQuery.removeEventListener === 'function') {
+    systemThemeMediaQuery.removeEventListener('change', handleSystemThemeChange)
+  } else if (typeof systemThemeMediaQuery.removeListener === 'function') {
+    systemThemeMediaQuery.removeListener(handleSystemThemeChange)
+  }
+})
+
+const appearanceMode = computed({
+  get() {
+    if (store.backgroundType === 'warm') return 'warm'
+    if (store.backgroundType === 'reading') return 'reading'
+    if (store.backgroundType === 'image') return 'image'
+    if (store.theme === 'dark') return 'dark'
+    if (store.theme === 'light') return 'light'
+    return 'system'
+  },
+  set(mode) {
+    if (mode === 'dark') {
+      store.theme = 'dark'
+      store.backgroundType = 'default'
+      return
+    }
+
+    if (mode === 'light') {
+      store.theme = 'light'
+      store.backgroundType = 'default'
+      return
+    }
+
+    if (mode === 'system') {
+      store.theme = 'system'
+      store.backgroundType = 'default'
+      return
+    }
+
+    if (mode === 'warm') {
+      store.theme = 'light'
+      store.backgroundType = 'warm'
+      return
+    }
+
+    if (mode === 'reading') {
+      store.theme = 'light'
+      store.backgroundType = 'reading'
+      return
+    }
+
+    if (mode === 'image') {
+      store.theme = 'light'
+      store.backgroundType = 'image'
+    }
+  }
+})
 
 // Background Image Handling
 const handleImageUpload = (event) => {
@@ -41,12 +128,6 @@ const handleImageUpload = (event) => {
 
 // Helper to translate
 const t = (key) => store.t[key]
-
-// Background Style for App (This will be used in App.vue, but we preview it here or just logical check)
-// UI Helpers
-const tabs = ['General', 'Model', 'Appearance', 'About']
-const currentTab = ref('General')
-
 </script>
 
 <template>
@@ -88,25 +169,18 @@ const currentTab = ref('General')
           <h3>{{ t('appearance') }}</h3>
           
           <div class="form-group">
-            <label>{{ t('theme') }}</label>
-            <div class="segment-control">
-              <button :class="{ active: store.theme === 'light' }" @click="store.theme = 'light'">{{ t('light') }}</button>
-              <button :class="{ active: store.theme === 'dark' }" @click="store.theme = 'dark'">{{ t('dark') }}</button>
-              <button :class="{ active: store.theme === 'system' }" @click="store.theme = 'system'">{{ t('system') }}</button>
-            </div>
-          </div>
-
-          <div class="form-group">
-            <label>{{ t('background') }}</label>
-            <select v-model="store.backgroundType" class="select-input">
-              <option value="default">{{ t('default') }}</option>
+            <label>{{ t('appearance') }}</label>
+            <select v-model="appearanceMode" class="select-input">
+              <option value="dark">{{ t('dark') }}</option>
+              <option value="light">{{ t('light') }}</option>
+              <option value="system">{{ t('system') }}</option>
               <option value="warm">{{ t('warm') }}</option>
               <option value="reading">{{ t('reading') }}</option>
               <option value="image">{{ t('image') }}</option>
             </select>
           </div>
 
-          <div v-if="store.backgroundType === 'image'" class="form-group">
+          <div v-if="appearanceMode === 'image'" class="form-group">
             <label>{{ t('image') }}</label>
             <input type="file" accept="image/*" @change="handleImageUpload" class="file-input" />
             
@@ -488,3 +562,4 @@ const currentTab = ref('General')
   opacity: 0.7;
 }
 </style>
+
diff --git a/src/plugins/copilotPlugin.ts b/src/plugins/copilotPlugin.ts
index bda505e..56b4e0b 100644
--- a/src/plugins/copilotPlugin.ts
+++ b/src/plugins/copilotPlugin.ts
@@ -59,14 +59,14 @@ export const copilotGhostMark = $markSchema('copilot_ghost', () => ({
   }
 }))
 
-function clearRuntimeRequests(runtime: CopilotRuntime, invalidateRequest = true) {
+function clearRuntimeRequests(runtime: CopilotRuntime, invalidateRequest = true, abortReason = 'abort') {
   if (runtime.debounceTimer) {
     clearTimeout(runtime.debounceTimer)
     runtime.debounceTimer = null
   }
 
   if (runtime.abortController) {
-    runtime.abortController.abort()
+    runtime.abortController.abort(abortReason)
     runtime.abortController = null
   }
 
@@ -302,7 +302,7 @@ function doFetchSuggestion(
   const config = runtime.ctx.get(copilotConfigCtx.key)
 
   if (runtime.abortController) {
-    runtime.abortController.abort()
+    runtime.abortController.abort('superseded')
     runtime.abortController = null
   }
 
@@ -611,7 +611,7 @@ export const copilotPlugin = $prose((ctx) => new Plugin<CopilotState>({
         const nextHasGhost = Boolean(nextGhost?.suggestion && nextGhost.from < nextGhost.to)
         if (docChanged && prevHasGhost && nextHasGhost) {
           clearGhostText(nextView)
-          clearRuntimeRequests(runtime)
+          clearRuntimeRequests(runtime, true, 'superseded')
           return
         }
 
@@ -630,7 +630,7 @@ export const copilotPlugin = $prose((ctx) => new Plugin<CopilotState>({
 
         const { from, to } = nextView.state.selection
         if (from !== to) {
-          clearRuntimeRequests(runtime)
+          clearRuntimeRequests(runtime, true, 'manual')
           return
         }
 
@@ -638,7 +638,7 @@ export const copilotPlugin = $prose((ctx) => new Plugin<CopilotState>({
       },
       destroy: () => {
         unbindDomListeners(activeDom)
-        clearRuntimeRequests(runtime)
+        clearRuntimeRequests(runtime, true, 'destroy')
         runtimeByView.delete(view)
       }
     }
@@ -657,14 +657,14 @@ export function setCopilotEnabled(view: EditorView, value: boolean): void {
 
   runtime.enabled = value
   if (!value) {
-    clearRuntimeRequests(runtime)
+    clearRuntimeRequests(runtime, true, 'disabled')
   }
 }
 
 export function interruptCopilot(view: EditorView): void {
   const runtime = runtimeByView.get(view)
   if (!runtime) return
-  clearRuntimeRequests(runtime)
+  clearRuntimeRequests(runtime, true, 'manual')
 }
 
 export function checkSizeLimit(view: EditorView): { size: number; overLimit: boolean } {
diff --git a/src/plugins/mermaidPlugin.ts b/src/plugins/mermaidPlugin.ts
new file mode 100644
index 0000000..17add57
--- /dev/null
+++ b/src/plugins/mermaidPlugin.ts
@@ -0,0 +1,67 @@
+import { codeBlockConfig } from '@milkdown/kit/component/code-block'
+import mermaid from 'mermaid'
+
+// ── Mermaid init ────────────────────────────────────────────────────────────
+let mermaidReady = false
+let diagramCounter = 0
+
+function ensureMermaid() {
+    if (mermaidReady) return
+    const dark = window.matchMedia?.('(prefers-color-scheme: dark)').matches
+    mermaid.initialize({
+        startOnLoad: false,
+        theme: dark ? 'dark' : 'default',
+        securityLevel: 'loose',
+        fontFamily: 'inherit',
+    })
+    mermaidReady = true
+}
+
+// ── renderPreview ───────────────────────────────────────────────────────────
+// Pass this function to codeBlockConfig.renderPreview via crepe.editor.config().
+// For non-mermaid languages, return null to use the default preview renderer.
+
+export async function mermaidRenderPreview(
+    language: string,
+    content: string,
+    applyPreview: (value: null | string | HTMLElement) => void,
+): Promise<void> {
+    if (language !== 'mermaid') {
+        applyPreview(null)
+        return
+    }
+
+    ensureMermaid()
+
+    // Show a placeholder immediately
+    const wrapper = document.createElement('div')
+    wrapper.className = 'mermaid-block'
+    const inner = document.createElement('div')
+    inner.className = 'mermaid-inner'
+    inner.innerHTML = '<div class="mermaid-loading">···</div>'
+    wrapper.appendChild(inner)
+    applyPreview(wrapper)
+
+    const id = `mermaid-render-${++diagramCounter}`
+    const code = content.trim() || 'graph TD\nA-->B'
+
+    try {
+        const { svg } = await mermaid.render(id, code)
+        inner.innerHTML = svg
+        applyPreview(wrapper)
+    } catch (err) {
+        const pre = document.createElement('pre')
+        pre.className = 'mermaid-error'
+        pre.textContent = `Mermaid error:\n${err instanceof Error ? err.message : String(err)}`
+        inner.innerHTML = ''
+        inner.appendChild(pre)
+        applyPreview(wrapper)
+    }
+}
+
+// ── Milkdown plugin helper ─────────────────────────────────────────────────
+// Call this inside a crepe.editor.config() callback:
+//   ctx.update(codeBlockConfig.key, (prev) => ({ ...prev, renderPreview: mermaidRenderPreview }))
+//
+// Re-export the config key so callers don't need to import @milkdown/components directly.
+export { codeBlockConfig }
diff --git a/src/style.css b/src/style.css
index 90864c1..d513d5a 100644
--- a/src/style.css
+++ b/src/style.css
@@ -37,6 +37,8 @@
   --toggle-moon: #475569;
   --ghost-text: #7d8796;
   --ghost-code-bg: rgba(15, 23, 42, 0.06);
+  --mermaid-max-width: 800px;
+  --mermaid-max-height: 420px;
 
   --crepe-color-background: #ffffff;
   --crepe-color-on-background: #000000;
@@ -189,3 +191,64 @@ body {
     transition: none !important;
   }
 }
+
+/* ── Mermaid diagram blocks ─────────────────────────────────────────── */
+.mermaid-block {
+  display: block;
+  margin: 1em 0;
+  padding: 16px;
+  background: var(--crepe-color-surface, #f7f7f7);
+  border: 1px solid var(--panel-border, #d7deea);
+  border-radius: 8px;
+  cursor: pointer;
+  transition: border-color 160ms ease, box-shadow 160ms ease;
+  user-select: none;
+}
+
+.mermaid-block:hover {
+  border-color: var(--focus-ring, #3b82f6);
+}
+
+.mermaid-block.mermaid-selected {
+  border-color: var(--focus-ring, #3b82f6);
+  box-shadow: 0 0 0 2px color-mix(in srgb, var(--focus-ring, #3b82f6) 25%, transparent);
+}
+
+.mermaid-inner {
+  display: block;
+  max-width: min(100%, var(--mermaid-max-width));
+  max-height: var(--mermaid-max-height);
+  margin: 0 auto;
+  overflow: auto;
+}
+
+.mermaid-inner svg {
+  display: block;
+}
+
+.mermaid-loading {
+  padding: 24px;
+  text-align: center;
+  font-size: 1.4em;
+  color: var(--muted-text, #6b7280);
+  letter-spacing: 0.2em;
+  animation: mermaid-pulse 1.2s ease-in-out infinite;
+}
+
+@keyframes mermaid-pulse {
+  0%, 100% { opacity: 0.4; }
+  50%       { opacity: 1;   }
+}
+
+.mermaid-error {
+  padding: 12px 16px;
+  margin: 0;
+  background: color-mix(in srgb, var(--danger-text, #dc2626) 8%, transparent);
+  border: 1px solid var(--danger-text, #dc2626);
+  border-radius: 6px;
+  color: var(--danger-text, #dc2626);
+  font-size: 12px;
+  font-family: 'SF Mono', 'Monaco', 'Inconsolata', 'Fira Mono', monospace;
+  white-space: pre-wrap;
+  word-break: break-word;
+}
diff --git a/src/utils/api.js b/src/utils/api.js
index 60c3cbc..6000b35 100644
--- a/src/utils/api.js
+++ b/src/utils/api.js
@@ -1,7 +1,51 @@
 import { API_URL } from './config.js'
+import { useSettingsStore } from '../stores/settings'
+
+const API_KEY = 'your-secret-key-here'
 
 let cachedIP = null
 
+function generateRequestId() {
+    if (typeof crypto !== 'undefined' && typeof crypto.randomUUID === 'function') {
+        return crypto.randomUUID()
+    }
+    return `${Date.now()}-${Math.random().toString(16).slice(2)}`
+}
+
+function getCancelUrl(apiUrl) {
+    const normalized = String(apiUrl || '').replace(/\/+$/, '')
+    if (!normalized) return '/v1/completions/cancel'
+    if (normalized.endsWith('/v1/completions')) {
+        return `${normalized}/cancel`
+    }
+    return `${normalized}/cancel`
+}
+
+function normalizeAbortReason(reason) {
+    if (typeof reason === 'string' && reason.trim()) {
+        return reason.trim().slice(0, 64)
+    }
+    return 'abort'
+}
+
+async function sendCancelRequest(cancelUrl, requestId, reason) {
+    try {
+        await fetch(cancelUrl, {
+            method: 'POST',
+            headers: {
+                'Content-Type': 'application/json',
+                'X-API-Key': API_KEY,
+            },
+            body: JSON.stringify({
+                request_id: requestId,
+                reason,
+            }),
+        })
+    } catch (e) {
+        console.debug('[Copilot] cancel request failed', e)
+    }
+}
+
 async function getClientIP() {
     if (cachedIP) return cachedIP
     try {
@@ -16,15 +60,30 @@ async function getClientIP() {
     }
 }
 
-import { useSettingsStore } from '../stores/settings'
-
 export async function fetchSuggestion(prefix, suffix, signal, apiUrl = API_URL) {
+    const requestId = generateRequestId()
+    const cancelUrl = getCancelUrl(apiUrl)
+
+    const onAbort = () => {
+        const reason = normalizeAbortReason(signal?.reason)
+        void sendCancelRequest(cancelUrl, requestId, reason)
+    }
+
+    if (signal) {
+        if (signal.aborted) {
+            onAbort()
+        } else {
+            signal.addEventListener('abort', onAbort, { once: true })
+        }
+    }
+
     try {
         const settings = useSettingsStore()
         const clientIP = await getClientIP()
         const headers = {
             'Content-Type': 'application/json',
-            'X-API-Key': 'your-secret-key-here'
+            'X-API-Key': API_KEY,
+            'X-Request-Id': requestId,
         }
 
         // Only send IP if privacy mode is OFF
@@ -41,15 +100,15 @@ export async function fetchSuggestion(prefix, suffix, signal, apiUrl = API_URL)
             user_preferences: {
                 language: settings.language,
                 currency: settings.currency,
-                timezone: settings.detectedTimezone
-            }
+                timezone: settings.detectedTimezone,
+            },
         }
 
         const res = await fetch(apiUrl, {
             method: 'POST',
             headers,
             body: JSON.stringify(body),
-            signal
+            signal,
         })
 
         if (!res.ok) {
@@ -95,5 +154,9 @@ export async function fetchSuggestion(prefix, suffix, signal, apiUrl = API_URL)
         } else {
             throw e
         }
+    } finally {
+        if (signal) {
+            signal.removeEventListener('abort', onAbort)
+        }
     }
 }