feat(muya): restore flowchart and sequence diagrams by Jocs · Pull Request #4385 · marktext/marktext · GitHub
Skip to content

feat(muya): restore flowchart and sequence diagrams - #4385

Merged
Jocs merged 3 commits into
developfrom
feat/muya-restore-flowchart-sequence
Jun 8, 2026
Merged

Jocs merged 3 commits into
developfrom
feat/muya-restore-flowchart-sequence

Conversation

@Jocs

@Jocs Jocs commented Jun 8, 2026

Copy link
Copy Markdown
Member

Summary

Restores flowchart and sequence diagram code blocks in the TypeScript editor engine packages/muya (@muyajs/core), for feature parity with the legacy packages/muyajs engine 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 a sequenceTheme option. The TS rewrite only ported mermaid / plantuml / vega-lite — flowchart, sequence and sequenceTheme were 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-JS raphael, no native build).
  • snapsvg-cjs@^0.0.6, underscore@^1.13.8, webfontloader@^1.6.28 — runtime deps of the vendored sequence renderer.
  • dev: @types/underscore, @types/webfontloader. Ambient declarations added for flowchart.js, snapsvg-cjs, and the vendored sequence module in src/types/index.d.ts.

Sequence library: vendored, not npm

The js-sequence-diagrams name 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's js-sequence-diagrams 2.0.1, BSD, wired to snap.svg). This PR vendors the same file under src/utils/diagram/sequence/ (plus its CSS and the danielbd hand-font for the 'hand' theme), kept verbatim and eslint-ignored. The file's dead jison UMD exports fallback was dropped (it's an ESM module) to avoid a Rollup COMMONJS_VARIABLE_IN_ESM warning.

Rendering pipeline

  • loadRenderer learns flowchart and sequence.
  • Live editor preview (diagramPreview.ts) and HTML export (markdownToHtml.ts) render both via render.parse(code).drawSVG(target, options), matching legacy and how the other diagrams are handled.
  • markdownToState parses ```flowchart / ```sequence fences into diagram blocks; IDiagramMeta.type and the getHighlightHtml diagram-type list extended. Serialization already round-trips via meta.type, so no stateToMarkdown change was needed.

sequenceTheme

  • Added sequenceTheme: 'hand' | 'simple' to IMuyaOptions and MUYA_DEFAULT_OPTIONS (default 'hand', matching legacy config/index.js), and pass it through when rendering sequence diagrams (preview + export).

Menu entries / icons

  • Flowchart and Sequence entries added to the quick-insert diagram section, with the insert handler creating diagram blocks of those types.
  • Front-button diagram icon map extended. The flowchart icon already existed in muya's assets; the sequence icon was ported from the legacy muyajs pngicon set (packages/muyajs/lib/assets/pngicon/sequence/). No placeholder icons were needed — both are dedicated assets.
  • Exported flowchart/sequence diagram divs are centered (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); sequenceTheme defaults to 'hand'.
  • src/ui/paragraphQuickInsertMenu/__tests__/diagramMenuEntries.spec.ts — the quick-insert diagram section exposes flowchart + sequence entries (with icons) alongside the existing three.

drawSVG itself 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)

lint            ✓ 0 errors
lint:types      ✓
check-circular  ✓ no circular deps
test            ✓ 398 passed (46 files)
test:spec       ✓ 1347 passed (4 files) — conformance gate not regressed
vite build      ✓ flowchart.js + sequence bundle cleanly (chrome70 target)

🤖 Generated with Claude Code

Jocs and others added 3 commits June 8, 2026 12:00
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>
Copilot AI review requested due to automatic review settings June 8, 2026 04:03
break

case 6:
$$[$0]
@github-actions

github-actions Bot commented Jun 8, 2026

Copy link
Copy Markdown
Contributor

Website preview ready: https://pr-4385-marktext-website.ransixi.workers.dev

Built from ab84075468bcd324854aef601218fdf6bf869369 · Worker: marktext-website · Version: 9f58093a-2c5b-4f98-95b8-ab40f98b65f1 · Alias: pr-4385

Copilot AI left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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 + sequence as 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.

@github-actions

github-actions Bot commented Jun 8, 2026

Copy link
Copy Markdown
Contributor

Build artifacts for PR #4385:

Run: https://github.com/marktext/marktext/actions/runs/27115256511

Artifact Size Link
marktext-windows-arm64 249.6 MB Download
marktext-macos-x64 249.2 MB Download
marktext-linux 540.7 MB Download
marktext-windows-x64 250.9 MB Download
marktext-macos-arm64 238.9 MB Download

@Jocs

Jocs commented Jun 8, 2026

Copy link
Copy Markdown
Member Author

@Jocs
Jocs merged commit 3670009 into develop Jun 8, 2026
22 checks passed
@Jocs
Jocs deleted the feat/muya-restore-flowchart-sequence branch June 8, 2026 04:20
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants