「VisualStudioCode/Mermaid」の版間の差分
提供: 初心者エンジニアの簡易メモ
(→サンプル) |
(→シーケンス図サンプル) |
||
| (同じ利用者による、間の17版が非表示) | |||
| 行1: | 行1: | ||
| + | ==Mermaidとは== | ||
| + | *クラス図やシーケンス図やフローチャートなどが描ける。 | ||
| + | *vscode、github、notionでも表示ができる | ||
| + | |||
==インストール== | ==インストール== | ||
https://marketplace.visualstudio.com/items?itemName=bierner.markdown-mermaid | https://marketplace.visualstudio.com/items?itemName=bierner.markdown-mermaid | ||
| − | == | + | ==プレビュー== |
| + | VisualStudioCodeを、開いて、コードを入力して、右上の虫眼鏡をクリックすると、プレビューできる。 | ||
| + | |||
| + | "このフォルダを信頼する"というリンクをクリック | ||
| + | |||
| + | ==クラス図サンプル== | ||
| + | ===クラス図=== | ||
class.md | class.md | ||
<pre> | <pre> | ||
```mermaid | ```mermaid | ||
| − | + | classDiagram | |
| − | + | class User{ | |
| − | + | +Int id | |
| − | B-- | + | +String name |
| − | + | +name() | |
| − | ``` | + | } |
| + | ``` | ||
| + | </pre> | ||
| + | |||
| + | ===関連クラス=== | ||
| + | relation.md | ||
| + | <pre> | ||
| + | ```mermaid | ||
| + | classDiagram | ||
| + | |||
| + | class User{ | ||
| + | +Int id | ||
| + | +String name | ||
| + | +name() | ||
| + | } | ||
| + | |||
| + | User --|> BaseUser | ||
| + | Car --|> BaseCar: 継承 | ||
| + | ``` | ||
| + | </pre> | ||
| + | |||
| + | access.md | ||
| + | <pre> | ||
| + | ```mermaid | ||
| + | classDiagram | ||
| + | class User{ | ||
| + | +String Public | ||
| + | -String Private | ||
| + | #String Protected | ||
| + | ~String Packaged | ||
| + | ``` | ||
| + | </pre> | ||
| + | |||
| + | ===その他関連=== | ||
| + | <pre> | ||
| + | ```mermaid | ||
| + | classDiagram | ||
| + | A --* B: コンポジット | ||
| + | C --o D: 集約 | ||
| + | E --> F: 汎化 | ||
| + | G -- H: 関連(実線) | ||
| + | I ..> J: 依存 | ||
| + | K ..|> L: 実現 | ||
| + | M .. N: 関連(点線) | ||
| + | O --|> P: 継承 | ||
| + | ``` | ||
| + | </pre> | ||
| + | 参考：https://qiita.com/hirokiwa/items/1a490c75961efd1e1487 | ||
| + | |||
| + | 参考：https://note.com/_kikiyo_/n/n67ca638d8c5c | ||
| + | |||
| + | ==シーケンス図サンプル== | ||
| + | sequence.md | ||
| + | <pre> | ||
| + | ```mermaid | ||
| + | sequenceDiagram | ||
| + | UNITY_User ->> PHP_User/list : request | ||
| + | PHP_User/list -->> UNITY_User : response | ||
| + | ``` | ||
</pre> | </pre> | ||
2024年11月2日 (土) 05:28時点における最新版
Mermaidとは
- クラス図やシーケンス図やフローチャートなどが描ける。
- vscode、github、notionでも表示ができる
インストール
https://marketplace.visualstudio.com/items?itemName=bierner.markdown-mermaid
プレビュー
VisualStudioCodeを、開いて、コードを入力して、右上の虫眼鏡をクリックすると、プレビューできる。
"このフォルダを信頼する"というリンクをクリック
クラス図サンプル
クラス図
class.md
```mermaid
classDiagram
class User{
+Int id
+String name
+name()
}
```
関連クラス
relation.md
```mermaid
classDiagram
class User{
+Int id
+String name
+name()
}
User --|> BaseUser
Car --|> BaseCar: 継承
```
access.md
```mermaid
classDiagram
class User{
+String Public
-String Private
#String Protected
~String Packaged
```
その他関連
```mermaid
classDiagram
A --* B: コンポジット
C --o D: 集約
E --> F: 汎化
G -- H: 関連(実線)
I ..> J: 依存
K ..|> L: 実現
M .. N: 関連(点線)
O --|> P: 継承
```
参考：https://qiita.com/hirokiwa/items/1a490c75961efd1e1487
参考：https://note.com/_kikiyo_/n/n67ca638d8c5c
シーケンス図サンプル
sequence.md
```mermaid
sequenceDiagram
UNITY_User ->> PHP_User/list : request
PHP_User/list -->> UNITY_User : response
```
