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

Show code

```mermaid
pie
"Dogs" : 386
"Cats" : 85
"Rats" : 15
```

Special thanks

Some work derived from https://github.com/dai0304/pegmatite and https://github.com/asciidoctor/asciidoctor-browser-extension.