Markdown Diagrams (browser extension)

A browser extension for Chrome, Edge, Opera and Firefox that renders markdown diagrams and charts code blocks into preview images.

Supports many languages

PlantUML, Mermaid, C4 with PlantUML, GraphViz, Erd, Nomnoml, BPMN, BlockDiag, SeqDiag, ActDiag, NwDiag, PacketDiag, RackDiag, Bytefield, Ditaa, Svgbob, UMlet, Vega, Vega-Lite, WaveDrom.

Supports any website

GitHub (demo), GitLab (demo), Bitbucket (demo): markdown files, pull requests, issues description, gists, wiki...
Atlassian: Jira, Confluence, Trello...
all other websites trying known patterns.
local files when rendered with some markdown extension (for example this).

Install

Google Chrome: Markdown Diagrams - Chrome Web Store
Firefox: Markdown Diagrams - Firefox Add-ons
Edge: Markdown Diagrams - Edge Add-ons
Opera: Markdown Diagrams - Opera Addons

How to use

Simply put diagram or chart code into a blockquote:

```language

code here

```

Double click to rendered diagram to swith to code/diagram. Click to extension icon to disable/enable parsing in current browser tab.

Examples

Diagrams and charts code examples here and here.

Show code

```plantuml
@startuml
(*) --> "Initialization"

if "Some Test" then
-->[true] "Some Action"
--> "Another Action"
-right-> (*)
else
->[false] "Something else"
-->[Ending process] (*)
endif

@enduml
```