diff --git a/cypress/platform/per.html b/cypress/platform/per.html
index 4fca4c808..f68a3f50b 100644
--- a/cypress/platform/per.html
+++ b/cypress/platform/per.html
@@ -6,6 +6,10 @@
       rel="stylesheet"
       href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"
     />
+    <link
+      href="https://cdn.jsdelivr.net/npm/@mdi/font@6.9.96/css/materialdesignicons.min.css"
+      rel="stylesheet"
+    />
     <link
       href="https://fonts.googleapis.com/css?family=Noto+Sans+SC&display=swap"
       rel="stylesheet"
@@ -25,6 +29,12 @@
       }
       .mermaid svg {
         /* font-size: 18px !important; */
+        background-color: #eee;
+        background-image: radial-gradient(#fff 1%, transparent 11%),
+          radial-gradient(#fff 1%, transparent 11%);
+        background-size: 20px 20px;
+        background-position: 0 0, 10px 10px;
+        background-repeat: repeat;
       }
       .malware {
         position: fixed;
@@ -46,29 +56,33 @@
   <body>
     <div>Security check</div>
     <pre id="diagram" class="mermaid">
-flowchart LR
-A-->B
-        </pre
-    >
-    <pre id="diagram" class="mermaid2">
-            mindmap
-          root
-            ch1
-            ch2
-        </pre
-    >
-    <script src="./packages/mermaid-mindmap/dist/mermaid-mindmap-detector.js"></script>
-    <script src="./packages/mermaid-mindmap/dist/mermaid-example-diagram-detector.js"></script>
-    <script src="./packages/mermaid/dist/mermaid.js"></script>
+bar title Pets adopted by volunteers
+    "Dogs" : 386
+    "Cats" : 85
+    "Rats" : 15
+    </pre>
+
+    <!-- <div id="cy"></div> -->
+    <!-- <script src="http://localhost:9000/packages/mermaid-mindmap/dist/mermaid-mindmap-detector.js"></script> -->
+    <!-- <script src="./mermaid-example-diagram-detector.js"></script>    -->
+    <!-- <script src="//cdn.jsdelivr.net/npm/mermaid@9.1.7/dist/mermaid.min.js"></script> -->
+    <script src="./mermaid.js"></script>
+
     <script>
       mermaid.parseError = function (err, hash) {
         // console.error('Mermaid error: ', err);
       };
       mermaid.initialize({
+        theme: 'forest',
         startOnLoad: true,
         logLevel: 0,
-        basePath: './packages/',
-        // themeVariables: {relationLabelColor: 'red'}
+        // basePath: './packages/',
+        // themeVariables: { darkMode: true },
+        lazyLoadedDiagrams: [
+          './mermaid-mindmap-detector.esm.mjs',
+          './mermaid-example-diagram-detector.esm.mjs',
+        ],
+        // lazyLoadedDiagrams: ['../../mermaid-mindmap/registry.ts'],
       });
       function callback() {
         alert('It worked');
diff --git a/demos/pie.html b/demos/pie.html
index 333ef9491..b1d3c4902 100644
--- a/demos/pie.html
+++ b/demos/pie.html
@@ -19,7 +19,7 @@
       pie title Pets adopted by volunteers
       accTitle: simple pie char demo
       accDescr: pie chart with 3 sections: dogs, cats, rats. Most are dogs.
-    "Dogs" : 386
+    "Dogs" : 140
     "Cats" : 85
     "Rats" : 15
     </pre>
diff --git a/packages/mermaid/src/diagrams/pie/parser/pie.jison b/packages/mermaid/src/diagrams/pie/parser/pie.jison
index e98638aa8..345da059f 100644
--- a/packages/mermaid/src/diagrams/pie/parser/pie.jison
+++ b/packages/mermaid/src/diagrams/pie/parser/pie.jison
@@ -40,6 +40,7 @@ accDescr\s*"{"\s*                                { this.begin("acc_descr_multili
 <string>["]                                                     { this.popState(); }
 <string>[^"]*                                                   { return "txt"; }
 "pie"		                                                        return 'PIE';
+"bar"		                                                        return 'BAR';
 "showData"                                                      return 'showData';
 ":"[\s]*[\d]+(?:\.[\d]+)?                                       return "value";
 <<EOF>>                                                         return 'EOF';
@@ -53,10 +54,15 @@ accDescr\s*"{"\s*                                { this.begin("acc_descr_multili
 start
   : eol start
   | directive start
-	| PIE document
-  | PIE showData document {yy.setShowData(true);}
+	| document_type document
+  | document_type showData document {yy.setShowData(true);}
 	;
 
+document_type
+  : PIE {yy.setDiagramType($1); }
+  | BAR {yy.setDiagramType($1); }
+  ;
+
 document
 	: /* empty */
 	| document line
diff --git a/packages/mermaid/src/diagrams/pie/pieDb.js b/packages/mermaid/src/diagrams/pie/pieDb.js
index 8ef4d9efc..ddf804499 100644
--- a/packages/mermaid/src/diagrams/pie/pieDb.js
+++ b/packages/mermaid/src/diagrams/pie/pieDb.js
@@ -14,6 +14,7 @@ import {
 
 let sections = {};
 let showData = false;
+let diagramType = 'pie';
 
 export const parseDirective = function (statement, context, type) {
   mermaidAPI.parseDirective(this, statement, context, type);
@@ -26,6 +27,16 @@ const addSection = function (id, value) {
     log.debug('Added new section :', id);
   }
 };
+
+const setDiagramType = function (diagType) {
+  diagramType = diagType;
+  log.debug('Added diag type :', diagType);
+};
+
+const getDiagramType = function () {
+  return diagramType;
+};
+
 const getSections = () => sections;
 
 const setShowData = function (toggle) {
@@ -66,4 +77,6 @@ export default {
   getShowData,
   getAccDescription,
   setAccDescription,
+  setDiagramType,
+  getDiagramType,
 };
diff --git a/packages/mermaid/src/diagrams/pie/pieDetector.ts b/packages/mermaid/src/diagrams/pie/pieDetector.ts
index 65a011c7a..9010f8a96 100644
--- a/packages/mermaid/src/diagrams/pie/pieDetector.ts
+++ b/packages/mermaid/src/diagrams/pie/pieDetector.ts
@@ -1,5 +1,7 @@
 import type { DiagramDetector } from '../../diagram-api/types';
 
 export const pieDetector: DiagramDetector = (txt) => {
-  return txt.match(/^\s*pie/) !== null;
+  const logOutput = txt.match(/^\s*pie/) !== null || txt.match(/^\s*bar/) !== null;
+  console.log(logOutput);
+  return logOutput;
 };
diff --git a/packages/mermaid/src/diagrams/pie/pieRenderer.js b/packages/mermaid/src/diagrams/pie/pieRenderer.js
index 6cbb99fa3..016afccc4 100644
--- a/packages/mermaid/src/diagrams/pie/pieRenderer.js
+++ b/packages/mermaid/src/diagrams/pie/pieRenderer.js
@@ -6,20 +6,200 @@ import * as configApi from '../../config';
 import addSVGAccessibilityFields from '../../accessibility';
 
 let conf = configApi.getConfig();
-
 /**
- * Draws a Pie Chart with the data given in text.
+ * Draws a Bar Chart with the data given in text.
  *
  * @param text
+ * @param txt
  * @param id
+ * @param _version
+ * @param diagObj
  */
+// export const drawBarChart = (txt, id, _version, diagObj) => {
+//   try {
+//     let locDiagType;
+
+//     conf = configApi.getConfig();
+//     log.debug('Rendering info diagram\n' + txt);
+//     locDiagType = diagObj.db.getDiagramType();
+//     const securityLevel = configApi.getConfig().securityLevel;
+//     // Handle root and Document for when rendering in sandbox mode
+//     let sandboxElement;
+//     if (securityLevel === 'sandbox') {
+//       sandboxElement = select('#i' + id);
+//     }
+//     const root =
+//       securityLevel === 'sandbox'
+//         ? select(sandboxElement.nodes()[0].contentDocument.body)
+//         : select('body');
+//     const doc = securityLevel === 'sandbox' ? sandboxElement.nodes()[0].contentDocument : document;
+
+//     // Parse the Pie Chart definition
+//     diagObj.db.clear();
+//     diagObj.parser.parse(txt);
+//     log.debug('Parsed info diagram');
+//     const elem = doc.getElementById(id);
+//     width = elem.parentElement.offsetWidth;
+
+//     if (typeof width === 'undefined') {
+//       width = 1200;
+//     }
+
+//     if (typeof conf.useWidth !== 'undefined') {
+//       width = conf.useWidth;
+//     }
+//     if (typeof conf.pie.useWidth !== 'undefined') {
+//       width = conf.pie.useWidth;
+//     }
+
+//     const diagram = root.select('#' + id);
+//     configureSvgSize(diagram, height, width, conf.pie.useMaxWidth);
+
+//     addSVGAccessibilityFields(diagObj.db, diagram, id);
+//     // Set viewBox
+//     elem.setAttribute('viewBox', '0 0 ' + width + ' ' + height);
+
+//     // Fetch the default direction, use TD if none was found
+//     var margin = 40;
+//     var legendRectSize = 18;
+//     var legendSpacing = 4;
+
+//     var radius = Math.min(width, height) / 2 - margin;
+
+//     var svg = diagram
+//       .append('g')
+//       .attr('transform', 'translate(' + width / 2 + ',' + height / 2 + ')');
+
+//     var data = diagObj.db.getSections();
+//     var sum = 0;
+//     Object.keys(data).forEach(function (key) {
+//       sum += data[key];
+//     });
+
+//     const themeVariables = conf.themeVariables;
+//     var myGeneratedColors = [
+//       themeVariables.pie1,
+//       themeVariables.pie2,
+//       themeVariables.pie3,
+//       themeVariables.pie4,
+//       themeVariables.pie5,
+//       themeVariables.pie6,
+//       themeVariables.pie7,
+//       themeVariables.pie8,
+//       themeVariables.pie9,
+//       themeVariables.pie10,
+//       themeVariables.pie11,
+//       themeVariables.pie12,
+//     ];
+
+//     // Set the color scale
+//     var color = scaleOrdinal().range(myGeneratedColors);
+
+//     // Compute the position of each group on the pie:
+//     var pieData = Object.entries(data).map(function (el, idx) {
+//       return {
+//         order: idx,
+//         name: el[0],
+//         value: el[1],
+//       };
+//     });
+//     var pie = d3pie()
+//       .value(function (d) {
+//         return d.value;
+//       })
+//       .sort(function (a, b) {
+//         // Sort slices in clockwise direction
+//         return a.order - b.order;
+//       });
+//     var dataReady = pie(pieData);
+
+//     // Shape helper to build arcs:
+//     var arcGenerator = arc().innerRadius(0).outerRadius(radius);
+
+//     // Build the pie chart: each part of the pie is a path that we build using the arc function.
+//     svg
+//       .selectAll('mySlices')
+//       .data(dataReady)
+//       .enter()
+//       .append('path')
+//       .attr('d', arcGenerator)
+//       .attr('fill', function (d) {
+//         return color(d.data.name);
+//       })
+//       .attr('class', 'pieCircle');
+
+//     // Now add the percentage.
+//     // Use the centroid method to get the best coordinates.
+//     svg
+//       .selectAll('mySlices')
+//       .data(dataReady)
+//       .enter()
+//       .append('text')
+//       .text(function (d) {
+//         return ((d.data.value / sum) * 100).toFixed(0) + '%';
+//       })
+//       .attr('transform', function (d) {
+//         return 'translate(' + arcGenerator.centroid(d) + ')';
+//       })
+//       .style('text-anchor', 'middle')
+//       .attr('class', 'slice');
+
+//     svg
+//       .append('text')
+//       .text(diagObj.db.getDiagramTitle())
+//       .attr('x', 0)
+//       .attr('y', -(height - 50) / 2)
+//       .attr('class', 'pieTitleText');
+
+//     // Add the legends/annotations for each section
+//     var legend = svg
+//       .selectAll('.legend')
+//       .data(color.domain())
+//       .enter()
+//       .append('g')
+//       .attr('class', 'legend')
+//       .attr('transform', function (d, i) {
+//         var height = legendRectSize + legendSpacing;
+//         var offset = (height * color.domain().length) / 2;
+//         var horz = 12 * legendRectSize;
+//         var vert = i * height - offset;
+//         return 'translate(' + horz + ',' + vert + ')';
+//       });
+
+//     legend
+//       .append('rect')
+//       .attr('width', legendRectSize)
+//       .attr('height', legendRectSize)
+//       .style('fill', color)
+//       .style('stroke', color);
+
+//     legend
+//       .data(dataReady)
+//       .append('text')
+//       .attr('x', legendRectSize + legendSpacing)
+//       .attr('y', legendRectSize - legendSpacing)
+//       .text(function (d) {
+//         if (diagObj.db.getShowData() || conf.showData || conf.pie.showData) {
+//           return d.data.name + ' [' + d.data.value + ']';
+//         } else {
+//           return d.data.name;
+//         }
+//       });
+//   } catch (e) {
+//     log.error('Error while rendering info diagram');
+//     log.error(e);
+//   }
+// };
+
 let width;
 const height = 450;
 export const draw = (txt, id, _version, diagObj) => {
   try {
+    let locDiagType;
+
     conf = configApi.getConfig();
     log.debug('Rendering info diagram\n' + txt);
-
+    locDiagType = diagObj.db.getDiagramType();
     const securityLevel = configApi.getConfig().securityLevel;
     // Handle root and Document for when rendering in sandbox mode
     let sandboxElement;
@@ -191,4 +371,5 @@ export const draw = (txt, id, _version, diagObj) => {
 
 export default {
   draw,
+  //  drawBarChart,
 };
