Preview Sequence Diagrams

README

Preview Sequence Diagrams (previewseqdiag-vscode) is an extension for vscode specialized for the preview function of mscgen and mermaid.

New Features on 0.9.0

• Migrate to Mermaid v12 while preserving the classic preview appearance by default.
• Ship a rebuilt renderer with patched dependencies and safer handling of diagram text and filenames.
• Require VS Code 1.100.0 or later.
• Prune obsolete root-level VSIX artifacts for the 0.8 release line.

New Features on 0.8.5

• Confirm Mermaid is up to date with the latest v11 release.
• Fix dependency vulnerabilities.

New Features on 0.8.4

• Update Mermaid to the latest v11 release.
• Confirm npm audit reports no vulnerabilities.

New Features on 0.8.3

• Update Mermaid to the latest v11 release.
• Confirm npm audit reports no vulnerabilities.

New Features on 0.8.2

• Confirm Mermaid is up to date with the latest v11 release.
• Confirm npm audit reports no vulnerabilities.

New Features on 0.8.1

• Update Mermaid to the latest v11 release.
• Fix dependency vulnerabilities.

New Features on 0.8.0

• Update Mermaid to the latest v11 release.
• Confirm npm audit reports no vulnerabilities.
• Prune obsolete root-level VSIX artifacts for the 0.7 release line.

New Features on 0.7.1

• Confirm Mermaid is up to date with the latest v11 release.
• Fix dependency vulnerabilities.

New Features on 0.7.0

• Update Mermaid to the latest v11 release.
• Confirm npm audit reports no vulnerabilities.

New Features on 0.6.5

• Update Mermaid to the latest v11 release.
• Fix dependency vulnerabilities.

New Features on 0.6.4

• Fix dependency vulnerabilities.

New Features on 0.6.3

• Update Mermaid to the latest v11 release.

New Features on 0.6.0

• Simplify preview update flow and reduce structural duplication.
• Remove obsolete document-provider indirection and rx dependency.

New Features on 0.5.2

• Support for Mermaid v11 syntax.

New Features on 0.5.0

• Support for Mermaid v10 syntax.

New Features on 0.4.0

• 🎉 Save image As PNG/PNG*/JPG/SVG, Copy to Clpboard (PNG)
• 🎉 Force removal of unexpected vertical margins generated by mermaid's library.

Requirements

Version 0.9.0 and later require VS Code 1.100.0 or newer for Mermaid v12's ES2024 browser runtime. Development builds require Node.js 22.12.0 or newer.

Features

• Support to preview of Mermaid format.
  • For files with the .mmd, .mermaid extension.
• Support to preview of MscGen, MsGenny format.
  • For files with the .msc extension.
• Save image As PNG/PNG*/JPG/SVG, Copy to Clpboard (PNG)
  • PNG*: The SVG data generated by mermaid's library does not include a background color. The 'PNG*' button to generate a PNG image with a specified background color as you see it.
• Force removal of unexpected vertical margins generated by mermaid and mscgen Preview libraries.
  • ref: mermaid-js/mermaid#1758

Special feature

• In you .mmd file, you can to import an other file inside, this following:

%% import: my-file.mmd

This is usefull to avoid multipicate the same code on many files.

Release Notes

CHANGELOG.md

0.9.0

• Migrate to Mermaid v12.
  • mermaid 11.17.2 to 12.2.0
  • Require VS Code 1.100.0 or later for the ES2024 renderer. Development builds require Node.js 22.12.0 or later.
  • Preserve the classic appearance, Dagre layout, and configured preview theme by default.
• Fix renderer security and initialization.
  • Build the offline Mermaid browser bundle from the audited dependencies instead of copying the upstream prebuilt bundle.
  • Include patched DOMPurify 3.4.17 and KaTeX 0.18.10 in the shipped renderer.
  • Load Mermaid before initialization and render explicitly with strict security settings.
  • Keep Mermaid/Mscgen source, preview settings, and download filenames from breaking out into executable HTML or JavaScript.
  • Add webview security regression tests.
• Resolve dependency vulnerabilities.
  • dompurify 3.4.16 to 3.4.17
  • katex 0.16.47 to 0.18.10
  • fast-uri 3.1.8 to 3.1.9
  • serialize-javascript 7.0.5 to 7.1.4
  • Confirm npm audit reports 0 vulnerabilities.
• Package release artifact.
  • Generate previewseqdiag-vscode-0.9.0.vsix
• Prune obsolete root-level release artifacts.
  • Remove previewseqdiag-vscode-0.8.0.vsix through previewseqdiag-vscode-0.8.4.vsix, retaining 0.8.5 for the 0.8 release line.

0.8.5

• Update dependencies.
  • Confirm mermaid is up to date at 11.17.2, the latest compatible v11 release.
  • ts-loader 9.5.4 to 9.6.2
• Resolve dependency vulnerabilities.
  • brace-expansion 1.1.18 to 1.1.21, 5.0.9 to 5.0.12
  • @humanfs/node 0.16.7 to 0.16.8
  • baseline-browser-mapping 2.10.0 to 2.11.27
  • browserslist 4.28.1 to 4.29.3
  • dompurify 3.4.13 to 3.4.16
  • fast-uri 3.1.5 to 3.1.8
  • js-yaml 4.3.1 to 4.3.2
  • Confirm npm audit reports 0 vulnerabilities.
• Package release artifact.
  • Generate previewseqdiag-vscode-0.8.5.vsix

0.8.4

• Update dependencies.
  • mermaid 11.17.0 to 11.17.2
• Confirm dependency security status.
  • Confirm npm audit reports 0 vulnerabilities.
• Package release artifact.
  • Generate previewseqdiag-vscode-0.8.4.vsix

0.8.3

• Update dependencies.
  • mermaid 11.16.1 to 11.17.0
  • @mermaid-js/parser 1.2.0 to 1.2.1
  • Add fastdom 1.0.12 and strictdom 1.0.1 as Mermaid dependencies.
• Confirm dependency security status.
  • Confirm npm audit reports 0 vulnerabilities.
• Package release artifact.
  • Generate previewseqdiag-vscode-0.8.3.vsix

0.8.2

• Confirm Mermaid is up to date.
  • mermaid remains at 11.16.1
• Confirm dependency security status.
  • Confirm npm audit reports 0 vulnerabilities.
• Package release artifact.
  • Generate previewseqdiag-vscode-0.8.2.vsix

0.8.1

• Update dependencies.
  • mermaid 11.16.0 to 11.16.1
  • eslint 9.39.4 to 9.39.5
  • @eslint/eslintrc 3.3.5 to 3.3.6
  • @eslint/js 9.39.4 to 9.39.5
  • ajv 6.14.0 to 6.15.0
• Resolve dependency vulnerabilities.
  • brace-expansion 1.1.13 to 1.1.18, 5.0.6 to 5.0.9
  • dompurify 3.4.11 to 3.4.13
  • fast-uri 3.1.2 to 3.1.5
  • js-yaml 4.2.0 to 4.3.1
  • Confirm npm audit reports 0 vulnerabilities.
• Package release artifact.
  • Generate previewseqdiag-vscode-0.8.1.vsix

0.8.0

• Update dependencies.
  • mermaid 11.15.0 to 11.16.0
  • @mermaid-js/parser 1.1.1 to 1.2.0
  • cytoscape 3.33.1 to 3.34.0
  • dayjs 1.11.19 to 1.11.21
  • katex 0.16.37 to 0.16.47
• Resolve dependency vulnerabilities.
  • Confirm npm audit reports 0 vulnerabilities.
• Package release artifact.
  • Generate previewseqdiag-vscode-0.8.0.vsix
• Prune obsolete root-level release artifacts.
  • Remove previewseqdiag-vscode-0.7.0.vsix

0.7.1

• Update dependencies.
  • Confirm mermaid is up to date at 11.15.0
• Resolve dependency vulnerabilities.
  • dompurify 3.4.1 to 3.4.11
  • brace-expansion 5.0.5 to 5.0.6
  • js-yaml 4.1.1 to 4.2.0
  • Confirm npm audit reports 0 vulnerabilities.
• Package release artifact.
  • Generate previewseqdiag-vscode-0.7.1.vsix

0.7.0

• Update dependencies.
  • mermaid 11.14.0 to 11.15.0
  • @mermaid-js/parser 1.1.0 to 1.1.1
• Resolve dependency vulnerabilities.
  • Confirm npm audit reports 0 vulnerabilities.
• Package release artifact.
  • Generate previewseqdiag-vscode-0.7.0.vsix

0.6.5

• Update dependencies.
  • Confirm mermaid is up to date at 11.14.0
• Fix dependency vulnerabilities.
  • fast-uri 3.1.0 to 3.1.2
• Package release artifact.
  • Generate previewseqdiag-vscode-0.6.5.vsix

0.6.4

• Fix dependency vulnerabilities.
  • dompurify 3.3.2 to 3.4.1
  • lodash-es 4.17.23 to 4.18.1
  • langium 4.2.1 to 4.2.2
  • chevrotain and @chevrotain packages 11.1.2 to 12.0.0
  • chevrotain-allstar 0.3.1 to 0.4.1
  • uuid 11.1.0 to 14.0.0
• Package release artifact.
  • Generate previewseqdiag-vscode-0.6.4.vsix

0.6.3

• Update dependencies.
  • mermaid 11.13.0 to 11.14.0
  • @typescript-eslint/eslint-plugin 8.56.1 to 8.58.0
  • @typescript-eslint/parser 8.56.1 to 8.58.0
• Fix dependency vulnerabilities.
  • serialize-javascript 7.0.4 to 7.0.5
  • brace-expansion 1.1.12 to 1.1.13, 5.0.4 to 5.0.5
• Package release artifact.
  • Generate previewseqdiag-vscode-0.6.3.vsix

0.6.2

• Fix dependency vulnerabilities.
  • flatted 3.3.4 to 3.4.2
  • picomatch 2.3.1 to 2.3.2, 4.0.3 to 4.0.4

0.6.1

• Update dependencies.
  • mermaid 11.12.3 to 11.13.0

0.6.0

• Update dependencies.
  • mermaid 11.2.1 to 11.12.3
  • typescript 4.9.4 to 5.9.3
• Fix dependency vulnerabilities.
  • Update build toolchain dependencies to current secure versions.
  • Remove unused test and build-only packages that were pulling vulnerable transitive modules.
  • Migrate ESLint configuration to eslint.config.js for ESLint v9.
• Simplify structure for maintenance.
  • Replace TextDocumentContentProvider-style indirection with direct webview rendering.
  • Remove shared hidden state from snippet generation and pass preview context explicitly.
  • Replace Rx-based debounce with a native timer-based implementation.
  • Apply Mermaid fixed theme configuration during initialization.
• Add maintainable unit tests.
  • Add node:test coverage for preview logic and Mermaid import expansion.
  • Add npm test script and align TypeScript compiler libs for test compilation.

0.5.2

• Support for Mermaid v11 syntax.
• Update dependencies.
  • mermaid 10.9.1 from 11.2.1
  • mscgenjs 7.0.0 from 7.0.2
  • mscgenjs-inpage 4.0.5 from 5.0.1
  • Update for NPM package vulnerabilities.

0.5.1

• Update dependencies.
  • mermaid 10.3.1 from 10.9.1
  • mscgenjs 6.0.2 from 7.0.0
  • Update for NPM package vulnerabilities.

0.5.0

• Support for Mermaid v10 syntax.
• Update dependencies.
  • mermaid 10.3.1 from 9.3.0
  • Update for NPM package vulnerabilities.

0.4.3

• Update dependencies.
  • mermaid 9.3.0 from 9.2.2

0.4.2

• Update dependencies.
  • mermaid 9.2.2 from 9.1.3
  • and more...(webpack, typescript and for devs)

0.4.1

• Update dependencies.
  • mermaid 9.1.3 from 8.14.0

0.4.0

• Add new features.
  • Save image as PNG/PNG*/JPG/SVG, Copy to Clpboard (PNG)
    • PNG*: The SVG data generated by mermaid's library does not include a background color. The 'PNG*' button to generate a PNG image with a specified background color as you see it.
• Force removal of unexpected vertical margins generated by mermaid and mscgen Preview libraries.
  • ref: mermaid-js/mermaid#1758
• Update dependencies.
  • mermaid 8.14.0 from 8.13.8
  • mscgenjs-inpage 4.0.4 from 3.0.3
  • etc.

0.3.2

• Update dependencies.
  • mermaid 8.13.8 from 8.9.2
  • mscgenjs 6.0.1 from 5.0.4
  • mscgenjs-inpage 4.0.4 from 3.0.3

0.3.0

• Bugfix: Support vscode ^1.54.0
• Refactoring: A great many things...
• Update dependencies.
  • mermaid 8.9.2 from 8.4.7
  • mscgenjs 5.0.4 from 4.0.2
  • etc.

0.2.4

• Update dependencies.
  • mermaid 8.4.7 from 8.4.4
  • Thank you for PR, https://github.com/XavierBoubert
  • #22

0.2.3

• Bugfix: Webpack support was broken and fixed from 0.2.2.

0.2.2

• Change of link to official mermaid site.
  • Thank you for PR, https://github.com/silenti0
  • #16
• Update dependencies to latest.
  • mermaid 8.4.4, mscgenjs 4.0.2, mscgenjs-inpage 2.0.12 .

0.2.1

• Update document. only...

0.2.0

• Support vscode ^1.33.0
• Update dependencies.

0.1.1

• Add Special feature.
  • In the .mmd file, it corresponds to the special notation of importing external files.
• Update latest modules.
  • mermaid 8.0.0-rc.8, mscgenjs 1.15.2, mscgenjs-inpage 1.13.1 .

0.1.0

• Support mermaid previewing on Mac.
  • In order to implement this function, I disabled the function of automatically selecting styles according to theme.
• Fixed configuration intellisense problem
• Change configuration format. (Backward compatible) see -> Settings
• Refactoring.

0.0.1

• Initial release.

Known Issues

• SVG or PNG downloading is not supported. If you want to download by SVG or PNG, It is good to use lang's official websites. see, Appendix
• In the preview of Mermaid's Dark and Neutral style, some displays become black.

Settings

This extension contributes the following User Settings:

• previewSeqDiag.mermaid.fixedStyle: Setting to force usage for Mermaid's preview's rendering style.

  • Set dark, forest or neutral (default is forest, is force recommended. The dark or neutral theme of Mermaid 7.0.3 does incomplete rendering.)

• previewSeqDiag.mermaid.fixedBackgroundColor: Setting to force usage for Mermaid's preview's background colo.

  • Set #rrggbb e.g. #ffffff, transparent (default is #fafaf6)

• previewSeqDiag.mscgen.fixedNamedStyle: Setting to force usage for Mscgen, MsGenny, xu's preview's rendering style.

  • Set lazy, classic, cygne, pegasseor fountainpen (default is cygne). (see Name Style)

• previewSeqDiag.mscgen.horizontalAlignment: Setting to force usage for Mscgen's rendering style. Indicates where an element should be displayed on the horizontal axis relative to the allocated layout slot of the peview window.

  • Set fixedor stretch(default is stretch)

e.g. add to User Settings,

  "previewSeqDiag": {
    "mermaid": {
      "fixedBackgroundColor": "#f6f6ff",
      "fixedStyle": "dark"
    },
    "mscgen": {
      "fixedNamedStyle": "fountainpen",
      "horizontalAlignment": "fixed"
    }
  }

result is.

---

Appendix

Great thanks to

• searKing/preview-vscode
• @XavierBoubert
  • Thanks PR for Great Special feature
• @silenti0
  • Thanks PR for Updates

mermaid

• knsv/mermaid
• mermaid docs
• mermaid live editor you can download by SVG.

mscgen

• Mscgen
• mscgen_js you can download by SVG or PNG.

samples

MscGen, msc, cygne, with dark theme.

Mermaid, graph.

Mermaid, gantt.