Merge branch 'master' of github.com:knsv/mermaid

docs/_sidebar.md

@@ -9,7 +9,6 @@
 - Diagrams
 
   - [Flowchart](flowchart.md)
-  - [State diagram](stateDiagram.md)
   - [Sequence diagram](sequenceDiagram.md)
   - [Gantt](gantt.md)
   - [Pie Chart](pie.md)

docs/index.html

@@ -7,8 +7,8 @@
   <meta name="description" content="Markdownish syntax for generating flowcharts, sequence diagrams, class diagrams, gantt charts and git graphs.">
   <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
   <link rel="stylesheet" href="//unpkg.com/docsify/lib/themes/vue.css">
-  <!-- <script src="//cdn.jsdelivr.net/npm/mermaid@8.3.1/dist/mermaid.min.js"></script> -->
-  <script src="//localhost:9000/mermaid.js"></script>
+  <script src="//cdn.jsdelivr.net/npm/mermaid@8.3.1/dist/mermaid.min.js"></script>
+  <!-- <script src="//localhost:9000/mermaid.js"></script> -->
   <style>
   .markdown-section {
     max-width: 1200px;

src/diagrams/class/classDb.js

@@ -74,7 +74,7 @@ export const addMember = function(className, member) {
       theClass.annotations.push(memberString.substring(2, memberString.length - 2));
     } else if (memberString.endsWith(')')) {
       theClass.methods.push(memberString);
-    } else {
+    } else if (memberString) {
       theClass.members.push(memberString);
     }
   }

src/diagrams/class/classRenderer.js

@@ -323,6 +323,8 @@ const drawClass = function(elem, classDef) {
     isFirst = false;
   });
 
+  console.warn('classDef.id', classDef.id);
+  console.warn('isFirst', isFirst);
   // add class title
   const classTitle = title
     .append('tspan')
@@ -346,6 +348,7 @@ const drawClass = function(elem, classDef) {
     .attr('y', titleHeight + conf.dividerMargin + conf.textHeight)
     .attr('fill', 'white')
     .attr('class', 'classText');
+  console.warn(classDef.id, titleHeight, conf.dividerMargin, conf.textHeight);
 
   isFirst = true;
   classDef.members.forEach(function(member) {
@@ -483,8 +486,8 @@ export const draw = function(text, id) {
   });
 
   diagram.attr('height', '100%');
-  diagram.attr('width', '100%');
-  diagram.attr('viewBox', '0 0 ' + (g.graph().width + 20) + ' ' + (g.graph().height + 20));
+  diagram.attr('width', `${g.graph().width * 1.5 + 20}`);
+  diagram.attr('viewBox', '-10 -10 ' + (g.graph().width + 20) + ' ' + (g.graph().height + 20));
 };
 
 export default {

src/diagrams/state/stateRenderer.js

@@ -92,12 +92,15 @@ export const draw = function(text, id) {
 
   const bounds = diagram.node().getBBox();
 
-  // diagram.attr('height', '100%');
+  diagram.attr('height', '100%');
   // diagram.attr('width', 'fit-content');
-  diagram.attr('style', 'width: fit-content;');
+  diagram.attr('style', `max-width: ${bounds.width * 1.5 + conf.padding * 2};`);
   diagram.attr(
     'viewBox',
-    '0 0 ' + (bounds.width + conf.padding * 2) + ' ' + (bounds.height + conf.padding * 2)
+    `${conf.padding * -1} ${conf.padding * -1} ` +
+      (bounds.width * 1.5 + conf.padding * 2) +
+      ' ' +
+      (bounds.height * 1.5 + conf.padding * 2)
   );
 };
 const getLabelWidth = text => {