Mermaid_diagram_drawing.ipynb

{
 "cells": [
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "Start from .NET Interactive [version 1.0.336204](https://github.com/dotnet/interactive/releases/tag/v1.0.336204), Native support [mermaid syntax](https://mermaid-js.github.io/mermaid/#/n00b-syntaxReference) diagram drawing:"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {
    "dotnet_interactive": {
     "language": "mermaid"
    },
    "vscode": {
     "languageId": "dotnet-interactive.mermaid"
    }
   },
   "outputs": [
    {
     "data": {
      "text/html": [
       "<div class=\"mermaidMarkdownContainer\" style=\"background-color:white\">\r\n",
       "<script type=\"text/javascript\">\r\n",
       "\r\n",
       "loadMermaid_7c8bed1f683b43d4834ff93dfebf808b = () => {\r\n",
       " \r\n",
       "        (require.config({ 'paths': { 'context': '9.1.3', 'mermaidUri' : 'https://cdn.jsdelivr.net/npm/mermaid@9.1.3/dist/mermaid.min', 'urlArgs': 'cacheBuster=ba0b19d5f0ec47669fe1c1b3b2985ce5' }}) || require)(['mermaidUri'], (mermaid) => {\r\n",
       "\r\n",
       "            let renderTarget = document.getElementById('7c8bed1f683b43d4834ff93dfebf808b');\r\n",
       "            mermaid.mermaidAPI.render( \r\n",
       "                'mermaid_7c8bed1f683b43d4834ff93dfebf808b', \r\n",
       "                `graph TB\n",
       "    sq[Square shape] --> ci((Circle shape))\n",
       "\n",
       "    subgraph A\n",
       "        od>Odd shape]-- Two line<br/>edge comment --> ro\n",
       "        di{Diamond with <br/> line break} -.-> ro(Rounded<br>square<br>shape)\n",
       "        di==>ro2(Rounded square shape)\n",
       "    end\n",
       "\n",
       "    %% Notice that no text in shape are added here instead that is appended further down\n",
       "    e --> od3>Really long text with linebreak<br>in an Odd shape]\n",
       "\n",
       "    %% Comments after double percent signs\n",
       "    e((Inner / circle<br>and some odd <br>special characters)) --> f(,.?!+-*ز)\n",
       "\n",
       "    cyr[Cyrillic]-->cyr2((Circle shape Начало));\n",
       "\n",
       "     classDef green fill:#9f6,stroke:#333,stroke-width:2px;\n",
       "     classDef orange fill:#f96,stroke:#333,stroke-width:4px;\n",
       "     class sq,e green\n",
       "     class di orange`, \r\n",
       "                g => {\r\n",
       "                    renderTarget.innerHTML = g \r\n",
       "                });\r\n",
       "        },\r\n",
       "        (error) => {\r\n",
       "            console.log(error);\r\n",
       "        });\r\n",
       "}\r\n",
       "// ensure `require` is available globally\r\n",
       "if ((typeof(require) !==  typeof(Function)) || (typeof(require.config) !== typeof(Function))) {\r\n",
       "    let require_script = document.createElement('script');\r\n",
       "    require_script.setAttribute('src', 'https://cdnjs.cloudflare.com/ajax/libs/require.js/2.3.6/require.min.js');\r\n",
       "    require_script.setAttribute('type', 'text/javascript');\r\n",
       "    \r\n",
       "    \r\n",
       "    require_script.onload = function() {\r\n",
       "        loadMermaid_7c8bed1f683b43d4834ff93dfebf808b();\r\n",
       "    };\r\n",
       "\r\n",
       "    document.getElementsByTagName('head')[0].appendChild(require_script);\r\n",
       "}\r\n",
       "else {\r\n",
       "    loadMermaid_7c8bed1f683b43d4834ff93dfebf808b();\r\n",
       "}\r\n",
       "\r\n",
       "</script>\r\n",
       "<div id=\"7c8bed1f683b43d4834ff93dfebf808b\"></div>\r\n",
       "</div>\r\n"
      ]
     },
     "metadata": {},
     "output_type": "display_data"
    }
   ],
   "source": [
    "#!mermaid\n",
    "graph TB\n",
    "    sq[Square shape] --> ci((Circle shape))\n",
    "\n",
    "    subgraph A\n",
    "        od>Odd shape]-- Two line<br/>edge comment --> ro\n",
    "        di{Diamond with <br/> line break} -.-> ro(Rounded<br>square<br>shape)\n",
    "        di==>ro2(Rounded square shape)\n",
    "    end\n",
    "\n",
    "    %% Notice that no text in shape are added here instead that is appended further down\n",
    "    e --> od3>Really long text with linebreak<br>in an Odd shape]\n",
    "\n",
    "    %% Comments after double percent signs\n",
    "    e((Inner / circle<br>and some odd <br>special characters)) --> f(,.?!+-*ز)\n",
    "\n",
    "    cyr[Cyrillic]-->cyr2((Circle shape Начало));\n",
    "\n",
    "     classDef green fill:#9f6,stroke:#333,stroke-width:2px;\n",
    "     classDef orange fill:#f96,stroke:#333,stroke-width:4px;\n",
    "     class sq,e green\n",
    "     class di orange"
   ]
  }
 ],
 "metadata": {
  "kernelspec": {
   "display_name": ".NET (C#)",
   "language": "C#",
   "name": ".net-csharp"
  },
  "language_info": {
   "file_extension": ".cs",
   "mimetype": "text/x-csharp",
   "name": "C#",
   "pygments_lexer": "csharp",
   "version": "9.0"
  },
  "orig_nbformat": 4,
  "vscode": {
   "interpreter": {
    "hash": "0edfa3381e80464b2356a8a80f0e2aebc96213d5b0153b79499ddfb6ef1c9320"
   }
  }
 },
 "nbformat": 4,
 "nbformat_minor": 2
}