Notes/packages/ckeditor5-mermaid/tests/manual/markdown.html

<style type="text/css">
	#editor, .ck-editor {
		/* Adjust width to the typical width in GH. */
		width: 820px !important;
	}

	pre.markdown-output {
		background: hsl(70, 7%, 16%);
		color: hsl(0, 0%, 100%);
		display: block;
		font-size: 1em;
		font-family: Monaco, Menlo, Consolas, "Roboto Mono", "Courier New", "Ubuntu Mono", monospace;
		padding: 1.333em;
	}

	.editor-container {
		display:flex;
	}

	.output-container {
		padding-left: 20px;
	}
</style>

<div class="editor-container">
	<textarea id="editor">
Mermaid snippet:

```mermaid
flowchart TB
A --> C
A --> D
B --> C
B --> D
```

More complex case:

```mermaid
sequenceDiagram
participant Alice
participant Bob
Alice->>John: Hello John, 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!
```

Javascript snippet:

```Javascript
var foo = 'bar';

alert( foo );
```
		</textarea>

		<div class="output-container">
			<p>Output:</p>

			<pre class="markdown-output"><code id="markdown-output"></code></pre>
		</div>
</div>