DeepThought theme provides multiple shortcodes on top of built-in ones in Zola. Please, have a look at the Config Options that explain how to enable them.

Mermaid

Mermaid is a library helping you to generate diagram and flowcharts from text, in a similar manner as Markdown.

Flowchart

To put a flowchart in your post use below snippet

Code

{% mermaid() %}
graph TD;
    A-->B;
    A-->C;
    B-->D;
    C-->D;
{% end %}

Output

Sequence Diagram

To put a sequence diagram in your post use below snippet

Code

{% mermaid() %}
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 <br/>prevail!
  John-->>Alice: Great!
  John->>Bob: How about you?
  Bob-->>John: Jolly good!
{% end %}

Output

Gantt diagram

To put a gantt diagram in your post use below snippet

Code

{% 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
{% end %}

Output

Class diagram - experimental

To put a class diagram in your post use below snippet

Code

{% mermaid() %}
classDiagram
  Class01 <|-- AveryLongClass : Cool
  Class03 _-- Class04
  Class05 o-- Class06
  Class07 .. Class08
  Class09 --> C2 : Where am i?
  Class09 --_ C3
  Class09 --|> Class07
  Class07 : equals()
  Class07 : Object[] elementData
  Class01 : size()
  Class01 : int chimp
  Class01 : int gorilla
  Class08 <--> C2: Cool label
{% end %}

Output

Entity Relationship Diagram - experimental

To put an ER diagram in your post use below snippet Code

{% mermaid() %}
erDiagram
    CUSTOMER ||--o{ ORDER : places
    ORDER ||--|{ LINE-ITEM : contains
    CUSTOMER }|..|{ DELIVERY-ADDRESS : uses
{% end %}

Output

User Journey Diagram

To put an user journey diagram in your post use below snippet Code

{% mermaid() %}
  journey
  title My working day
  section Go to work
  Make tea: 5: Me
  Go upstairs: 3: Me
  Do work: 1: Me, Cat
  section Go home
  Go downstairs: 5: Me
  Sit down: 5: Me
{% end %}

Output

Mapbox

Mapbox GL JS is a JavaScript library that uses WebGL to render interactive maps from vector tiles and Mapbox styles.

Code

{% mapbox(zoom=6) %}
{
  "type": "FeatureCollection",
  "features": [
    {
      "type": "Feature",
      "geometry": {
        "type": "Point",
        "coordinates": [78.016667, 27.183333]
      },
      "properties": {
        "title": "Agra",
        "description": "Agra is a major tourist destination because of its many Mughal-era buildings, most notably the Taj Mahal, Agra Fort and Fatehpur Sikri, all of which are UNESCO World Heritage Sites."
      }
    },
    {
      "type": "Feature",
      "geometry": {
        "type": "Point",
        "coordinates": [77.2, 28.6]
      },
      "properties": {
        "title": "New Delhi",
        "description": "New Delhi is the capital of India and an administrative district of NCT Delhi."
      }
    }
  ]
}
{% end %}

Output

Chart

Chart.xkcd is a chart library plots “sketchy”, “cartoony” or “hand-drawn” styled charts.

Line chart

Line chart displays series of data points in the form of lines. It can be used to show trend data, or comparison of different data sets.

Code

{% chart() %}
{
  "type": "Line",
  "title": "Monthly income of an indie developer",
  "xLabel": "Month",
  "yLabel": "$ Dollars",
  "data": {
    "labels": ["1", "2", "3", "4", "5", "6", "7", "8", "9", "10"],
    "datasets": [
      {
        "label": "Plan",
        "data": [30, 70, 200, 300, 500, 800, 1500, 2900, 5000, 8000]
      },
      {
        "label": "Reality",
        "data": [0, 1, 30, 70, 80, 100, 50, 80, 40, 150]
      }
    ]
  }
}
{% end %}

Output

XY chart

XY chart is used to plot points by specifying their XY coordinates.

Code

{% chart() %}
{
  "type": "XY",
  "title": "Pokemon farms",
  "xLabel": "Coordinate",
  "yLabel": "Count",
  "data": {
    "datasets": [
      {
        "label": "Pikachu",
        "data": [
          {
            "x": 3,
            "y": 10
          },
          {
            "x": 4,
            "y": 122
          },
          {
            "x": 10,
            "y": 100
          }
        ]
      },
      {
        "label": "Squirtle",
        "data": [
          {
            "x": 1,
            "y": 1
          },
          {
            "x": 3,
            "y": 3
          }
        ]
      },
      {
        "label": "Charizard",
        "data": [
          {
            "x": 2,
            "y": 5
          },
          {
            "x": 6,
            "y": 8
          }
        ]
      }
    ]
  },
  "options": {
    "xTickCount": 5,
    "yTickCount": 5,
    "showLine": false,
    "dotSize": 1
  }
}
{% end %}

Output

Bar chart

A bar chart provides a way of showing data values represented as vertical bars

Code

{% chart() %}
{
  "type": "Bar",
  "title": "How to feel powerful ?",
  "xLabel": "Platforms",
  "yLabel": "Count",
  "data": {
    "labels": ["Earn Money", "Get Famous", "Use terminal in front of non-programmers"],
    "datasets": [
      {
        "data": [30, 45, 100]
      }
    ]
  },
  "options": {
    "yTickCount": 2,
    "dataColors": ["Red", "Green", "Blue"]
  }
}
{% end %}

Output

Stacked bar chart

A stacked bar chart provides a way of showing data values represented as vertical bars

Code

{% chart() %}
{
  "type": "StackedBar",
  "title": "Issues and PR Submissions",
  "xLabel": "Month",
  "yLabel": "Count",
  "data": {
    "labels": ["Jan", "Feb", "Mar", "April", "May"],
    "datasets": [
      {
        "label": "Issues",
        "data": [12, 19, 11, 29, 17]
      },
      {
        "label": "PRs",
        "data": [3, 5, 2, 4, 1]
      },
      {
        "label": "Merges",
        "data": [2, 3, 0, 1, 1]
      }
    ]
  }
}
{% end %}

Output

Pie/Doughnut chart

A pie/doughnut chart provides a way of illustrating numerical proportion.

Code

{% chart() %}
{
  "type": "Pie",
  "title": "What Tim is made of",
  "data": {
    "labels": ["a", "b", "e", "f", "g"],
    "datasets": [
      {
        "data": [500, 200, 80, 90, 100]
      }
    ]
  }
}
{% end %}

Output

Radar chart

A radar chart provides a way of displaying multivariate data in the form of a two-dimensional chart of three or more quantitative variables represented on axes starting from the same point.

Code

{% chart() %}
{
  "type": "Radar",
  "title": "Letters in random words",
  "data": {
    "labels": ["c", "h", "a", "r", "t"],
    "datasets": [
      {
        "label": "ccharrrt",
        "data": [2, 1, 1, 3, 1]
      },
      {
        "label": "chhaart",
        "data": [1, 2, 2, 1, 1]
      }
    ]
  },
  "options": {
    "showLegend": true,
    "showLabels": true
  }
}
{% end %}

Output

Galleria

Galleria is a framework that simplifies the process of creating beautiful image galleries for the web and mobile devices.

Code

{% galleria() %}
{
  "images": [
    {
      "src": "alexandre-dinaut-GHxr3O6yZ1c-unsplash.jpg",
      "title": "Clouds & Mountains",
      "description": "Just hanging out with each other."
    },
    {
      "src": "chandler-cruttenden-YYemke7BfuE-unsplash.jpg",
      "title": "Crop",
      "description": "Waiting for the harvest."
    },
    {
      "src": "jung-ho-park-7aZtpsyaWVM-unsplash.jpg",
      "title": "The Fog",
      "description": "Engulfing everything."
    },
    {
      "src": "kitera-dent-BIj4LObC6es-unsplash.jpg",
      "title": "Just Plants",
      "description": "Backdrop of ocean."
    },
    {
      "src": "koes-nadi-XkUFF1nnbA8-unsplash.jpg",
      "title": "Whoa",
      "description": "Something to look at."
    },
    {
      "src": "lazyartistgallery-HHaIRbgzcGw-unsplash.jpg",
      "title": "Let's Chill",
      "description": "Three birds just chilling !!"
    },
    {
      "src": "saira-nUxdL_19OQw-unsplash.jpg",
      "title": "Canyon",
      "description": "Might of nature."
    },
    {
      "src": "waldemar-brandt-2hAEHCt25eM-unsplash.jpg",
      "title": "Evening",
      "description": "Time to wind down."
    }
  ]
}
{% end %}

Output

KaTeX

KaTeX is a math typesetting library based on TeX.

Code

{% katex(block=true) %}
\KaTeX
{% end %}

Output

Photo By:

• ALEXANDRE DINAUT on Unsplash
• Chandler Cruttenden on Unsplash
• Jung Ho Park on Unsplash
• Kitera Dent on Unsplash
• Koes nadi on Unsplash
• Lazyartistgallery on Unsplash
• Saira on Unsplash
• Waldemar Brandt on Unsplash