Test a complex sequence diagram

dist/index.html

@@ -22,10 +22,13 @@ click B testClick "click test"
 
   <div class="mermaid">
 sequenceDiagram
-loop every day
+Alice ->> Bob: Hello Bob, how are you?
-    Alice->>John: Hello John, how are you?
+Bob-->>John: How about you John?
-    John-->>Alice: Great!
+Bob--x Alice: I am good thanks!
-end
+Bob-x John: I am good thanks!
+Note right of John: Bob thinks a long<br/>long time, so long<br/>that the text does<br/>not fit on a row.
+Bob-->Alice: Checking with John...
+Alice->John: Yes... John, how are you?
   </div>
 
   <hr/>

src/diagrams/sequenceDiagram/sequenceRenderer.js

@@ -180,7 +180,7 @@ const drawNote = function (elem, startx, verticalPos, msg, forceWidth) {
 
   let textElem = svgDraw.drawText(g, textObj, rect.width - conf.noteMargin)
 
-  let textHeight = textElem[0][0].getBBox().height
+  let textHeight = (textElem._groups || textElem)[0][0].getBBox().height
   if (!forceWidth && textHeight > conf.width) {
     textElem.remove()
     g = elem.append('g')

todo.md

@@ -3,7 +3,5 @@
 - Create a desktop client
 - Flowchart `interpolate` is useless because there is no rendering code using it
 - Each type of diagram should have its own set of CSS.
-- Support customization of gantt diagram xAxis format
+- Support customization of gantt diagram xAxis format using diagram code
-    - https://github.com/d3/d3-time-format#api-reference
-    - https://bl.ocks.org/wboykinm/34627426d84f3242e0e6ecb2339e9065
     - Some one created a great PR: https://github.com/knsv/mermaid/pull/624