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](doc/examples) and [here](https://kroki.io/examples.html).

![Diagram example](https://kroki.io/plantuml/svg/eJxNjrEOwjAMRHd_hZUJkPoLVTswMMNWdYiK01hKE5S4C1-Po2RgsvXufOepiM1yHgEutysOw4jmEVnYBv5a4RQNADs0z3QQvqiIQfEUAat3kXzS2sV5a3ZsKXNMasz_OPPuRTVtAgqFKhsXZ3XtIeI57li1nrPc47uiT04blbK2W2UOYNKpj_8Ace07KA==)
<details>
    <summary>Show code</summary>

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

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

    @enduml

Special thanks

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