Imron Rosyadi
  • Hi 👋🏼
  • Background Removal
  • _v_images
    • 20211023055131420_4883.png
  • Me
    • Hi 👋🏼
    • My Awesome Android Apps
    • Book and Tutorial Plan
    • Browser Extension and Add-On
    • Imron Rosyadi CV
    • My Awesome Gadget
    • My Github Readme
    • Hi 👋🏼
    • MS Word Add In
    • My Workflow
    • Research Plan
    • Services on rosyadi.com and irosyadi Blog Networks
    • List of Uninstalled Windows Apps
    • My Awesome List of Windows Apps
  • Academia
    • Academia Resource
    • Arxiv and Paper Preprint
    • Awesome Browser Research Tools
    • Citation Tools
    • Awesome Conferences Tools
    • Funny Research Papers
    • Awesome Scientific Journal Tools
    • Awesome Latex Tools
    • Awesome Document Research Tools
    • Curated Papers
    • paper-exploration-tool-extended
    • Awesome Paper Exploration Tools
    • Awesome Paper Reading Tools
    • paper-search-extended
    • Paper and Article Search Tools
    • Awesome Research and Academic Writing Assistant Tools
    • How to Write Research Paper
    • PhD How To
    • Research Resources
    • Scientific Report Tools
    • Scihub - Paper Search
    • Technology for Society
    • Thesis Search
  • ai
    • Chat-GPT
    • GPT-2
    • GPT-3
  • App
    • 3D Tools
    • Arduino Graph Plotter Apps
    • Terminal in Arduino
    • Cloud GPU
    • Awesome Desktop Apps
    • Desktop Search App
    • Digitizer - Converting Graph into Data
    • Earth Map and Tools
    • Electronics EDA Tools
    • File Compression Optimization
    • Awesome List of File Converter Apps
    • File Sharing, File Transfer and File Sync
    • Free Apps for Developers
    • Free Apps for Students
    • Free Cloud Compute Infrastructure
    • Google Sheet Tools
    • Image Format Conversion
    • Interactive Code in Webpage
    • Jupyter Notebook Apps
    • Map Tools
    • Awesome List of Maps
    • Movie App
    • Note Calculator
    • Awesome List of OCR Apps
    • Octave Online Server
    • Open Source Apps
    • PC to Android Connection
    • PDF Tools
    • Phone Tools
    • Presentation Apps and Tools
    • Project and Time Management
    • QR Code and Barcode Apps
    • Read Mode Tool
    • Remote Desktop
    • RSS Tools
    • Secure Communications
    • Spreadshseet (Sheet) Apps and Tools
    • Symbolic Math Solver
    • Text Manipulation and Expansion
    • Torrent
    • Tracking Apps
    • Traffic Simulation
    • USB Tools
    • Utility Calculator
    • Website Cloning
    • Windows Application Manager
    • Windows Debloat Tools
    • Windows Launcher
  • Awesome
    • Awesome Free Stuffs from Internet
    • Color Science and Tools
    • Financial Tools
    • Game
    • History Tools and Apps
    • Linux Resources
    • Awesome Microcontroller and Microcomputer
    • Open Source Resources
    • Photography Resources
    • Regex
    • Unicode
    • Vexillology
    • Weather
  • Book
    • Awesome Open Source Documents
    • Book with Code
    • Computer Graphics Books, Tutorials, and Courses
    • Deep Learning Books, Tutorials, and Courses
    • Ebook Reader
    • E-book Search Engine Tools
    • eBook
    • Free and Open Electrical Engineering Books
    • Free and Open Books Repository and Provider
    • Free and Open Books
    • Image Processing Book and Tutorial
    • Interactive Books
    • Libgen - Book Search Engine
    • Math Books, Tutorials, and Courses
    • Numerical Computing Resources
    • Open Glossary
    • Pretext Book
    • Statistics Books, Tutorials, and Courses
    • z-lib - Book Search Engine
  • Course
    • Computer Science
    • Control Design with Frequency Method
    • Control Systems Resources
    • Control Systems
    • Standford CS231n 2017 Summary
    • CS231n Resources
    • Digital Signal Processing
    • Electronic Resources
    • Electronics
    • Embedded Systems
    • Free Online Course
    • Fundamentals of Electrical Engineering
    • Instrumentation
    • Kuliah
    • Linear Algebra
    • Machine Learning Andrew Ng Quizzes
    • Machine Learning by Andrew Ng Resources
    • Machine Learning CS299
    • Math Resources
    • MK Dasar Teknik Elektro
    • MK Internet of Things
    • MK Machine Learning
    • MK Matematika Teknik
    • MK Pengolahan Sinyal Digital
    • MK Sistem Kendali Cerdas
    • MK Sistem Kendali Lanjut
    • MK Sistem Kendali
    • Rangkaian Listrik
    • Statistic and Probability
  • data-engineering
    • Awesome Data Set
    • CSV Tools
    • Data Format Conversion Tools
    • Data Science Books, Tutorials, and Courses
    • Data Science Resources
    • Data Tools
    • Awesome List of Data Visualization
    • Awesome List of Dataset
  • Digital Media
    • IPTV
    • Awesome List of Animation Apps
    • Audio, Music, Radio, and Podcast Streaming Apps
    • Audio and Music Tools
    • Awesome WASM Apps
    • Face and Pose Animation
    • Free Audio and Music
    • Free Icons
    • Free Image
    • Free Videos
    • Generative 3D Image
    • Generative Audio Music
    • Generative Color Colorization
    • Generative Image
    • Generative Machine Learning GAN
    • Generative Text
    • Generative Video
    • GIF Tools
    • Historical Colorization
    • Awesome List of Image Editors, Converters, and Processors
    • Speech to Speech (Fake Voice Generator)
    • Speech to Text Apps
    • Awesome List of SVG Applications
    • Text to Speech Apps
    • Awesome List of Video Editors
    • Visual and Optical Illusion
  • Drawing and Diagram
    • Awesome List of Diagram Apps
    • Drawing Tools
    • Graph Tools and Apps
    • Lightboard
    • Sketching, Hand Drawing, and Hand Writing Web App
  • Hacking, Privacy, and Security
    • Two Factor Authentication
    • Awesome List of Adblock Apps
    • Adblock Testers
    • Bookmarklets
    • Awesome Desktop and Browser Automation
    • DNS Leak Checkers
    • DNS Tools
    • Email Alias and Forwarding
    • Encryption and Cryptography
    • Google Hacking
    • Hosts File Management
    • IP Tools
    • Link Tracker
    • My IP Address Checkers
    • Cloud Network Tools
    • OSINT Tools
    • Paywall Bypass
    • Web-based Ping and Latency Tools
    • Port Forwarding
    • Prank
    • Privacy, Security and Anonymity Apps
    • Subdomain Takeover
    • Userscript
    • VPN and Wireguard
    • Web Scraping
    • Web Testing
    • Website Monitoring
  • How To
    • Anaconda How To
    • Chrome How To
    • Cloudflare How To
    • Docker Howto
    • Google Docs How To
    • Google Sheet How To
    • LanguageTool Word How To
    • MATLAB How To
    • Microsoft Word How To
    • Netlify
    • Network How To
    • Notepad++ How To
    • Obsidian How To
    • Octave How To
    • Powerpoint Howto
    • Shortcut How To
    • Tailscale How To
    • Windows 10 How To
    • Wordpress Howto
    • Zotero How To
  • Learning
    • Anki and Spaced Repetition
    • Certification
    • Language Learning
    • Learning and Education Resources
  • machine-learning
    • Awesome NLP Projects
    • CT-Scan for Covid-19 Classification using Machine Learning
    • Emotion Detection with Machine Learning
    • Face Expression and Detection
    • Face Mask Detection with Machine Learning
    • Interesting Machine Learning Papers
    • Land Cover Classification
    • Machine Learning Books and Tutorials
    • Machine Learning Course
    • Machine Learning Glossary
    • Machine Learning Metrics
    • Machine Learning Resources
    • Machine Learning SOTA and Model Zoo
    • Machine Learning Tools
    • Machine Learning in Agriculture
    • Machine Learning for Earth Science
    • Hardware for Machine Learning
    • Machine Learning for Health
    • Machine Learning for Image Processing
    • Machine Learning Embedded Devices
    • Machine Learning in Mobile Devices
    • Machine Learning News and Blog
    • Machine Learning for Satellite Images
    • Machine Learning for Sport Pose Analysis
    • Machine Learning in Sports
    • Machine Learning Teaching
    • Awesome List of Machine Learning Visualization
    • Neural Network
    • NLP with GPT
    • NLP for Bahasa Indonesia
    • NLP Models
    • Object Detection
    • Reinforcement Learning
    • Safety Helmet and Plate Detection
  • Markdown
    • About Markdown
    • Basic Markdown Cheatsheet (example of Heading 1)
    • Basic Syntax of Markdown
    • Awesome Bookmarklet
    • commonmark
    • complete-markdown-cheatsheet
    • Extended Commonmark
    • Extended Markdown Cheatsheet
    • Extended Syntax of Markdown
    • Getting Started about Markdown
    • List of Library for Commonmark Extension
    • List of Extension in Markdown
    • Markdown Cheatsheet
    • Style Guide for Markdown Writing
    • Markdown Tools and Apps
    • About Pandoc
  • Note
    • 100 Days Challenge
    • Arduino in Industrial
    • About Compiler and Interpreter
    • Convolution
    • Emoji
    • File Format
    • Interesting Blog
    • Interesting Story
    • Kalman Filters
    • Op-Amp
    • Open Culture
    • Open Directory Search
    • Open Source Hardware
    • Open Healthcare Library
    • Patent and Intellectual Property
    • PID Control
    • Routh-Hurwitz
    • Social Media
    • Zeer Evaporation Pot
  • programming
    • Javascripts Books, Tutorials, and Courses
    • Javascript Resources
    • Numpy Resources
    • Programming for Kids Books, Tutorials, and Courses
    • Programming References
    • Programming Resources
    • Python Books, Tutorials, and Courses
    • Python in Browser
    • Python Resources
  • Random Notes
    • 2020 Q3
    • 2020 Q4
    • 2021 Q1
    • 2021 Q2
    • 2021 Q3
    • 2022 October
    • 2022 Q1
    • 2022 Q2
    • 2023 January
    • 2023 May
    • Bookmarks on Ebooks
    • Bookmarks
    • test
  • Research
    • Awesome Google Colab Notebooks
    • Awesome Jupyter Notebooks
    • Debutanizer Column
    • Digital Twin News
    • Digital Twin in Vehicles
    • FPGA
    • NCBI Papers with Code
    • PHM in Motor
    • Plant Identification
    • Open Source Robotic Simulator
    • Awesome Science Blogs and Forums
    • Sign Language Recognition
    • Soft Sensor
    • Solar Energy
    • Time Series Forecasting
    • Virtual Reality and Augmented Reality
  • Web Apps
    • Alternative Frontend of Popular Websites
    • Alternative to Popular Websites
    • Bookmarks Tool
    • Captive Portal Access
    • Color Format Conversion
    • Deepfake - This Thing Does Not Exist
    • Document Tools
    • Domain Name Tools
    • Free Cloud Storage
    • Free Resources in Internet
    • Github Apps and Tools
    • Hacker News Apps
    • Hosted Open Source Services
    • Instagram Apps
    • Awesome List of Interactive and Explorable Webs
    • News Agregator
    • No Code Platforms
    • Number Format Conversion
    • Online IDE
    • Platform as a Service
    • Random Data Generator
    • Reddit Apps
    • Search Engine App
    • Self-hosted Applications
    • Software Search
    • Spartan and Text Only Websites
    • Network Speed Test Apps
    • Twitter Apps
    • Unit Conversion
    • URL Shortener
    • virtual-browser
    • Check Live Status of Website
    • Web Tools
    • Document Tools Suite
    • Wikipedia Apps
    • Awesome Youtube Apps
  • Web Development
    • Awesome CSS
    • Special Markdown Case
    • Markdown for This Blog
    • Classless CSS
    • Developer Tools
    • experimental-heading-1
    • Title
    • Experimental iFrame
    • Experimental Markdown
    • Jamstack and WebApps
    • List of Static Web Generator
    • Web Metrics and Performance Analysis
    • Webdev Resources
    • Web List
    • Website Rank
  • Writing
    • Free GPT Playground
    • Book Publication
    • Online Dictionaries
    • Exobrain Blogs and Digital Gardens
    • Grammar Checkers
    • Awesome Latex Editors
    • Awesome Latex Learning
    • Awesome Markdown Apps
    • Mathematics Editor and Calculator
    • Notetaking Tools
    • Online Documentation Tools
    • Sentence Paraphraser
    • Word Phrase Banks
    • Plagiarism Checkers
    • Text and Markdown Editor
    • Thesaurus
    • Translation
    • Awesome Writing Assistant Tools
    • Writing Prompt
    • Writing Tips
Powered by GitBook
On this page
  • 2.16. Diagram
  • 2.16.1 Mermaid
  • 2.16.2 Plantuml
  • 2.16.4 Graphviz's dot
  • 2.16.5 Railroad diagrams
  • 2.16.7 Vega and Vega-Lite
  • 2.16.8 Network Sequence

Was this helpful?

  1. Markdown

List of Library for Commonmark Extension

PreviousGetting Started about MarkdownNextList of Extension in Markdown

Last updated 3 years ago

Was this helpful?

2.16. Diagram

Notes:

  • Your app should support the specific library or engine to draw the diagram

  • You should specify particular language of the fenced code block and write the definition of your diagram within it.

2.16.1 Mermaid

Notes:

  • It's implemented in showdown-mermaid.js

  • Rendering diagrams of Flowchart or Sequence or Gantt

  • Using

  • Check for more information.

  • Code inside { } is optional

Syntaxes

  • Flowchart syntax:

      ```mermaid {"align": "left | center | right", "codeblock": true | false}
      graph TD;
      <code content>
      ```
  • Sequence diagram syntax:

      ```mermaid {"align": "left | center | right", "codeblock": true | false}
      sequenceDiagram
      <code content>
      ```
  • Gantt diagram syntax:

      ```mermaid {"align": "left | center | right", "codeblock": true | false}
      gantt
      <code content>
      ```

Showcases

  • Flowchart

```mermaid {"align":"center", "codeblock": true} graph TD; A-->B; A-->C; B-->D; C-->D;

```mermaid {"align":"center"}
graph TD;
           A-->B;
           A-->C;
           B-->D;
           C-->D;
  • Sequence diagram

```mermaid {"align":"right"} sequenceDiagram participant Alice participant Bob Alice->>John: Hello John, how are you? loop Healthcheck John->>John: Fight against hypochondria end Note right of John: Rational thoughts prevail! John-->>Alice: Great! John->>Bob: How about you? Bob-->>John: Jolly good!

- Gantt diagram

```mermaid
       gantt
       dateFormat  YYYY-MM-DD
       title Adding GANTT diagram to mermaid
       excludes weekdays 2014-01-10

       section A section
       Completed task            :done,    des1, 2014-01-06,2014-01-08
       Active task               :active,  des2, 2014-01-09, 3d
       Future task               :         des3, after des2, 5d
       Future task2               :         des4, after des3, 5d

2.16.2 Plantuml

Notes:

  • It's implemented in showdown-plantuml.js,

  • Render diagrams of uml,

  • Code inside { } is optional

Syntaxes

```plantuml {"align": "left | center | right", "codeblock": true | false}
@startuml
<code content>
@enduml
```

Showcases

```plantuml {"align":"right"} @startuml participant User

  User -> A: DoWork
  activate A

  A -> B: << createRequest >>
  activate B

  B -> C: DoWork
  activate C
  C --> B: WorkDone
  destroy C

  B --> A: RequestCreated
  deactivate B

  A -> User: Done
  deactivate A

  @enduml
### 2.16.3 Flowchart
*Notes:*
- It's implemented in showdown-flowchart.js
- Render diagrams of flowchart
- Using [flowchart.js](https://github.com/adrai/flowchart.js)
- Check [flowchart website](https://flowchart.js.org/) for more information.
- Code inside `{ }` is optional

***Syntaxes***

    ```flow {"align": "left | center | right", "codeblock": true | false}
    <code content>

Syntaxes

```flowchart {"align": "left | center | right", "codeblock": true | false}
<code content>
```

Showcases

st->op1->cond cond(yes)->io->e cond(no)->para para(path1, bottom)->sub1(right)->op1 para(path2, top)->op1

***Showcases***

```flowchart {"align":"right"}
st=>start: Start
e=>end
op1=>operation: My Operation
sub1=>subroutine: My Subroutine
cond=>condition: Yes
or No?:>https://www.google.com
io=>inputoutput: catch something
st->op1->cond
cond(yes)->io->e
cond(no)->sub1(right)->op1

2.16.4 Graphviz's dot

Notes:

  • It's implemented in showdown-viz.js

  • Render diagrams of graphviz's dot

  • Code inside { } is optional

Syntaxes

The \ of json's "engine" field value is 'circo', 'dot', 'neato', 'osage', 'twopi' in syntax language attribute.

```dot {"engine": "<engine name>", "align": "<align>"}
<code content>
```

Showcases

  • Dot example with dot engine:

```dot {"engine":"dot", "align":"center"} digraph G { main -> parse -> execute; main -> init; main -> cleanup; execute -> make_string; execute -> printf init -> make_string; main -> printf; execute -> compare; }

<br>

- Dot example with circo engine:

```dot {"engine":"circo", "align":"right"}
digraph G {
    main -> parse -> execute;
    main -> init;
    main -> cleanup;
    execute -> make_string;
    execute -> printf
    init -> make_string;
    main -> printf;
    execute -> compare;
}

2.16.5 Railroad diagrams

Notes:

  • It's implemented in showdown-viz.js,

  • Render diagrams of railroad

  • Code inside { } is optional

Syntaxes

```railroad {"align": "left | center | right", "codeblock": true | false}
<code content>
```

Showcases

```railroad {"align":"center"} Diagram( Optional('+', 'skip'), Choice(0, NonTerminal('name-start char'), NonTerminal('escape')), ZeroOrMore( Choice(0, NonTerminal('name char'), NonTerminal('escape'))))

### 2.16.6 WaveDrom
*Notes:*
- It's implemented in showdown-viz.js, 
- Render diagrams of wavedrom 
- Using [wavedrom](https://github.com/wavedrom/wavedrom)
- Check [wavedrom website](https://wavedrom.com) for more information.
- Code inside `{ }` is optional

***Syntaxes***

    ```wavedrom {"align": "left | center | right", "codeblock": true | false}
    <code content>

Showcases

```wavedrom {"align":"center"} {signal: [ {name: 'clk', wave: 'p.....|...'}, {name: 'dat', wave: 'x.345x|=.x', data: ['head', 'body', 'tail', 'data']}, {name: 'req', wave: '0.1..0|1.0'}, {}, {name: 'ack', wave: '1.....|01.'} ]}

***Showcases***

```wavedrom {"align":"right"}
{ signal: [
  { name: "pclk", wave: 'p.......' },
  { name: "Pclk", wave: 'P.......' },
  { name: "nclk", wave: 'n.......' },
  { name: "Nclk", wave: 'N.......' },
  {},
  { name: 'clk0', wave: 'phnlPHNL' },
  { name: 'clk1', wave: 'xhlhLHl.' },
  { name: 'clk2', wave: 'hpHplnLn' },
  { name: 'clk3', wave: 'nhNhplPl' },
  { name: 'clk4', wave: 'xlh.L.Hx' },
]}

2.16.7 Vega and Vega-Lite

Notes:

  • It's implemented in showdown-vega.js,

  • Code inside { } is optional

Syntaxes

```vega {"align": "left | center | right", "codeblock": true | false}
<code content>
```

Syntaxes

```vega-lite {"align": "left | center | right", "codeblock": true | false}
<code content>
```

Showcases

  • Vega example:

"signals": [ { "name": "startAngle", "value": 0, "bind": {"input": "range", "min": 0, "max": 6.29, "step": 0.01} }, { "name": "endAngle", "value": 6.29, "bind": {"input": "range", "min": 0, "max": 6.29, "step": 0.01} }, { "name": "padAngle", "value": 0, "bind": {"input": "range", "min": 0, "max": 0.1} }, { "name": "innerRadius", "value": 0, "bind": {"input": "range", "min": 0, "max": 90, "step": 1} }, { "name": "cornerRadius", "value": 0, "bind": {"input": "range", "min": 0, "max": 10, "step": 0.5} }, { "name": "sort", "value": false, "bind": {"input": "checkbox"} } ],

"data": [ { "name": "table", "values": [ {"id": 1, "field": 4}, {"id": 2, "field": 6}, {"id": 3, "field": 10}, {"id": 4, "field": 3}, {"id": 5, "field": 7}, {"id": 6, "field": 8} ], "transform": [ { "type": "pie", "field": "field", "startAngle": {"signal": "startAngle"}, "endAngle": {"signal": "endAngle"}, "sort": {"signal": "sort"} } ] } ],

"scales": [ { "name": "color", "type": "ordinal", "domain": {"data": "table", "field": "id"}, "range": {"scheme": "category20"} } ],

"marks": [ { "type": "arc", "from": {"data": "table"}, "encode": { "enter": { "fill": {"scale": "color", "field": "id"}, "x": {"signal": "width / 2"}, "y": {"signal": "height / 2"} }, "update": { "startAngle": {"field": "startAngle"}, "endAngle": {"field": "endAngle"}, "padAngle": {"signal": "padAngle"}, "innerRadius": {"signal": "innerRadius"}, "outerRadius": {"signal": "width / 2"}, "cornerRadius": {"signal": "cornerRadius"} } } } ] }

<br>

- Vega-Lite example:

```vega-lite {"align":"right"}
{
  "$schema": "https://vega.github.io/schema/vega-lite/v4.json",
  "description": "Plots two functions using a generated sequence.",
  "width": 300,
  "height": 150,
  "data": {
    "sequence": {
      "start": 0,
      "stop": 12.7,
      "step": 0.1,
      "as": "x"
    }
  },
  "transform": [
    {
      "calculate": "sin(datum.x)",
      "as": "sin(x)"
    },
    {
      "calculate": "cos(datum.x)",
      "as": "cos(x)"
    },
    {
      "fold": ["sin(x)", "cos(x)"]
    }
  ],
  "mark": "line",
  "encoding": {
    "x": {
      "type": "quantitative",
      "field": "x"
    },
    "y": {
      "field": "value",
      "type": "quantitative"
    },
    "color": {
      "field": "key",
      "type": "nominal",
      "title": null
    }
  }
}

2.16.8 Network Sequence

Notes:

  • It's implemented in showdown-sequence.js,

  • Render diagrams of sequence

  • Code inside { } is optional

Syntaxes

The \ of json's "theme" field value is "hand" or "simple" in syntax language attribute;

```sequence {"theme": "<theme name>", "align": "<align>"}
<code content>
```

Showcases

  • Sequence example with hand theme:

```sequence {"theme":"hand", "align":"center"} Alice->Bob: Hello Bob, how are you? Note right of Bob: Bob thinks Bob-->Alice: I am good thanks!

<br>

- Sequence example with simple theme:

```sequence {"theme":"simple", "align":"right"}
Alice->Bob: Hello Bob, how are you?
Note right of Bob: Bob thinks
Bob-->Alice: I am good thanks!

Using ,

Check fpr more information.

```flow {"align":"center"} st=>start: Start:>] e=>end:> op1=>operation: My Operation sub1=>subroutine: My Subroutine cond=>condition: Yes or No?:> io=>inputoutput: catch something... para=>parallel: parallel tasks

Using .

Using .

Render diagrams of and

Using ,

Check and for more information.

```vega {"align":"center"} { "$schema": "", "width": 200, "height": 200, "autosize": "none",

Using .

mermaid
mermaid doc
plantuml
plantuml website
https://www.google.com[blank
https://www.google.com
https://www.google.com
viz.js
railroad-diagrams
Vega
Vega-Lite
vega-embed
vega website
vega-lite website
https://vega.github.io/schema/vega/v5.json
js-sequence-diagrams