facebook twitter hatena line email

「VisualStudioCode/Mermaid」の版間の差分

提供: 初心者エンジニアの簡易メモ
移動: 案内検索
(サンプル)
(サンプル)
行2: 行2:
 
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
graph TD;
+
classDiagram
     A-->B;
+
     class User{
    A-->C;
+
        +Int id
    B-->D;
+
        +String name
     C-->D;
+
        +name()
```  
+
     }
 +
```
 
</pre>
 
</pre>
 +
 +
===関連クラス===
 +
relation.md
 +
<pre>
 +
```mermaid
 +
classDiagram
 +
 +
    class User{
 +
        +Int id
 +
        +String name
 +
        +name()
 +
    }
 +
 +
    User --|> BaseUser
 +
    Car --|> BaseCar
 +
```
 +
</pre>
 +
 +
 +
参考:https://qiita.com/hirokiwa/items/1a490c75961efd1e1487

2023年12月7日 (木) 00:23時点における版

インストール

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
```


参考:https://qiita.com/hirokiwa/items/1a490c75961efd1e1487