Setup Markdown Preview Enhanced extension with PlantUML and C4 model in VS Code

Install Markdown Preview Enhanced extension

Open VS Code and go to the Extensions view (Ctrl+Shift+X or Cmd+Shift+X).
Search for Markdown Preview Enhanced by Yiyi Wang.

Configure MPE for PlantUML

In VS Code, open Settings (Ctrl+,) and search for markdown-preview-enhanced.plantumlServer.
Enter the Official PlantUML server: https://www.plantuml.com/plantuml.
Test the configuration. Create hello-world.md with the MD content below and then Ctrl+Shift+V to open markdown preview tab. You should PlantUML diagram generated.
DO NOT indent PlantUML code. Otherwise, it will not render.

Code: hello-world.md

```plantuml
@startuml
Alice -> Bob: Hello
@enduml
```

Use built-in C4 syntax from PlantUML

Code: c4-built-in.md

```plantuml
@startuml
!include <C4/C4_Container>

Person(user, "Customer", "A customer of the bank.")
System(banking_system, "Internet Banking System", "Allows customers to view information.")

Rel(user, banking_system, "Uses")
@enduml
```

Choose Your C4 Level

Change the include line based on the level of detail you need for your diagram:

Context Diagram: !include <C4/C4_Context>
Container Diagram: !include <C4/C4_Container>
Component Diagram: !include <C4/C4_Component>
Deployment Diagram: !include <C4/C4_Deployment>

Use C4 model remotely

Code: c4-remotely.md

```plantuml
@startuml
!include https://raw.githubusercontent.com/plantuml-stdlib/C4-PlantUML/master/C4_Component.puml

Person(user, "Customer", "A customer of the bank.")
System(banking_system, "Internet Banking System", "Allows customers to view information.")

Rel(user, banking_system, "Uses")
@enduml
```