Merge pull request #1543 from mermaid-js/bug/1485_application_of_font…

…_settings #1485 Setting proper font settings in the root css
mermaid-js · Jul 15, 2020 · 389afde · 389afde
2 parents dc2f9c3 + fe5d9e4
commit 389afde
Show file tree

Hide file tree

Showing 13 changed files with 326 additions and 107 deletions.
diff --git a/cypress/integration/other/webpackUsage.spec.js b/cypress/integration/other/webpackUsage.spec.js
@@ -6,6 +6,6 @@ describe('Sequencediagram', () => {
     cy.visit(url);
     cy.get('body')
       .find('svg')
-      .should('have.length', 2);
+      .should('have.length', 1);
   });
 });
diff --git a/cypress/platform/bundle-test.js b/cypress/platform/bundle-test.js
@@ -1,10 +1,36 @@
-import mermaid from '../../dist/mermaid.core'
+import mermaid from '../../dist/mermaid.core';
+
+const code = `graph LR
+Power_Supply --> Transmitter_A
+Power_Supply --> Transmitter_B
+Transmitter_A --> D
+Transmitter_B --> D`;
 
 mermaid.initialize({
   theme: 'forest',
-  gantt: { axisFormatter: [
-    ['%Y-%m-%d', (d) => {
-      return d.getDay() === 1
-    }]
-  ] }
-})
+  fontFamily: '"Lucida Console", Monaco, monospace',
+  startOnLoad: false,
+  flowchart: {
+    htmlLabels: true
+  },
+  gantt: {
+    axisFormatter: [
+      [
+        '%Y-%m-%d',
+        d => {
+          return d.getDay() === 1;
+        }
+      ]
+    ]
+  }
+});
+mermaid.render(
+  'the-id-of-the-svg',
+  code,
+  svg => {
+    console.log(svg);
+    const elem = document.querySelector('#graph-to-be');
+    elem.innerHTML = svg;
+  }
+  // ,document.querySelector('#tmp')
+);
diff --git a/cypress/platform/webpackUsage.html b/cypress/platform/webpackUsage.html
@@ -1,22 +1,17 @@
 <!doctype html>
 <html>
-
+<head>
+  <style>
+  /* .mermaid {
+    font-family: "trebuchet ms", verdana, arial;;
+  } */
+  /* .mermaid {
+    font-family: 'arial';
+  } */
+  </style>
+</head>
 <body>
-  <div class="mermaid">
-graph LR
-A-->B
-  </div>
-  <div class="mermaid">
-gantt
-title A Gantt Diagram
-dateFormat  YYYY-MM-DD
-section Section
-A task           :a1, 2014-01-01, 30d
-Another task     :after a1  , 20d
-section Another
-Task in sec      :2014-01-12  , 12d
-another task      : 24d
-  </div>
+  <div id="graph-to-be"></div>
   <script src="./bundle-test.js" charset="utf-8"></script>
 </body>
 

diff --git a/dist/mermaid.core.js b/dist/mermaid.core.js
diff --git a/dist/mermaid.core.js.map b/dist/mermaid.core.js.map
diff --git a/dist/mermaid.js b/dist/mermaid.js
diff --git a/dist/mermaid.js.map b/dist/mermaid.js.map
diff --git a/dist/mermaid.min.js b/dist/mermaid.min.js
diff --git a/dist/mermaid.min.js.map b/dist/mermaid.min.js.map
diff --git a/docs/Setup.md b/docs/Setup.md
@@ -83,14 +83,15 @@ theme , the CSS style sheet
 
 ## securityLevel
 
-| Parameter     | Description                       | Type   | Required | Values        |
-| ------------- | --------------------------------- | ------ | -------- | ------------- |
-| securitylevel | Level of trust for parsed diagram | String | Required | Strict, Loose |
+| Parameter     | Description                       | Type   | Required | Values                    |
+| ------------- | --------------------------------- | ------ | -------- | ------------------------- |
+| securitylevel | Level of trust for parsed diagram | String | Required | Strict, Loose, antiscript |
 
 \*\*Notes:
 
 -   **strict**: (**default**) tags in text are encoded, click functionality is disabeled
 -   **loose**: tags in text are allowed, click functionality is enabled
+-   **antiscript**: html tags in text are allowed, (only script element is removed), click functionality is enabled
 
 ## startOnLoad
 

diff --git a/src/mermaidAPI.js b/src/mermaidAPI.js
@@ -271,7 +271,7 @@ const render = function(id, _txt, cb, container) {
   }
 
   // classDef
-  if (graphType === 'flowchart' || graphType === 'flowchart-v2') {
+  if (graphType === 'flowchart' || graphType === 'flowchart-v2' || graphType === 'graph') {
     const classes = flowRenderer.getClasses(txt);
     for (const className in classes) {
       style += `\n.${className} > * { ${classes[className].styles.join(
@@ -289,13 +289,17 @@ const render = function(id, _txt, cb, container) {
   style1.innerHTML = scope(style, `#${id}`);
   svg.insertBefore(style1, firstChild);
 
-  const style2 = document.createElement('style');
-  const cs = window.getComputedStyle(svg);
-  style2.innerHTML = `#${id} {
-    color: ${cs.color};
-    font: ${cs.font};
-  }`;
-  svg.insertBefore(style2, firstChild);
+  // Verify that the generated svgs are ok before removing this
+
+  // const style2 = document.createElement('style');
+  // const cs = window.getComputedStyle(svg);
+  // style2.innerHTML = `#d${id} * {
+  //   color: ${cs.color};
+  //   // font: ${cs.font};
+  //   // font-family: Arial;
+  //   // font-size: 24px;
+  // }`;
+  // svg.insertBefore(style2, firstChild);
 
   try {
     switch (graphType) {

diff --git a/src/themes/mermaid.scss b/src/themes/mermaid.scss
@@ -13,8 +13,9 @@
 
 :root {
   --mermaid-font-family: '"trebuchet ms", verdana, arial';
-  --mermaid-font-family: "Comic Sans MS", "Comic Sans", cursive;
-  // --mermaid-alt-font-family: '"Lucida Console", Monaco, monospace';
+  font-family: '"trebuchet ms", verdana, arial';
+  font-family: var(--mermaid-font-family);
+  font-size: 16px;
 }
 
 /* Classes common for multiple diagrams */
@@ -52,3 +53,8 @@
 .marker.cross {
   stroke: $lineColor;
 }
+
+svg {
+  font-family: var(--mermaid-font-family);
+  font-size: 24px;
+}
diff --git a/src/themes/pie.scss b/src/themes/pie.scss
@@ -9,3 +9,8 @@
   font-family: 'trebuchet ms', verdana, arial;
   font-family: var(--mermaid-font-family);
 }
+.legend text {
+  font-family: 'trebuchet ms', verdana, arial;
+  font-family: var(--mermaid-font-family);
+  font-size: 17px;
+}