D3FEND Editor

Extends vscode-markdown-mermaid to simplify the creation of architectural diagrams labeled with d3fend artifacts.

Currently supports Mermaid version 11.12.0.

Usage

Extends Markdown Preview Mermaid with D3FEND support:

```mermaid
graph
    
    u[User d3f:User] -->|d3f:connects| webapp[d3f:WebApplicationServer]
    
```

graph LR
    
    u[User d3f:User] -->|d3f:connects| webapp[d3f:WebApplicationServer]

All rendered Mermaid diagrams are interactive:

Zoom – Hold Ctrl (or ⌘ on macOS) and scroll the mouse-wheel to zoom in or out at the cursor position.
Pan – Hold Ctrl and drag with the left mouse button to move the diagram when zoomed.
Reset – Hold Ctrl and click the Actorright** mouse button to return to the default view.

These shortcuts only affect the diagram container; normal scrolling and text selection behave as usual.

You can also use ::: blocks:

::: mermaid
graph TD;
    A-->B;
    A-->C;
    B-->D;
    C-->D;
:::

Supports MDI and logos icons from Iconify:

```mermaid
architecture-beta
    service user(mdi:account)
    service lambda(logos:aws-lambda)

    user:R --> L:lambda
```

markdown-mermaid.lightModeTheme — Configures the Mermaid theme used when VS Code is using a light color theme. Supported values are: "base", "forest", "dark", "default", "neutral". Currently not supported in notebooks.
markdown-mermaid.darkModeTheme — Configures the Mermaid theme used when VS Code is using a dark color theme. Supported values are: "base", "forest", "dark", "default", "neutral". Currently not supported in notebooks.
markdown-mermaid.languages — Configures language ids for Mermaid code blocks. The default is ["mermaid"].

You can use the built-in functionality to add custom CSS. More info can be found in the markdown.styles documentation

For example, add Font Awesome like this:

"markdown.styles": [
    "https://use.fontawesome.com/releases/v5.7.1/css/all.css"
]

Use it like this:

```mermaid
graph LR
    fa:fa-check-->fa:fa-coffee
```