Merge branch 'master' into develop

README.md

@@ -1,5 +1,11 @@
 # mermaid [![Build Status](https://travis-ci.org/mermaid-js/mermaid.svg?branch=master)](https://travis-ci.org/mermaid-js/mermaid) [![NPM](https://img.shields.io/npm/v/mermaid)](https://www.npmjs.com/package/mermaid) [![Coverage Status](https://coveralls.io/repos/github/mermaid-js/mermaid/badge.svg?branch=master)](https://coveralls.io/github/mermaid-js/mermaid?branch=master) [![Join our Slack!](https://img.shields.io/static/v1?message=join%20chat&color=9cf&logo=slack&label=slack)](https://join.slack.com/t/mermaid-talk/shared_invite/enQtNzc4NDIyNzk4OTAyLWVhYjQxOTI2OTg4YmE1ZmJkY2Y4MTU3ODliYmIwOTY3NDJlYjA0YjIyZTdkMDMyZTUwOGI0NjEzYmEwODcwOTE) [![This project is using Percy.io for visual regression testing.](https://percy.io/static/images/percy-badge.svg)](https://percy.io/Mermaid/mermaid)
 
+<p align="center">
+    <a href="https://www.buymeacoffee.com/knsv" rel="nofollow">
+        <img src="https://user-images.githubusercontent.com/30767528/63641973-9d301680-c6b7-11e9-9d29-2ad1da50fdce.png" style="max-width:100%;" />
+    </a>
+</p>
+
 ![banner](./img/header.png)
 
 :trophy: **Mermaid was nominated and won the [JS Open Source Awards (2019)](https://osawards.com/javascript/2019) in the category "The most exciting use of technology"!!!**

cypress/integration/rendering/flowchart-v2.spec.js

@@ -404,5 +404,20 @@ flowchart TD
       `,
       {htmlLabels: true, flowchart: {htmlLabels: true}, securityLevel: 'loose'}
     );
+  it('63: title on subgraphs should be themable', () => {
+    imgSnapshotTest(
+      `
+      %%{init:{"theme":"base", "themeVariables": {"primaryColor":"#411d4e", "titleColor":"white", "darkMode":true}}}%%
+      flowchart LR
+      subgraph A
+          a --> b
+      end
+      subgraph B
+          i -->f
+      end
+      A --> B
+      `,
+      {htmlLabels: true, flowchart: {htmlLabels: true}, securityLevel: 'loose'}
+    );
   });
 });

docs/index.html

@@ -7,7 +7,7 @@
   <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"> -->
-  <link rel="stylesheet" href="theme.css">  <script src="//cdn.jsdelivr.net/npm/mermaid@8.8.4/dist/mermaid.min.js"></script>
+  <link rel="stylesheet" href="theme.css">  <script src="//cdn.jsdelivr.net/npm/mermaid@8.9.0/dist/mermaid.min.js"></script>
   <!-- <script src="http://localhost:9000/mermaid.js"></script> -->
   <script>
     (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){

docs/sequenceDiagram.md

@@ -9,6 +9,7 @@ Mermaid can render sequence diagrams.
 sequenceDiagram
     Alice->>John: Hello John, how are you?
     John-->>Alice: Great!
+    Alice-)John: See you later!
 ```
 
 ```mermaid

package.json

@@ -1,6 +1,6 @@
 {
   "name": "mermaid",
-  "version": "8.8.4",
+  "version": "8.9.0",
   "description": "Markdownish syntax for generating flowcharts, sequence diagrams, class diagrams, gantt charts and git graphs.",
   "main": "dist/mermaid.core.js",
   "keywords": [

src/diagrams/flowchart/styles.js

@@ -55,8 +55,9 @@ const getStyles = options =>
     stroke-width: 1px;
   }
 
-  .cluster text {
+  .cluster text,span {
     fill: ${options.titleColor};
+    color: ${options.titleColor};
   }
 
   div.mermaidTooltip {