Convert State Diagram of PlantUML/Mermaid format to State and N-switch Coverage Tables of Markdown format, and Copy it
This is the extension of Visual Studio Code that creates a state transition table and N-switch coverage table in Markdown format from a state diagram written in PlantUML/Mermaid format and copies them to the clipboard.
From the text of a state transition diagram in PlantUML/Mermaid format as follows (examples are from PlantUML)
@startuml
[*] -right-> started : open
started -right-> finished : submit
finished -left-> started : back
finished -right-> [*] : close
@enduml
You can create following state transition and N-switch coverage tables in Markdown table format
## Transition Table
| |open|submit|back|close|
| :----: | :----: | :----: | :----: | :----: |
|[*]|started|N/A|N/A|N/A|
|started|N/A|finished|N/A|N/A|
|finished|N/A|N/A|started|[*]|
## 0 Switch Coverage
|state|event|state|
| :----: | :----: | :----: |
|[*]|open|started|
|started|submit|finished|
|finished|back|started|
|finished|close|[*]|
## 1 Switch Coverage
|state|event|state|event|state|
| :----: | :----: | :----: | :----: | :----: |
|[*]|open|started|submit|finished|
|started|submit|finished|back|started|
|started|submit|finished|close|[*]|
|finished|back|started|submit|finished|The rendering result of state diagram of PlantUML is used to illustrate below.
It means that, from the above diagram, you can create tables below.
| open | submit | back | close | |
|---|---|---|---|---|
| [*] | started | N/A | N/A | N/A |
| started | N/A | finished | N/A | N/A |
| finished | N/A | N/A | started | [*] |
| state | event | state |
|---|---|---|
| [*] | open | started |
| started | submit | finished |
| finished | back | started |
| finished | close | [*] |
| state | event | state | event | state |
|---|---|---|---|---|
| [*] | open | started | submit | finished |
| started | submit | finished | back | started |
| started | submit | finished | close | [*] |
| finished | back | started | submit | finished |
The order in tables is as close as possible to the order in the text of diagram.
(Items related to [*] are placed at the beginning or end of the table as much as possible)
You can install this extension from Marketplace.
The usage is as follows:
- Select the text of PlantUML/Mermaid state diagram that you wish to convert
- Execute the
State Diagram 2 Markdown Tables And Copycommand from the command palette - The converted text will be copied to the clipboard, and you can paste it wherever you want to use it.
This extension supports the below format of the state diagram text of PlantUML/Mermaid.
state1 --> state2 : event
If there is no event text, as in the following format, this extension will not convert it. (On the one hand, this format can be used to exclude starting/ending states from tables!)
state1 --> state2
Also, If the alias of the state is specified in the following format, the alias will also be used in the converted name.
state "alias_name" as state_name
Formats other than the above, such as composite states, history, fork, and conditional choice, are not supported.
No requirements.
However, if you want to preview state diagram of PlantUML in Visual Studio Code, please include following extensions.
Both require Java and Graphviz installed.
Markdown Preview Enhanced also supports previewing Mermaid diagrams.
stateDiagram2MarkdownTables.nSwitchCoveragesDepth: Specifies the depth of N-switch Converages Tables(the number of depth is the number of tables)
None at this time.
Fixed a bug that the sorting position of the end mark "[*]" was not correct when the number of events was large.
Change the description of the installation source from the vsix file to Marketplace.
Publish to Marketplace.
Fixed a bug of 0.1.2, that cannot handle event names of less than 2 characters.
Fixed to handle event names that contain spaces.
English documentation is now available.
Initial release.
PlantUML/Mermaid 形式で書いた状態遷移図から、Markdown 形式の状態遷移表と N-スイッチカバレッジ表を作成してクリップボードにコピーする Visual Studio Code の拡張機能です。
次のような PlantUML/Mermaid 形式での状態遷移図のテキストから（例は PlantUMLのもの）
@startuml
[*] -right-> 開始 : 開く
開始 -right-> 終了 : 了解
終了 -left-> 開始 : 戻る
終了 -right-> [*] : 閉じる
@enduml
次のような Markdown の表形式での状態遷移表と N-スイッチカバレッジ表を作成することができます。
## Transition Table
| |開く|了解|戻る|閉じる|
| :----: | :----: | :----: | :----: | :----: |
|[*]|開始|N/A|N/A|N/A|
|開始|N/A|終了|N/A|N/A|
|終了|N/A|N/A|開始|[*]|
## 0 Switch Coverage
|state|event|state|
| :----: | :----: | :----: |
|[*]|開く|開始|
|開始|了解|終了|
|終了|戻る|開始|
|終了|閉じる|[*]|
## 1 Switch Coverage
|state|event|state|event|state|
| :----: | :----: | :----: | :----: | :----: |
|[*]|開く|開始|了解|終了|
|開始|了解|終了|戻る|開始|
|開始|了解|終了|閉じる|[*]|
|終了|戻る|開始|了解|終了|仕上がりでいうと
という状態遷移図から、次のような表を作ることができます。
| 開く | 了解 | 戻る | 閉じる | |
|---|---|---|---|---|
| [*] | 開始 | N/A | N/A | N/A |
| 開始 | N/A | 終了 | N/A | N/A |
| 終了 | N/A | N/A | 開始 | [*] |
| state | event | state |
|---|---|---|
| [*] | 開く | 開始 |
| 開始 | 了解 | 終了 |
| 終了 | 戻る | 開始 |
| 終了 | 閉じる | [*] |
| state | event | state | event | state |
|---|---|---|---|---|
| [*] | 開く | 開始 | 了解 | 終了 |
| 開始 | 了解 | 終了 | 戻る | 開始 |
| 開始 | 了解 | 終了 | 閉じる | [*] |
| 終了 | 戻る | 開始 | 了解 | 終了 |
表での並び順は遷移図での並び順をなるべく意識しています。
（先端・終端の [*] に関わるものについては、なるべく最初・最後に並べるようにしています）
Marketplaceからインストール可能です。
使い方は次の通りです。
- 変換したい PlantUML/Mermaid の状態遷移図のテキストを選択します
- コマンドパレットから
State Diagram 2 Markdown Tables And Copyコマンドを実行します - 変換されたテキストがクリップボードにコピーされますので、使いたいところで貼り付けてください
PlantUML/Mermaid の状態遷移は
状態１ -> 状態２ : イベント
という形式のものを変換対象とします。
状態１ -> 状態２
というイベントの記述がないものは変換対象となりません。
（逆に [*] を使った開始・終了を表から除きたい場合などに利用できます）
また
state "別名" as 状態名
で状態の別名を指定している場合には、変換後の名称でも別名の方が使われます。
上記以外の状態遷移に関する記法、例えば合成状態、履歴、フォーク、条件分岐といったものには対応していません。
特に依存関係はありません。
ただ、PlantUML 図のプレビューを Visual Studio Code でやりたい場合には、次のような拡張を入れてください。
どちらも Java と Graphviz のインストールが必要になります。
Markdown Preview Enhanced は Mermaid 図のプレビューにも対応しています。
stateDiagram2MarkdownTables.nSwitchCoveragesDepth: N-スイッチカバレッジ表を作成する深さを指定できます（デフォルト＝1）
今のところ特になし
イベント数が多い場合に、エンドマーク「[*]」のソート位置がおかしくなる不具合を修正しました。
インストール元の説明を vsix ファイルから Marketplace に変更
マーケットプレイスで公開
0.1.2 で２文字以下のイベント名が扱えなくなっていたのを修正
event 名に空白を含む場合も扱えるように修正
英語ドキュメントを整備
初期リリース