Skip to content

arichika/previewseqdiag-vscode

Folders and files

NameName
Last commit message
Last commit date

Latest commit

Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 

Repository files navigation

Preview Sequence Diagrams

README

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

eye-catch

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.

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

0.2.3

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

0.2.2

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.

mermaid-forest-white

mscgen-fountainpen.png


Appendix

Great thanks to

mermaid

mscgen

samples

MscGen, msc, cygne, with dark theme.
graph

Mermaid, graph.
mermaid-graph

Mermaid, gantt.
mermaid-gantt