previewseqdiag-vscode

KO | EN

gitlite — search

#python #react #llm #android #machine-learning #deep-learning #nodejs #macos #java #cli #security #ios #openai #open-source

previewseqdiag-vscode

(★ 24)

An extension for vscode specialized for the preview function of mscgen and mermaid.

previewseqdiag-vscode 최신버젼 다운로드

최종 버전 다운로드 (.zip)

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

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

* :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.
* 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: https://github.com/mermaid-js/mermaid/issues/1758

## Special feature

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

```text
%% import: my-file.mmd
```

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

## Release Notes

[CHANGELOG.md](CHANGELOG.md)

## 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: https://github.com/mermaid-js/mermaid/issues/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
  * https://github.com/arichika/previewseqdiag-vscode/pull/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 
  * 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.
* 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](#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](#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`, `pegasse`or `fountainpen` (default is `cygne`). (see [Name Style](https://mscgen.js.org/embed.html#named-styles))
* `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`or `stretch`(default is `stretch`)

e.g.  add to User Settings,

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

result is.

----

## Appendix

### Great thanks to

* [searKing/preview-vscode](https://github.com/searKing/preview-vscode)
* [@XavierBoubert](https://github.com/XavierBoubert)
  * Thanks [PR](https://github.com/arichika/previewseqdiag-vscode/pull/8) for Great Special feature
* [@silenti0](https://github.com/silenti0)
  * Thanks [PR](https://github.com/arichika/previewseqdiag-vscode/pull/16) for Updates

### mermaid

* [knsv/mermaid](https://github.com/knsv/mermaid)
* [mermaid docs](https://knsv.github.io/mermaid/)
* [mermaid live editor](https://knsv.github.io/mermaid/live_editor/) you can download by SVG.

### mscgen

* [Mscgen](http://www.mcternan.me.uk/mscgen/)
* [mscgen_js](https://mscgen.js.org/) you can download by SVG or PNG.

### samples

MscGen, msc, cygne, with dark theme.  
<img src="https://github.com/arichika/previewseqdiag-vscode/raw/main/assets/mscgen-cygne.png" alt="graph" width="480" />

Mermaid, graph.  
<img src="https://github.com/arichika/previewseqdiag-vscode/raw/main/assets/mermaid-graph.png" alt="mermaid-graph" width="480" />

Mermaid, gantt.  
<img src="https://github.com/arichika/previewseqdiag-vscode/raw/main/assets/mermaid-gantt.png" alt="mermaid-gantt" width="480" />

previewseqdiag-vscode

previewseqdiag-vscode 최신버젼 다운로드

오늘의 추천 프로젝트

Was this content helpful?

Recent Feedback

previewseqdiag-vscode

previewseqdiag-vscode 최신버젼 다운로드

오늘의 추천 프로젝트

Was this content helpful?

Recent Feedback

Download README