Repository navigation
feat(muya): restore flowchart and sequence diagrams - #4385
Conversation
Restore the flowchart and sequence diagram code blocks that the legacy
muyajs engine supported but the TypeScript rewrite dropped, for feature
parity ahead of the desktop migration.
- Add flowchart.js (the package legacy used) plus the snap.svg /
underscore / webfontloader runtime deps for sequence diagrams.
- Vendor the js-sequence-diagrams library (bramp, BSD) under
src/utils/diagram/sequence/. The js-sequence-diagrams npm package is a
dead security-holder placeholder, so legacy vendored the source; we do
the same. Dropped its dead jison UMD `exports` fallback (the file is
ESM) to avoid a Rollup COMMONJS_VARIABLE_IN_ESM warning.
- Wire flowchart + sequence into loadRenderer, the live diagram preview
(diagramPreview), and the HTML export path (markdownToHtml). Both use
the parse(code).drawSVG(target, options) API, matching legacy.
- Parse ```flowchart``` / ```sequence``` fences into diagram blocks
(markdownToState, IDiagramMeta, getHighlightHtml diagram-type list).
- Add the sequenceTheme option ('hand' | 'simple', default 'hand') to
IMuyaOptions and MUYA_DEFAULT_OPTIONS, and honor it when rendering
sequence diagrams.
- Ambient module declarations for flowchart.js, snapsvg-cjs and the
vendored sequence module; ignore the vendored third-party files in
eslint (kept verbatim).
Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
- Add Flowchart and Sequence entries to the quick-insert diagram section and wire the insert handler to create diagram blocks of those types. - Add flowchart + sequence icons to the paragraph front-button diagram icon map. Reuse the existing flowchart icon (already present in muya assets) and port the sequence icon from the legacy muyajs pngicon set. - Center exported flowchart / sequence diagram divs (exportStyle.css), matching plantuml / mermaid / vega-lite. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
- diagramFlowchartSequence.spec.ts: ```flowchart``` and ```sequence``` fences parse into diagram blocks of the right type and round-trip back to their fence via stateToMarkdown; mermaid/plantuml/vega-lite still parse (no regression); sequenceTheme defaults to 'hand'. - diagramMenuEntries.spec.ts: the quick-insert diagram section exposes flowchart + sequence entries (with icons) alongside the existing three. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
|
Website preview ready: https://pr-4385-marktext-website.ransixi.workers.dev Built from |
There was a problem hiding this comment.
Pull request overview
Restores flowchart and sequence diagram fenced blocks in the TypeScript Muya engine (packages/muya) to match legacy packages/muyajs diagram feature parity, including wiring for live preview, HTML export, and quick-insert UI.
Changes:
- Added
flowchart+sequenceas first-class diagram types across parsing/serialization, highlighting, preview rendering, and HTML export rendering. - Vendored the
js-sequence-diagrams(Snap.svg-backed) renderer plus its CSS/font assets, and added runtime dependencies needed to run it. - Extended UI configs (quick insert + front-button icons) and added unit tests to lock in the restored behavior and menu entries.
Reviewed changes
Copilot reviewed 18 out of 25 changed files in this pull request and generated no comments.
Show a summary per file
| File | Description |
|---|---|
| pnpm-lock.yaml | Locks newly added diagram-related dependencies. |
| packages/muya/package.json | Adds flowchart/sequence runtime deps and typings for underscore/webfontloader. |
| packages/muya/src/utils/marked/getHighlightHtml.ts | Treats flowchart/sequence as diagram languages to avoid Prism highlighting. |
| packages/muya/src/utils/diagram/index.ts | Extends loadRenderer to dynamically load flowchart.js and the vendored sequence renderer. |
| packages/muya/src/utils/diagram/sequence/sequence-diagram.css | Adds vendored sequence diagram font-face CSS. |
| packages/muya/src/utils/diagram/sequence/sequence-diagram-snap.js | Vendored js-sequence-diagrams implementation wired for Snap.svg. |
| packages/muya/src/utils/diagram/sequence/index.ts | Exposes the vendored sequence diagram renderer and imports its CSS. |
| packages/muya/src/ui/paragraphQuickInsertMenu/config.ts | Adds Flowchart/Sequence menu entries and enables creating those diagram blocks. |
| packages/muya/src/ui/paragraphQuickInsertMenu/tests/diagramMenuEntries.spec.ts | Tests that the quick-insert diagram section includes all five diagram entries with icons. |
| packages/muya/src/ui/paragraphFrontButton/config.ts | Adds Flowchart/Sequence icon mapping for diagram blocks. |
| packages/muya/src/types/index.d.ts | Adds .woff/.woff2 module decls + ambient typings for flowchart.js and the vendored sequence module. |
| packages/muya/src/types.ts | Adds sequenceTheme to IMuyaOptions. |
| packages/muya/src/state/types.ts | Extends IDiagramMeta.type union to include flowchart/sequence. |
| packages/muya/src/state/markdownToState.ts | Parses flowchart / sequence fences into diagram blocks. |
| packages/muya/src/state/markdownToHtml.ts | Adds flowchart/sequence rendering for HTML export, with sequence theme plumbing. |
| packages/muya/src/state/tests/diagramFlowchartSequence.spec.ts | Adds parsing/round-trip tests for flowchart/sequence and default sequenceTheme. |
| packages/muya/src/config/index.ts | Adds sequenceTheme: 'hand' to MUYA_DEFAULT_OPTIONS. |
| packages/muya/src/block/extra/diagram/diagramPreview.ts | Enables preview rendering for flowchart/sequence and applies sequenceTheme. |
| packages/muya/src/assets/styles/exportStyle.css | Centers exported flowchart/sequence diagram containers like existing diagram types. |
| packages/muya/eslint.config.mjs | Excludes vendored sequence files from lint/format rules. |
Files not reviewed (1)
- pnpm-lock.yaml: Language not supported
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
|
Build artifacts for PR #4385: Run: https://github.com/marktext/marktext/actions/runs/27115256511
|

Summary
Restores flowchart and sequence diagram code blocks in the TypeScript editor engine
packages/muya(@muyajs/core), for feature parity with the legacypackages/muyajsengine the desktop app is migrating away from.The parity gap
Legacy muyajs renders five diagram types: mermaid, plantuml, vega-lite, flowchart (
flowchart.js) and sequence (js-sequence-diagrams), plus asequenceThemeoption. The TS rewrite only ported mermaid / plantuml / vega-lite — flowchart, sequence andsequenceThemewere missing. This PR brings them back, wired exactly the way the existing diagram types are.What changed
Dependencies
flowchart.js@^1.18.0— the same package legacy used (pulls in pure-JSraphael, no native build).snapsvg-cjs@^0.0.6,underscore@^1.13.8,webfontloader@^1.6.28— runtime deps of the vendored sequence renderer.@types/underscore,@types/webfontloader. Ambient declarations added forflowchart.js,snapsvg-cjs, and the vendored sequence module insrc/types/index.d.ts.Sequence library: vendored, not npm
The
js-sequence-diagramsname on npm is a dead security-holder placeholder (0.0.1-security,deps: none) — the real library was never published there. Legacy MarkText handled this by vendoring the library source (bramp'sjs-sequence-diagrams2.0.1, BSD, wired to snap.svg). This PR vendors the same file undersrc/utils/diagram/sequence/(plus its CSS and thedanielbdhand-font for the'hand'theme), kept verbatim and eslint-ignored. The file's dead jison UMDexportsfallback was dropped (it's an ESM module) to avoid a RollupCOMMONJS_VARIABLE_IN_ESMwarning.Rendering pipeline
loadRendererlearnsflowchartandsequence.diagramPreview.ts) and HTML export (markdownToHtml.ts) render both viarender.parse(code).drawSVG(target, options), matching legacy and how the other diagrams are handled.markdownToStateparses```flowchart/```sequencefences into diagram blocks;IDiagramMeta.typeand thegetHighlightHtmldiagram-type list extended. Serialization already round-trips viameta.type, so nostateToMarkdownchange was needed.sequenceTheme
sequenceTheme: 'hand' | 'simple'toIMuyaOptionsandMUYA_DEFAULT_OPTIONS(default'hand', matching legacyconfig/index.js), and pass it through when rendering sequence diagrams (preview + export).Menu entries / icons
packages/muyajs/lib/assets/pngicon/sequence/). No placeholder icons were needed — both are dedicated assets.exportStyle.css), matching the other diagram types.Test coverage
src/state/__tests__/diagramFlowchartSequence.spec.ts— flowchart/sequence fences parse into the right diagram block type and round-trip back to their fence; mermaid/plantuml/vega-lite still parse (no regression);sequenceThemedefaults to'hand'.src/ui/paragraphQuickInsertMenu/__tests__/diagramMenuEntries.spec.ts— the quick-insert diagram section exposes flowchart + sequence entries (with icons) alongside the existing three.drawSVGitself needs a real browser layout engine, so the SVG output isn't asserted in vitest (happy-dom); the parse + round-trip + option-plumbing paths are covered, consistent with how the existing diagram types are tested.Verification (all green)
🤖 Generated with Claude Code