All: Resolves #163: Added Mermaid support to desktop and mobile

.gitignore

@@ -39,6 +39,7 @@ node_modules
 Tools/github_oauth_token.txt
 _releases
 ReactNativeClient/lib/csstojs/
+ReactNativeClient/lib/rnInjectedJs/
 ElectronClient/app/gui/note-viewer/fonts/
 ElectronClient/app/gui/note-viewer/lib.js
 Tools/commit_hook.txt

README.md

@@ -251,6 +251,24 @@ You can create a link to a note by specifying its ID in the URL. For example:
 
 Since getting the ID of a note is not straightforward, each app provides a way to create such link. In the **desktop app**, right click on a note an select "Copy Markdown link". In the **mobile app**, open a note and, in the top right menu, select "Copy Markdown link". You can then paste this link anywhere in another note.
 
+## Charts
+
+You can create charts in Joplin using the [Mermaid syntax](https://mermaidjs.github.io/). To add such a graph, wrap the Mermaid script inside a "\`\`\`mermaid" code block like this:
+
+	```mermaid
+	graph TD;
+	    A-->B;
+	    A-->C;
+	    B-->D;
+	    C-->D;
+	```
+
+This is how it would look with the Markdown on the left, and rendered graph on the right:
+
+![Mermaid support in Joplin](https://joplin.cozic.net/images/Mermaid.png)
+
+Note that Mermaid graphs are always rendered on a white background regardless of the current theme. This is because they can contain various colours that may not be compatible with the current theme.
+
 ## Math notation
 
 Math expressions can be added using the [KaTeX notation](https://khan.github.io/KaTeX/). To add an inline equation, wrap the expression in `$EXPRESSION$`, eg. `$\sqrt{3x-1}+(1+x)^2$`. To create an expression block, wrap it as follow:

ReactNativeClient/lib/MdToHtml_Mermaid.js

@@ -1,5 +1,4 @@
 const { shim } = require('lib/shim');
-const mermaid = require('mermaid');
 const injectedJs = require('lib/rnInjectedJs/mermaid');
 
 class MdToHtml_Mermaid {
@@ -14,7 +13,10 @@ class MdToHtml_Mermaid {
 	}
 
 	extraCss() {
-		return '';
+		// Force a white background because the graphs can have various colours
+		// that may not be compatible with the current theme. Also make it
+		// inline-block so that the div is the same size as the content.
+		return '.mermaid { background-color: white; display:inline-block; }';
 	}
 
 	injectedJavaScript() {