VS Code just made diagrams WAY easier 🤯

readme.md mermaid flowchart LR Sleep[Sleep] --> Wake{Awake?} Wake -->|No| Sleep Wake -->|Hungry| Snack[Get treat] Wake -->|Not in Sun?| Move[Move to sun] Wake -->|Human is typing| Keyboard[Sleep on keyboard] Snack --> Sleep Move --> Sleep Keyboard --> Sleep Preview readme.md Visual Studio Code Languages Mermaid diagrams in Markdown preview and Notebooks We've merged Matt Bierman's Markdown Preview Mermaid Support extension into VS Code as a new built-in extension called Mermaid Markdown Features. This extension adds Mermaid diagram rendering to VS Code built-in Markdown preview, to Markdown cells in notebooks, and to chats. Mermaid diagrams can be created using a Mermaid fenced code block in your Markdown: markdown mermaid flowchart LR Sleep[Sleep] --> Wake{Awake?} Wake -->|No| Sleep Wake -->|Hungry| Snack[Get treat] Wake -->|Not in Sun?| Move[Move to sun] Wake -->|Human is typing| Keyboard[Sleep on keyboard] Snack --> Sleep Move --> Sleep Keyboard --> Sleep Here's what the diagram looks like in the Markdown preview. cat.md cat.md # Cat Decision Tree mermaid flowchart LR Sleep[Sleep] --> Wake{Awake?} Wake -->|No| Sleep Wake -->|Hungry| Snack[Get treat] Wake -->|Not in Sun?| Move[Move to sun] Wake -->|Human is typing| Keyboard[Sleep on keyboard] Snack --> Sleep Move --> Sleep Keyboard --> Sleep Preview cat.md Cat Decision Tree Rendered Mermaid diagrams also support panning and zooming, which makes larger diagrams easier to inspect without leaving the preview. You can also right-click a diagram to copy its Mermaid source. YAML frontmatter in Markdown preview Setting: markdown.preview.frontMatter We've added options that control how YAML front matter is rendered in the Markdown preview. By default, instead of hiding the preamble, VS Code displays front matter as a table at the top of the preview. markdown.md markdown.md Content-ID: 47N8A5A-40B3-40B3-85FB-97B5A4A03B5B Content-Type: application/json Created: 2023-09-20T10:00:00Z Author: John Doe Tags: [markdown, vscode, diagram] # My Diagram mermaid flowchart TD A[Start] --> B(Process) B --> C{Decision} C -->|Yes| D[End] C -->|No| B