T-RJCY-mermaid-block-source-prop-flows

State: closed/done · Impact: medium · Complexity: small

Goal

The flows experience renders its workflow diagram with its own mermaid import and v-html, bypassing obsidian-md’s MermaidBlock. This task gives MermaidBlock a source prop for callers that hold diagram text rather than a hast node, moves flows onto it, and deletes the duplicate.

Today

Location	Role today
solutions/determined/experiences/flows/app/components/FlowsMermaidPreview.vue	Dynamic mermaid import, useColorMode theme, strict security level, v-html of the svg
solutions/determined/experiences/flows/app/components/FlowsDesigner.vue	Mounts FlowsMermaidPreview with mermaidCode from toMermaid(wf)
solutions/determined/experiences/flows/package.json	Depends on mermaid directly; no @sksizer/obsidian-md
solutions/determined/experiences/flows/nuxt.config.ts	Layer css only
packages/ts/obsidian-md/src/vue/components/MermaidBlock.ts	Renders sourceOf(props.node) with props.theme; exported from src/vue/index.ts
packages/ts/obsidian-md/test/vue-components.test.ts	Component suite
packages/ts/obsidian-md/README.md	Documents the Vue components

Proposed

MermaidBlock accepts source?: string; when set it renders that text and ignores node, using the renderMermaid helper from T-RCWI-md-obsidian-md-sync-helpers. Flows depends on @sksizer/obsidian-md, transpiles it, and FlowsDesigner.vue mounts <MermaidBlock :source="mermaidCode" :theme="colorMode.value === 'dark' ? 'dark' : 'neutral'" /> inside the existing client-only region. FlowsMermaidPreview.vue and the mermaid dependency are deleted.

Approach

1. MermaidBlock.ts: add the source prop; sourceOf becomes props.source ?? sourceOf(props.node); the fallback pre shows the same text. Add a test case in vue-components.test.ts and a line in README.md.
2. Flows package.json: add @sksizer/obsidian-md (workspace:*), delete mermaid; nuxt.config.ts: build.transpile: ['@sksizer/obsidian-md'].
3. FlowsDesigner.vue: import MermaidBlock from @sksizer/obsidian-md/vue; replace the FlowsMermaidPreview mount; keep the error and svg width styling on a wrapper.
4. Delete FlowsMermaidPreview.vue.
5. Root bun install; bun install --frozen-lockfile.
6. Verify: bun test in packages/ts/obsidian-md; moon run product-workbench:check; open a workflow’s diagram tab in light and dark; moon run :check :test --affected. Flip the mermaid row of the duplicates ledger in docs/LIBRARIES.md.

Files to touch

Location	Kind	Change
packages/ts/obsidian-md/src/vue/components/MermaidBlock.ts	modify	source prop
packages/ts/obsidian-md/test/vue-components.test.ts	modify	source prop test
packages/ts/obsidian-md/README.md	modify	Document source
solutions/determined/experiences/flows/package.json	modify	Add @sksizer/obsidian-md; delete mermaid
solutions/determined/experiences/flows/nuxt.config.ts	modify	Transpile @sksizer/obsidian-md
solutions/determined/experiences/flows/app/components/FlowsDesigner.vue	modify	Mount MermaidBlock
solutions/determined/experiences/flows/app/components/FlowsMermaidPreview.vue	delete	Replaced by MermaidBlock
docs/LIBRARIES.md	modify	Mermaid preview duplicate row flips to resolved
bun.lock	modify	Root lockfile regen

Acceptance criteria

• AC-1: FlowsMermaidPreview.vue no longer exists and grep -rn FlowsMermaidPreview solutions/determined returns nothing.
• AC-2: solutions/determined/experiences/flows/package.json has no mermaid entry.
• AC-3: MermaidBlock mounted with source and no node renders an svg (test in vue-components.test.ts); bun test passes in packages/ts/obsidian-md.
• AC-4: moon run product-workbench:check passes; light and dark screenshots of a flows diagram are attached to the PR.
• AC-5: bun install --frozen-lockfile passes at the root.

Out of scope

• Retiring solutions/determined/apps/workflow-designer/app/components/MermaidPreview.vue (T-09DA-retire-workflow-designer-and-vault-backup).
• The layer’s theme-bound MdMermaidBlock; flows binds the theme itself.
• Rendering mermaid inside the editor (T-VCFL-md-engine-mermaid).

Dependencies

• T-RCWI-md-obsidian-md-sync-helpers supplies the shared renderMermaid helper.
• D-7VMX-markdown-ecosystem-strategy d.10: the flows preview component and its dependency are deleted.

Discovery context

Member of milestone M-931L; wave 3b of D-K3EM-markdown-editor-chrome-and-plugin-environment.

Depends on

T-RCWI-md-obsidian-md-sync-helpers

---

← Back to Tasks