marcel/mermaid
1
0
Fork 0
mirror of https://github.com/mermaid-js/mermaid.git synced 2025-09-19 15:30:03 +02:00
Code Issues Packages Projects Releases Wiki Activity

#847 fix for case texts with multiple br tags, explanation in usage doc on how to avoid labels out of bounds.

Browse Source
This commit is contained in:
knsv
2019-07-16 16:05:22 -07:00
parent 976d16b0db
commit 8e27318eda
3 changed files with 16 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
dist/index.html vendored
View File

@@ -5,6 +5,12 @@
<meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Mermaid Quick Test Page</title> <title>Mermaid Quick Test Page</title>
<link rel="icon" type="image/png" href="data:image/png;base64,iVBORw0KGgo="> <link rel="icon" type="image/png" href="data:image/png;base64,iVBORw0KGgo=">
<style>
div.mermaid {
/* font-family: 'trebuchet ms', verdana, arial; */
font-family: 'Courier New', Courier, monospace !important;
}
</style>
</head> </head>
<body> <body>
<div class="mermaid"> <div class="mermaid">
@@ -127,7 +133,7 @@
<div class="mermaid"> <div class="mermaid">
graph TD graph TD
A[Christmas] -->|Get money| B(Go shopping) A[Christmas] -->|Get money| B(Go shopping)
B --> C{Let me thinksssss<br/>ssssssssssssssssssssss<br/>sssssssssssssssssssssssssss} B --> C{Let me thinksssssx<br/>sssssssssssssssssssuuu<br />tttsssssssssssssssssssssss}
C -->|One| D[Laptop] C -->|One| D[Laptop]
C -->|Two| E[iPhone] C -->|Two| E[iPhone]
C -->|Three| F[Car] C -->|Three| F[Car]

10
docs/usage.md
View File

@@ -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 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.
in mermaid uses the window.load event to start rendering.
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` ### Calling `mermaid.init`

2
src/diagrams/flowchart/flowDb.js
View File

@@ -20,7 +20,7 @@ const sanitize = text => {
let txt = text let txt = text
if (config.securityLevel === 'strict') { if (config.securityLevel === 'strict') {
txt = txt.replace(/<br>/g, '#br#') txt = txt.replace(/<br>/g, '#br#')
txt = txt.replace(/<br\S*\/>/g, '#br#') txt = txt.replace(/<br\S*?\/>/g, '#br#')
txt = txt.replace(/</g, '&lt;').replace(/>/g, '&gt;') txt = txt.replace(/</g, '&lt;').replace(/>/g, '&gt;')
txt = txt.replace(/#br#/g, '<br/>') txt = txt.replace(/#br#/g, '<br/>')
} }