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.
This commit is contained in:
@@ -0,0 +1,99 @@
|
||||
# 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
|
||||
|
||||
```bash
|
||||
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.
|
||||
|
||||
```css
|
||||
@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):
|
||||
|
||||
```vue twoslash
|
||||
<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:
|
||||
|
||||
```md
|
||||
\`\`\`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`](/guide/mermaid-block-node) or override the default renderer via [setCustomComponents](/guide/mermaid-block-node-override). 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
|
||||
|
||||
1. **Peer not installed** — run `pnpm add mermaid`. Without it the renderer falls back to showing source text.
|
||||
2. **Async errors** — check the browser console for Mermaid logs. Versions prior to 11 are unsupported; upgrade to ≥ 11.
|
||||
3. **SSR guard** — Mermaid needs the DOM. Wrap the component in `<ClientOnly>` for Nuxt or check `typeof window !== 'undefined'` before mounting in SSR contexts.
|
||||
4. **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:
|
||||
|
||||
```ts twoslash
|
||||
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)
|
||||
```
|
||||
Reference in New Issue
Block a user