stage

Author: Mpdreamz

docs/_docset.yml

@@ -80,6 +80,7 @@ toc:
       - file: conditionals.md
       - file: dropdowns.md
       - file: definition-lists.md
+      - file: diagrams.md
       - file: example_blocks.md
       - file: file_inclusion.md
       - file: frontmatter.md

docs/syntax/diagrams.md

@@ -0,0 +1,59 @@
+# Diagrams
+
+You can embedd diagrams using [mermaid.js](https://mermaid.js.org)
+
+## Flowcharts
+
+:::::{tab-set}
+
+::::{tab-item} Output
+
+:::{mermaid} 
+flowchart LR
+A[Jupyter Notebook] --> C
+B[MyST Markdown] --> C
+C(mystmd) --> D{AST}
+D <--> E[LaTeX]
+E --> F[PDF]
+D --> G[Word]
+D --> H[React]
+D --> I[HTML]
+D <--> J[JATS]
+:::
+
+::::
+
+::::{tab-item} Markdown
+```markdown
+:::{mermaid} 
+flowchart LR
+A[Jupyter Notebook] --> C
+B[MyST Markdown] --> C
+C(mystmd) --> D{AST}
+D <--> E[LaTeX]
+E --> F[PDF]
+D --> G[Word]
+D --> H[React]
+D --> I[HTML]
+D <--> J[JATS]
+:::
+```
+::::
+
+:::::
+
+
+
+```mermaid
+flowchart LR
+A[Jupyter Notebook] --> C
+B[MyST Markdown] --> C
+C(mystmd) --> D{AST}
+D <--> E[LaTeX]
+E --> F[PDF]
+D --> G[Word]
+D --> H[React]
+D --> I[HTML]
+D <--> J[JATS]
+```
+

src/Elastic.Markdown/Myst/CodeBlocks/EnhancedCodeBlockHtmlRenderer.cs

@@ -48,7 +48,7 @@ private static void RenderCodeBlockLines(HtmlRenderer renderer, EnhancedCodeBloc
 			if (indent >= commonIndent)
 				slice.Start += commonIndent;
 
-			if (!hasCode)
+			if (!hasCode && block.Language != "mermaid")
 			{
 				_ = renderer.Write($"<code class=\"language-{block.Language}\">");
 				hasCode = true;

src/Elastic.Markdown/Myst/CodeBlocks/SupportedLanguages.cs

@@ -27,6 +27,7 @@ public static class CodeBlock
 		{ "javascript", "js, jsx" }, // JavaScript
 		{ "json", "jsonc" }, // JSON
 		{ "kotlin", "kt" }, // Kotlin
+		{ "mermaid", ""},
 		{ "markdown", "md, mkdown, mkd" }, // Markdown
 		{ "nginx", "nginxconf" }, // Nginx
 		{ "php", "" }, // PHP

src/Elastic.Markdown/Myst/Directives/DirectiveBlockParser.cs

@@ -46,7 +46,6 @@ public DirectiveBlockParser()
 		{ "grid", 26 },
 		{ "grid-item-card", 26 },
 		{ "card", 25 },
-		{ "mermaid", 20 },
 		{ "aside", 4 },
 		{ "margin", 4 },
 		{ "sidebar", 4 },

src/Elastic.Markdown/Slices/Directives/Code.cshtml

@@ -1,13 +1,21 @@
 @inherits RazorSlice<CodeViewModel>
-<div class="[email protected] notranslate">
-	<div class="highlight">
-		@if (!string.IsNullOrEmpty(Model.Caption))
-		{
-			<div class="code-block-caption">
-				<span class="caption-text">@Model.Caption</span>
-				<a class="headerlink" href="@Model.CrossReferenceName" title="Link to this code">¶</a>
-			</div>
-		}
-		<pre>@if (!string.IsNullOrEmpty(Model.ApiCallHeader)) { <code class="language-apiheader">@Model.ApiCallHeader</code> }[CONTENT]</pre>
+@if (Model.Language == "mermaid")
+{
+	<pre class="mermaid">
+		[CONTENT]
+	</pre>
+}
+else {
+	<div class="[email protected] notranslate">
+		<div class="highlight">
+			@if (!string.IsNullOrEmpty(Model.Caption))
+			{
+				<div class="code-block-caption">
+					<span class="caption-text">@Model.Caption</span>
+					<a class="headerlink" href="@Model.CrossReferenceName" title="Link to this code">¶</a>
+				</div>
+			}
+			<pre>@if (!string.IsNullOrEmpty(Model.ApiCallHeader)) { <code class="language-apiheader">@Model.ApiCallHeader</code> }[CONTENT]</pre>
+		</div>
 	</div>
-</div>
+}

src/Elastic.Markdown/Slices/Directives/Mermaid.cshtml

@@ -1,4 +1,4 @@
 @inherits RazorSlice<MermaidViewModel>
-<div class="mermaid">
+<pre class="mermaid">
 	[CONTENT]
-</div>
+</pre>

src/Elastic.Markdown/Slices/Layout/_Footer.cshtml

@@ -34,3 +34,5 @@
 </footer>
 
 <script src="@Model.Static("main.js")"></script>
+<script src="https://unpkg.com/[email protected]/dist/mermaid.min.js"></script>
+<script>mermaid.initialize({startOnLoad:true});</script>

src/Elastic.Markdown/Slices/Layout/_Scripts.cshtml

@@ -80,5 +80,6 @@
 		</div>
 	</aside>
 }
+<script>mermaid.initialize({startOnLoad:true});</script>
 </body>
 </html>