How to create charts using Mermaid?

1 year ago
Emily Johnson
1 minute

The following steps must be followed to create charts using Mermaid.

  1. Include the Mermaid library in the HTML file.
<script src="https://cdn.jsdelivr.net/npm/mermaid/dist/mermaid.min.js"></script>
  1. Create a container element for displaying a chart.
<div class="mermaid" id="chart"></div>
  1. Define charts in JavaScript code using the Mermaid syntax.
mermaid.initialize({ startOnLoad: true });

const chartDefinition = `
  graph LR
    A-->B
    B-->C
    C-->A
`;

const chartElement = document.getElementById('chart');
chartElement.innerHTML = chartDefinition;

The above code draws the chart by setting the value of chartDefinition for the div element.

  1. Simply open the HTML file in a terminal or browser to view the displayed charts.

Mermaid supports various types of charts such as flowcharts, sequence diagrams, Gantt charts, etc. For specific syntax, please refer to the official documentation of Mermaid.

bannerAds