Mermaid Markdown Syntax

 



This is a page, trying to see if it is working.

Enter mermaid syntax! Mermaid syntax is a Markdown-inspired syntax that enables you to automatically generate diagrams in draw.io. So if you are used to working in a text-based format, this is the perfect way for you to diagram more efficiently.

Context

  • Test of Mermaid in jekyll
  • How to write fomula by MathJax in jekyll

Test of Mermaid in jekyll

  1. Mermaid Markdown Syntax Highlighting is a free extension for VS Code published by Brian Pruitt-Goddard (bpruitt-goddard), you can install it to increase the power of your Visual Studio Code: Markdown syntax support for the Mermaid charting language Learn more.
  2. I'm trying to render a flowchart in a markdown file using Mermaid. I have a ReadMe.md file in my GitHub repository, and I'd like to include a basic flowchart to help describe the contents.

The origin jekyll does not support mermaid. To do this, mermaid is included by:

An example of a flowchart

Here is the source code that should be put into the .md blog file.

Demonstration:

graph TD; A-->B; A-->C; B-->D; C-->D;

Meanwhile in normal markdown, you can write:

Rendering Mermaid Charts - Markdown Monster Documentation

An example of a gantt diagram

List

Mermaid Diagram Markdown

Here is the source code that should be put into the .md blog file.

Demonstration:

Mermaid Markdown Syntax
gantt dateFormat YYYY-MM-DD title Adding GANTT diagram functionality to mermaid 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 section Critical tasks Completed task in the critical line :crit, done, 2014-01-06,24h Implement parser and jison :crit, done, after des1, 2d Create tests for parser :crit, active, 3d Future task in critical line :crit, 5d Create tests for renderer :2d Add to mermaid :1d section Documentation Describe gantt syntax :active, a1, after des1, 3d Add gantt diagram to demo page :after a1 , 20h Add another diagram to demo page :doc1, after a1 , 48h section Last section Describe gantt syntax :after doc1, 3d Add gantt diagram to demo page :20h Add another diagram to demo page :48h

These graphic functions aid to present project works and etc.

How to write fomula by MathJax in jekyll

Add MathJax.js into the head of webpage

Use LaTeX to write fomula

  • To use the common form in LaTeX, like using $ to quote the fomula: $Math_Fomula$, this following line should be added into the webpage.
  • Then, just write the .md files as you do in the markdown softwares like Typora, etc.

Another important stuff included in this page is to build a simple and straightforward context of a markdown blog.

Mermaid Markdown SyntaxMarkdown mermaid chart

How to add a Table of Context in jekyll

The markdown setting in jekyll, espicially for Github page is:

kramkown supports toc by using:

Add the two lines into the position where you want to put the ToC.

The table will look just as the top of this page content.There should be only one ToC at most.