Diagrams and fenced previews

Complete interactive example

The flowchart uses built-in Mermaid. The chart below uses the custom echarts fence extension supplied on this page. Edit source, change values and move the selection away to update the preview. Read Markdown to verify rendering has not reserialized the fence.

Built-in text diagrams and custom charts

The flowchart body starts with flowchart LR, but its fence language remains mermaid. Mermaid flowchart and flowchart.js are different DSLs. The built-in extension does not route flow to another engine.

Install and reuse existing behavior

pnpm add '@quirekit/msfe-markdown-extras@workspace:*' echarts

import { Mermaid } from '@quirekit/msfe-markdown-extras'
import { VueComponentViewRenderer } from '@quirekit/msfe-vue'
import PreviewControls from './preview-controls.vue'

const diagrams = Mermaid.configure({
  controls: VueComponentViewRenderer(PreviewControls),
})

Built-in Mermaid handles closed-fence recognition, asynchronous rendering, source fallback, retry and cleanup. Its public option is currently controls; it has no arbitrary engine render callback. Create an extension for a different rendering pipeline.

The built-in renderer uses strict security, disables HTML labels and validates SVG output. It rejects document initialization directives and limits source length and edges. Failures retain readable source. Syntax depends on the installed Mermaid version; see official Mermaid usage.

PlantUML and Graphviz/DOT

Standalone MSFE hosts install TextDiagrams; MD Editor includes it by default. It recognizes different languages from Mermaid, without competing for the same fence:

import { Mermaid, TextDiagrams } from '@quirekit/msfe-markdown-extras'

const extensions = [Mermaid, TextDiagrams]

```plantuml
@startuml
Client -> Service: Request
Service --> Client: Response
@enduml
```

```dot
digraph G {
  rankdir=LR;
  Draft -> Review -> Publish;
}
```

In MD Editor, Insert → Text diagram opens the shared Classic / Block source workbench. Saving produces standard Markdown fences. Cancellation or rendering failure never commits a draft; existing invalid source remains readable and editable. features.extras.mermaid and features.extras.textDiagram control Mermaid and PlantUML / DOT separately.

Standalone text-diagram documentation

The shared workbench, 25 bilingual templates, CodeMirror shortcuts, SVG / PNG downloads, standalone Vue integration and asset deployment are maintained in the Text Diagram documentation. Open the playground or support boundaries directly. These are fixed-port local preview links; the planned domain is text-diagram.quirekit.com.

This page continues to own MSFE fence integration and custom chart extensions. PlantUML uses the local official JavaScript core; syntax and appearance are not guaranteed to match the full Java distribution. Failures retain source.

1. Define the data protocol

This example accepts { type: 'bar' | 'line', labels: string[], values: number[] }. Arrays must have matching lengths of 1–50 and numbers must be finite. Source is limited to 16,000 UTF-16 units. charts/data.ts rejects unknown fields rather than implying arbitrary ECharts option support.

~~~echarts
{"type":"line","labels":["Jan","Feb","Mar"],"values":[12,20,16]}
~~~

This is a minimal application protocol, not built-in MSFE ECharts support or a complete EChartsOption serializer. Extend validation, mapping and tests together. Never evaluate document text as JavaScript. JSON cannot and should not carry formatter functions.

2. Recognize confirmed, closed fences

charts/extension.ts uses defineSource({ nodes: ['FencedCode'] }), checks CodeInfo, two CodeMark nodes and allowed parent context, then reads CodeText. Return null for unclosed, unknown or unsupported structures to retain source.

The custom ECharts example deliberately replaces only top-level fences. ECharts inside quotes or lists remains source; built-in Mermaid has its own container handling. Supporting nested chart blocks requires list markers, quote prefixes, indentation and hit-testing work, not merely expanding match.from to a line start.

3. Provide a block projection

addProjectionLayers() declares placement: 'block', then componentView(chartRenderer, props) describes the non-editable preview. Block output is available before viewport layout, avoiding multiline replacement geometry errors.

Keep renderer identity and keys stable and pass changed props through update(). A selection entering the source range reveals it. The chart DOM must not become another editor. A projection-only codec may return null from patch().

4. Own loading, sizing and cleanup

charts/renderer.ts passes runtime scope and requestMeasure to Vue. Source changes cancel the preceding child scope before loading another chart. Unmounts, document replacement and late results require cleanup.

Give the container dimensions before echarts.init(). Observe its size with ResizeObserver and call resize(); disconnect and dispose() during cleanup. This example fixes chart height and requests CodeMirror measurement after status changes, following ECharts sizing and disposal guidance.

Failures show an explanation, the exact fence and a retry action. They never discard source. Readonly disables source editing while preserving viewing and retry.

5. Adapt flowchart.js or another engine

Reuse the example structure while replacing these responsibilities:

1. Give the extension and layer unique names and recognize flow, without competing with Mermaid.
2. Replace JSON validation with bounded DSL validation.
3. Load the engine in a browser lifetime. flowchart.js exposes parse(source) followed by drawSVG(...) against a sized target; consult its official project documentation for parameters.
4. Wrap engine objects, SVG, listeners and global dependencies in an independent resource lease. Release the old view before updating. Do not assume ECharts cancellation or cleanup behavior applies to another engine.
5. Constrain links, HTML, external resources and unsafe SVG. Retain copyable source fallback and verify theme, sizing and selection behavior.

The interactive example actually runs Mermaid and ECharts. flowchart.js is an adapter path, not an engine bundled or verified by MSFE. Worker-based layout remains possible but still needs cancellation/version checks and a controlled DOM output boundary.

Acceptance criteria

Compare exact source before and after rendering. Cover valid/invalid JSON, rapid changes, document replacement while loading, viewport exit, theme changes, narrow containers, readonly, copying, undo and native source reveal. A visible chart alone is insufficient. Continue with Resources and Projection layers.