tag:support.markedapp.com,2011-09-11:/discussions/questions/8184-mermaid-diagrams-in-documentsMarked: Discussion 2018-09-27T13:32:48Ztag:support.markedapp.com,2011-09-11:Comment/357799792015-01-14T16:43:00Z2015-01-14T16:43:48ZMermaid Diagrams in Documents<div><p>The two issues you'll run into are typographic processing taking
over within the diagram and converting things like
<code>--></code> to <code>—></code>, and the #firstdiff
element that is used to mark the latest change, which will show up
inside the diagram div when you're editing within it.</p>
<p>The first issue can be solved by turning off "Generate
typographically correct..." in the Style preferences, or by just
using the Discount (GFM) processor, which shouldn't run
SmartyPants. If you're using a custom processor, you may have some
luck adding "markdown=0" to the attributes on the .mermaid div,
which in many cases prevents any Markdown processing within that
particular block element.</p>
<p>The second issue is more complicated because Marked generates
the diff element even if you've disabled scroll to edit. In order
to have the diagram render properly while editing within it, you
need to remove the diff marker manually. The following code is
working for me:</p>
<pre>
<code><div class="mermaid">
graph TD;
A-->B;
A-->C;
B-->D;
C-->D;
</div>
<script>
var diff = document.getElementById('firstdiff'); diff.parentNode.removeChild(diff);
</script>
<script src="mermaid.full.min.js"></script></code>
</pre>
<p>(Using Discount processor)</p></div>Bretttag:support.markedapp.com,2011-09-11:Comment/357799792015-01-14T16:49:06Z2015-01-14T16:49:06ZMermaid Diagrams in Documents<div><p>Bingo. Add this to the "Beers I Owe You" tab.</p></div>Nick Wynjatag:support.markedapp.com,2011-09-11:Comment/357799792015-01-14T19:35:02Z2015-01-14T19:35:02ZMermaid Diagrams in Documents<div><p>Also useful here: I've used the
<code><<{folder/raw_file.html}</code> <a href=
"http://marked2app.com/help/Special_Syntax.html#includingunprocessedtextorhtml">
unprocessed text or html include</a> braces to include a file with
my Marmaid markup and am able to keep smart typography on.</p></div>Nick Wynjatag:support.markedapp.com,2011-09-11:Comment/357799792015-01-14T21:54:57Z2015-01-14T21:54:57ZMermaid Diagrams in Documents<div><p>Good god I forgot I had that option. That was actually the main
reason I<br>
initially added the raw include... doh.</p></div>Bretttag:support.markedapp.com,2011-09-11:Comment/357799792018-09-27T13:32:47Z2018-09-27T13:32:47ZMermaid Diagrams in Documents<div><p>I got it to work by turning off Smart Typography in Preferences->Style->Generate typographically correct quotes and punctuation. You can also do it by using a fenced code block (see below) instead of a paragraph, but only if you turn off Syntax Highlighting in Style preferences.</p>
<pre>
<code>```mermaid
sequenceDiagram
participant Alice
participant Bob
Alice->John: Hello Johns, how are you?
loop Healthcheck
John->John: Fight against hypochondria
end
Note right of John: Rational thoughts <br/>prevail...
John-->Alice: Great!
John->Bob: How about you?
Bob-->John: Jolly good!
```</code>
</pre>
<p>I may work on a better solution for this, but that's what I've got right now.</p></div>Brett