@h-ai/ui 0.1.0-alpha.20 → 0.1.0-alpha.22

package/README.md

@@ -267,6 +267,8 @@ components/
 | `AiTableEditor`          | AI 表格编辑器    | `columns`, `rows`, `editable`, `ondownload` |
 
 > `AiDocumentEditor` 默认只允许 Markdown 内置预览。HTML / JS / CSS 等高风险预览需要显式设置 `allowUnsafeCodePreview`，或通过 `oncoderun` 返回受控的预览结果。
+>
+> Mermaid 图表开箱即用：文档（`sourceKind='document'`）里的 ```` ```mermaid ```` 代码块在阅读态自动渲染为图表；code 模式（`sourceKind='code'` + `showCodePreviewToggle`）下可在「代码 / 预览」间切换。Mermaid 以 `securityLevel: 'strict'` 渲染为消毒后的 SVG，无需开启 `allowUnsafeCodePreview`。
 
 #### CRUD 场景（5 个）
 

package/dist/components/scenes/ai/AiDocumentEditor.svelte

@@ -36,6 +36,7 @@
   import { resolveDocumentMarkdownContent } from './document-download.js'
   import { renderMarkdownDocument } from './document-parse.js'
   import { parseMarkdown } from './markdown-parse.js'
+  import { renderMermaidDiagram } from './mermaid-render.js'
 
   interface SelectionToolbarPosition {
     /** 选区工具条相对滚动容器的 top 坐标。 */
@@ -471,6 +472,7 @@
 
     requestAnimationFrame(() => {
       syncCodePreviewHosts()
+      syncMermaidHosts()
       syncActiveHeadingFromScroll()
       syncPinnedTitleVisibility()
     })
@@ -909,6 +911,15 @@
       ? `<p class="hai-md-preview-desc">${escapePreviewText(result.description)}</p>`
       : ''
 
+    if (result.kind === 'mermaid') {
+      host.innerHTML = `<div class="hai-md-preview-card hai-md-preview-mermaid"><div class="hai-md-preview-head">${previewTitle}</div>${previewDesc}<div class="hai-md-mermaid hai-md-mermaid-preview"></div></div>`
+      const mermaidEl = host.querySelector<HTMLElement>('.hai-md-mermaid-preview')
+      if (mermaidEl) {
+        void renderMermaidHost(mermaidEl, result.content)
+      }
+      return
+    }
+
     if (result.kind === 'html') {
       const previewSandbox = escapePreviewAttribute(
         resolvePreviewSandbox(result.allowScripts),
@@ -931,6 +942,55 @@
     host.innerHTML = `<div class="hai-md-preview-card"><div class="hai-md-preview-head">${previewTitle}</div>${previewDesc}<pre>${escapePreviewText(result.content)}</pre></div>`
   }
 
+  /**
+   * mermaid 图表位于 `{@html}` 注入的 DOM 内部，渲染是异步的。
+   * 阅读态的图表块和 code 模式预览槽都复用这里把源码渲染为 SVG。
+   */
+  function syncMermaidHosts(): void {
+    if (!previewHost) {
+      return
+    }
+
+    const hosts = previewHost.querySelectorAll<HTMLElement>('[data-mermaid-host]')
+    for (const host of hosts) {
+      if (
+        host.dataset.mermaidStatus === 'ready'
+        || host.dataset.mermaidStatus === 'rendering'
+      ) {
+        continue
+      }
+
+      const blockId = host.dataset.mermaidHost
+      if (!blockId) {
+        continue
+      }
+
+      const block = lookupCodeBlock(blockId)
+      if (!block) {
+        continue
+      }
+
+      void renderMermaidHost(host, block.code)
+    }
+  }
+
+  /**
+   * 把单个 mermaid 源码渲染进目标节点；语法错误时展示本地化错误提示。
+   * `mermaidStatus` 既避免同一帧重复渲染，也兜住多次 effect 触发。
+   */
+  async function renderMermaidHost(host: HTMLElement, code: string): Promise<void> {
+    host.dataset.mermaidStatus = 'rendering'
+    try {
+      const svg = await renderMermaidDiagram(code)
+      host.innerHTML = svg
+      host.dataset.mermaidStatus = 'ready'
+    }
+    catch (error) {
+      host.dataset.mermaidStatus = 'error'
+      host.innerHTML = `<div class="hai-md-mermaid-error">${escapePreviewText(error instanceof Error ? error.message : uiM('markdown_mermaid_failed'))}</div>`
+    }
+  }
+
   function escapePreviewText(value: string): string {
     return value
       .replace(/&/g, '&amp;')
@@ -4418,6 +4478,48 @@
     color: oklch(var(--bc));
   }
 
+  /* mermaid 图表：阅读态自动渲染，code 预览态复用同一容器。 */
+  .hai-markdown :global(.hai-md-mermaid) {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    margin: 1.25em 0;
+    padding: 1rem;
+    border-radius: 0.95rem;
+    border: 1px solid oklch(var(--bc) / 0.08);
+    background: oklch(var(--b1));
+    overflow-x: auto;
+  }
+
+  .hai-markdown :global(.hai-md-mermaid svg) {
+    max-width: 100%;
+    height: auto;
+  }
+
+  .hai-markdown :global(.hai-md-mermaid-error) {
+    width: 100%;
+    padding: 0.75rem 1rem;
+    border-radius: 0.6rem;
+    background: oklch(var(--er, 0.6 0.2 25) / 0.08);
+    color: oklch(var(--er, 0.6 0.2 25));
+    font-size: 0.85rem;
+    line-height: 1.5;
+    white-space: pre-wrap;
+    text-align: left;
+  }
+
+  :global(.hai-md-preview-mermaid) {
+    display: flex;
+    flex-direction: column;
+    gap: 0.5rem;
+  }
+
+  :global(.hai-md-mermaid-preview) {
+    margin: 0;
+    border: none;
+    background: transparent;
+  }
+
   .hai-markdown-code-only :global(.hai-md-code-block[data-code-view='preview'] .hai-md-preview-card) {
     display: flex;
     flex-direction: column;

package/dist/components/scenes/ai/code-preview.js

@@ -1,3 +1,4 @@
+import { isMermaidLanguage } from './mermaid-render.js';
 const HTML_DOCUMENT_PATTERN = /<\s*(?:!doctype|html|body|head|div|section|article|main|span|style|script|svg|canvas)\b/i;
 const HTML_LANGUAGE_SET = new Set(['html', 'htm', 'xhtml', 'xml', 'svg']);
 const JAVASCRIPT_LANGUAGE_SET = new Set(['javascript', 'js', 'typescript', 'ts']);
@@ -12,6 +13,14 @@ export function resolvePreviewSandbox(allowScripts) {
 }
 export function createBuiltInCodePreview(request, options) {
     const language = (request.language ?? '').trim().toLowerCase();
+    // mermaid 由 securityLevel:'strict' 渲染为消毒后的 SVG，无需 opt-in 高风险开关。
+    if (isMermaidLanguage(language)) {
+        return {
+            kind: 'mermaid',
+            title: options.previewTitle,
+            content: request.code,
+        };
+    }
     if (language === 'markdown' || language === 'md') {
         return {
             kind: 'markdown',

package/dist/components/scenes/ai/document-parse.js

@@ -6,6 +6,7 @@
 import { Marked } from 'marked';
 import { createEditorMarkdownExtensions, extractPlainTextFromTokens, } from './editor-markdown-extensions.js';
 import { highlightCode, isLanguageSupported } from './highlight.js';
+import { isMermaidLanguage } from './mermaid-render.js';
 /** Default parsing options for document mode. */
 const DEFAULT_OPTIONS = {
     enableHighlight: true,
@@ -103,6 +104,16 @@ function createRendererObject(options, state) {
         code({ text, lang }) {
             // rawLanguage is the original info string from the fence.
             const rawLanguage = lang?.trim() || '';
+            // mermaid 块在阅读态自动渲染为图表；只有 code 模式的代码/预览切换才保留源码视图。
+            if (isMermaidLanguage(rawLanguage) && !options.showCodePreviewToggle) {
+                const mermaidBlockId = `hai-md-code-${state.codeBlocks.length + 1}`;
+                state.codeBlocks.push({
+                    id: mermaidBlockId,
+                    code: text,
+                    language: rawLanguage,
+                });
+                return `<div class="hai-md-mermaid" data-mermaid-host="${escapeHtml(mermaidBlockId)}"></div>`;
+            }
             // highlightLanguage is validated against supported languages.
             const highlightLanguage = rawLanguage && isLanguageSupported(rawLanguage)
                 ? rawLanguage

package/dist/components/scenes/ai/document-types.d.ts

@@ -34,7 +34,7 @@ export interface MarkdownCodeRunRequest {
 }
 export interface MarkdownCodeRunResult {
     /** Output kind that drives preview rendering. */
-    kind?: 'text' | 'markdown' | 'html';
+    kind?: 'text' | 'markdown' | 'html' | 'mermaid';
     /** Preview output content. */
     content: string;
     /** Preview title; default text is used when omitted. */

package/dist/components/scenes/ai/mermaid-render.d.ts

@@ -0,0 +1,14 @@
+/**
+ * @h-ai/ui — Mermaid 图表渲染助手
+ *
+ * 以懒加载方式引入 mermaid，把图表源码渲染为安全的 SVG。
+ * 使用 `securityLevel: 'strict'`，由 mermaid 自身完成消毒，避免 {@html} 注入风险。
+ */
+/**
+ * 判断 fence 语言是否为 mermaid。
+ */
+export declare function isMermaidLanguage(language: string | undefined | null): boolean;
+/**
+ * 把 mermaid 源码渲染为 SVG 字符串；语法错误时抛出由调用方兜底展示。
+ */
+export declare function renderMermaidDiagram(code: string): Promise<string>;

package/dist/components/scenes/ai/mermaid-render.js

@@ -0,0 +1,42 @@
+/**
+ * @h-ai/ui — Mermaid 图表渲染助手
+ *
+ * 以懒加载方式引入 mermaid，把图表源码渲染为安全的 SVG。
+ * 使用 `securityLevel: 'strict'`，由 mermaid 自身完成消毒，避免 {@html} 注入风险。
+ */
+/** mermaid 模块只在首次渲染时动态加载，并缓存初始化后的实例。 */
+let mermaidLoader = null;
+/** render id 需要在页面内唯一，递增计数器即可保证不冲突。 */
+let renderSeq = 0;
+/**
+ * 判断 fence 语言是否为 mermaid。
+ */
+export function isMermaidLanguage(language) {
+    return (language ?? '').trim().toLowerCase() === 'mermaid';
+}
+/**
+ * 懒加载并初始化 mermaid，多次调用复用同一实例。
+ */
+async function loadMermaid() {
+    if (!mermaidLoader) {
+        mermaidLoader = import('mermaid').then((module) => {
+            const mermaid = module.default;
+            mermaid.initialize({
+                startOnLoad: false,
+                securityLevel: 'strict',
+                theme: 'default',
+            });
+            return mermaid;
+        });
+    }
+    return mermaidLoader;
+}
+/**
+ * 把 mermaid 源码渲染为 SVG 字符串；语法错误时抛出由调用方兜底展示。
+ */
+export async function renderMermaidDiagram(code) {
+    const mermaid = await loadMermaid();
+    const renderId = `hai-mermaid-${Date.now()}-${renderSeq++}`;
+    const { svg } = await mermaid.render(renderId, code);
+    return svg;
+}

package/dist/messages/en-US.json

@@ -248,6 +248,7 @@
   "markdown_run_failed": "Run failed",
   "markdown_run_unavailable": "No preview runner is configured for this code block.",
   "markdown_run_unavailable_language": "Local preview for {language} is not supported. Reason: no runtime is configured for this language.",
+  "markdown_mermaid_failed": "Failed to render diagram",
   "table_editor_eyebrow": "Editable table",
   "table_copy": "Copy table",
   "table_download": "Download table",

package/dist/messages/zh-CN.json

@@ -248,6 +248,7 @@
   "markdown_run_failed": "运行失败",
   "markdown_run_unavailable": "当前代码块未配置运行预览器。",
   "markdown_run_unavailable_language": "暂不支持 {language} 的本地预览。原因：当前环境未配置该语言的运行器。",
+  "markdown_mermaid_failed": "图表渲染失败",
   "table_editor_eyebrow": "可编辑表格",
   "table_copy": "复制表格",
   "table_download": "下载表格",

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@h-ai/ui",
   "type": "module",
-  "version": "0.1.0-alpha.20",
+  "version": "0.1.0-alpha.22",
   "description": "Hai Framework UI component library for Svelte 5 Runes.",
   "license": "Apache-2.0",
   "svelte": "./dist/index.js",
@@ -33,7 +33,7 @@
     "access": "public"
   },
   "peerDependencies": {
-    "svelte": "^5.55.5"
+    "svelte": "^5.55.9"
   },
   "dependencies": {
     "@internationalized/date": "^3.8.0",
@@ -42,9 +42,10 @@
     "html2canvas": "^1.4.1",
     "jspdf": "^4.2.1",
     "marked": "^18.0.0",
+    "mermaid": "^11.12.0",
     "shiki": "^4.0.2",
     "tailwind-merge": "^3.5.0",
-    "@h-ai/core": "0.1.0-alpha.20"
+    "@h-ai/core": "0.1.0-alpha.22"
   },
   "devDependencies": {
     "@sveltejs/package": "^2.5.7",