README.md

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.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.

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.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.

Requirements

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.