<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>ACME Projects</title>
<meta name="description" content="The HTML5 Herald">
<meta name="author" content="SitePoint">
<!-- <link rel="stylesheet" href="css/styles.css?v=1.0"> -->
<!-- <script src="https://cdn.bootcss.com/mermaid/8.0.0-rc.8/mermaid.min.js"></script> -->
<style>
.flowchart { width: 100%; overflow-x: scroll; }
</style>
</head>
<body>
<div class="mermaid flowchart">
gantt
title Acme Projects
dateFormat YYYY-MM-DD
section 2021
acme platform :a1, 2021-03-07, 5w
acme oauth :a2, after a1 , 5w
acme stark industries :after a1 , 5w
acme devops :a5, after a2 , 5w
acme discovery :a6, after a2 , 5w
</div>
<script src="./js/mermaid.min.js"></script>
<script>
mermaid.init({
noteMargin: 10
}, ".flowchart");
</script>
</body>
</html>
https://stackoverflow.com/questions/65212332/how-to-render-a-mermaid-flowchart-dynamically