@@ -127,7 +133,7 @@
graph TD
A[Christmas] -->|Get money| B(Go shopping)
- B --> C{Let me thinksssss
ssssssssssssssssssssss
sssssssssssssssssssssssssss}
+ B --> C{Let me thinksssssx
sssssssssssssssssssuuu
tttsssssssssssssssssssssss}
C -->|One| D[Laptop]
C -->|Two| E[iPhone]
C -->|Three| F[Car]
diff --git a/docs/usage.md b/docs/usage.md
index 544b2f89c..e48a2c222 100644
--- a/docs/usage.md
+++ b/docs/usage.md
@@ -96,8 +96,14 @@ $(document).ready(function() {
});
```
-Not doing so will most likely result in mermaid rendering graphs that have labels out of bounds. The default integration
-in mermaid uses the window.load event to start rendering.
+Not doing so will most likely result in mermaid rendering graphs that have labels out of bounds. The default integration in mermaid uses the window.load event to start rendering. Also note that when rendering the width of lebale sare calucated of what width it bening meassured at the time.
+
+If your page has other fonts in its body those might be used instead of the mermaid font. Specifying the font in your styling is a workaround for this.
+```
+ div.mermaid {
+ font-family: 'trebuchet ms', verdana, arial;
+ }
+```
### Calling `mermaid.init`
diff --git a/src/diagrams/flowchart/flowDb.js b/src/diagrams/flowchart/flowDb.js
index b777902c0..91dff3898 100644
--- a/src/diagrams/flowchart/flowDb.js
+++ b/src/diagrams/flowchart/flowDb.js
@@ -20,7 +20,7 @@ const sanitize = text => {
let txt = text
if (config.securityLevel === 'strict') {
txt = txt.replace(/
/g, '#br#')
- txt = txt.replace(//g, '#br#')
+ txt = txt.replace(//g, '#br#')
txt = txt.replace(//g, '>')
txt = txt.replace(/#br#/g, '
')
}