Files

T

boos e0a5f57793 feat(desktop): embed BoosAPI Desktop client as a subproject

Vendor the rebranded BoosAPI Desktop client (Tauri + Vue) into metapi as
a monorepo subdirectory under desktop/. Source only — node_modules,
dist, Cargo target and the upstream .git history are excluded.

desktop/ keeps its own independent Cargo workspace (desktop/src-tauri
with crates/*); it is not part of the backend boosapi crate, so a
`cargo check` at the metapi root still compiles only the backend. Build
the desktop app from desktop/src-tauri per desktop/README.md.

Note: app icons are still placeholder assets pending the final BoosAPI
logo. The updater signing keys live outside the repo and are not
included.

2026-06-22 11:32:57 +08:00

3.3 KiB

Raw Permalink Blame History

Mermaid quick start

Mermaid diagrams stream progressively in markstream-vue: as soon as the syntax becomes valid the chart renders, then refines as more tokens arrive. This page covers setup, a streaming example, and common fixes.

1. Install & import

pnpm add mermaid

No extra Mermaid CSS import is required. Keep markstream-vue/index.css after your reset and inside @layer components when using Tailwind/UnoCSS so utility layers do not override the renderer styles.

@import 'modern-css-reset';

@layer components {
  @import 'markstream-vue/index.css';
}

2. Streaming example

Mermaid renders as soon as the snippet is syntactically valid. The snippet below shows a gradual update (ideal for AI responses or long-running tasks):

<script setup lang="ts">
import MarkdownRender from 'markstream-vue'
import { ref } from 'vue'

const content = ref('')
const steps = [
  '```mermaid\n',
  'graph TD\n',
  'A[Start]-->B{Is valid?}\n',
  'B -- Yes --> C[Render]\n',
  'B -- No  --> D[Wait]\n',
  '```\n',
]

let i = 0
const id = setInterval(() => {
  content.value += steps[i] || ''
  i++
  if (i >= steps.length)
    clearInterval(id)
}, 120)
</script>

<template>
  <MarkdownRender :content="content" />
  <!-- Diagram progressively appears as content streams in -->
</template>

Quick try — paste this Markdown into a page or component:

\`\`\`mermaid
graph LR
A[Start]-->B
B-->C[End]
\`\`\`

3. Advanced component: `MermaidBlockNode`

Need header controls, export buttons, or a pseudo-fullscreen modal? Use MermaidBlockNode or override the default renderer via setCustomComponents. A runnable playground demo lives at /mermaid-export-demo. If diagrams come from untrusted users/LLMs, pass :is-strict="true" to enable Mermaid's strict mode and SVG sanitization so injected HTML/event handlers are stripped before render.

4. Troubleshooting checklist

Peer not installed — run pnpm add mermaid. Without it the renderer falls back to showing source text.
Async errors — check the browser console for Mermaid logs. Versions prior to 11 are unsupported; upgrade to ≥ 11.
SSR guard — Mermaid needs the DOM. Wrap the component in <ClientOnly> for Nuxt or check typeof window !== 'undefined' before mounting in SSR contexts.
Heavy graphs — consider pre-rendering server-side (mermaid CLI) or caching SVG output; the component exposes svgString when using MermaidBlockNode export events.

Still stuck? Reproduce the issue in the playground (pnpm play) with a minimal Markdown sample and link it when opening a bug report.

CDN usage (no bundler)

If you load Mermaid via CDN and want progressive off-main-thread parsing, inject a CDN-backed worker:

import { createMermaidWorkerFromCDN, enableMermaid, setMermaidLoader, setMermaidWorker } from 'markstream-vue'

// use the CDN global (UMD) on the main thread
setMermaidLoader(() => (window as any).mermaid)
enableMermaid(() => (window as any).mermaid)

// optional: worker used for parse/prefix checks during streaming
const { worker } = createMermaidWorkerFromCDN({
  mode: 'module',
  mermaidUrl: 'https://cdn.jsdelivr.net/npm/mermaid@11/dist/mermaid.esm.min.mjs',
})
if (worker)
  setMermaidWorker(worker)

3.3 KiB Raw Permalink Blame History