previewseqdiag-vscode
previewseqdiag-vscode copied to clipboard
An extension for vscode specialized for the preview function of mscgen and mermaid.
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](https://github.com/arichika/previewseqdiag-vscode/raw/main/assets/eye-catch.png)
New Features on 0.5.0
- Support for Mermaid v10 syntax.
New Features on 0.4.0
- :tada: Save image As PNG/PNG*/JPG/SVG, Copy to Clpboard (PNG)
- :tada: 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.
- For files with the
- Support to preview of MscGen, MsGenny format.
- For files with the
.msc
extension.
- For files with the
- 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: https://github.com/mermaid-js/mermaid/issues/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.0
- Support for Mermaid v10 syntax.
- Update dependencies.
- mermaid
10.3.1
from9.3.0
- Update for NPM package vulnerabilities.
- mermaid
0.4.3
- Update dependencies.
- mermaid
9.3.0
from9.2.2
- mermaid
0.4.2
- Update dependencies.
- mermaid
9.2.2
from9.1.3
- and more...(webpack, typescript and for devs)
- mermaid
0.4.1
- Update dependencies.
- mermaid
9.1.3
from8.14.0
- mermaid
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.
- Save image as PNG/PNG*/JPG/SVG, Copy to Clpboard (PNG)
- Force removal of unexpected vertical margins generated by mermaid and mscgen Preview libraries.
- ref: https://github.com/mermaid-js/mermaid/issues/1758
- Update dependencies.
- mermaid
8.14.0
from8.13.8
- mscgenjs-inpage
4.0.4
from3.0.3
- etc.
- mermaid
0.3.2
- Update dependencies.
- mermaid
8.13.8
from8.9.2
- mscgenjs
6.0.1
from5.0.4
- mscgenjs-inpage
4.0.4
from3.0.3
- mermaid
0.3.0
- Bugfix: Support vscode ^1.54.0
- Refactoring: A great many things...
- Update dependencies.
- mermaid
8.9.2
from8.4.7
- mscgenjs
5.0.4
from4.0.2
- etc.
- mermaid
0.2.4
- Update dependencies.
- mermaid
8.4.7
from8.4.4
- Thank you for PR, https://github.com/XavierBoubert
- https://github.com/arichika/previewseqdiag-vscode/pull/22
- mermaid
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
- https://github.com/arichika/previewseqdiag-vscode/pull/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.
- In the
- 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
orneutral
(default isforest
, is force recommended. The dark or neutral theme of Mermaid 7.0.3 does incomplete rendering.)
- Set
-
previewSeqDiag.mermaid.fixedBackgroundColor
: Setting to force usage for Mermaid's preview's background colo.- Set
#rrggbb
e.g. #ffffff,transparent
(default is#fafaf6
)
- Set
-
previewSeqDiag.mscgen.fixedNamedStyle
: Setting to force usage for Mscgen, MsGenny, xu's preview's rendering style.- Set
lazy
,classic
,cygne
,pegasse
orfountainpen
(default iscygne
). (see Name Style)
- Set
-
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
fixed
orstretch
(default isstretch
)
- Set
e.g. add to User Settings,
"previewSeqDiag": {
"mermaid": {
"fixedBackgroundColor": "#f6f6ff",
"fixedStyle": "dark"
},
"mscgen": {
"fixedNamedStyle": "fountainpen",
"horizontalAlignment": "fixed"
}
}
result is.
![mermaid-forest-white](https://github.com/arichika/previewseqdiag-vscode/raw/main/assets/mermaid-dark-f6f6ff.png)
![mscgen-fountainpen.png](https://github.com/arichika/previewseqdiag-vscode/raw/main/assets/mscgen-fountainpen-fixed.png)
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
samples
MscGen, msc, cygne, with dark theme.
Mermaid, graph.
Mermaid, gantt.