https://hanyouqing.com/categories/documentation/ Recent content in Documentation on Youqing Han - DevOps Engineer Hugo en-us ihanyouqing#gmail.com (#->@) (Youqing Han) ihanyouqing#gmail.com (#->@) (Youqing Han) Fri, 22 Aug 2025 00:00:00 +0000 https://hanyouqing.com/blog/2025/08/mermaid-diagram-guide/ Fri, 22 Aug 2025 00:00:00 +0000ihanyouqing#gmail.com (#->@) (Youqing Han) https://hanyouqing.com/blog/2025/08/mermaid-diagram-guide/ <h2 id="introduction">Introduction</h2> <p>Mermaid is a powerful text-based diagram generation tool that allows you to create beautiful diagrams using simple text syntax. This guide demonstrates how to use Mermaid diagrams effectively in technical documentation, with practical examples for DevOps engineers and technical writers.</p> <h2 id="flowcharts">Flowcharts</h2> <p>Flowcharts are perfect for visualizing processes, decision trees, and system workflows.</p> <h3 id="basic-flowchart">Basic Flowchart</h3> <div class="mermaid-wrapper my-8"> <div class="mermaid-container bg-white border border-gray-200 rounded-lg shadow-sm overflow-hidden"> <div class="mermaid-header bg-gradient-to-r from-blue-50 to-indigo-50 px-4 py-3 border-b border-gray-200 flex items-center justify-between"> <div class="flex items-center space-x-2"> <svg class="w-5 h-5 text-blue-600" fill="none" stroke="currentColor" viewBox="0 0 24 24"> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z"></path> </svg> <span class="text-sm font-medium text-gray-700">Mermaid Diagram</span> </div> <div class="flex items-center space-x-2"> <button class="mermaid-copy-btn" data-code="CmdyYXBoIFRECkFbU3RhcnRdIC0tPiBCe0lzIFVzZXIgTG9nZ2VkIEluP30KQiAtLT58WWVzfCBDW1Nob3cgRGFzaGJvYXJkXQpCIC0tPnxOb3wgRFtTaG93IExvZ2luIEZvcm1dCkMgLS0&#43;IEVbVXNlciBBY3Rpb25zXQpEIC0tPiBGW1ZhbGlkYXRlIENyZWRlbnRpYWxzXQpGIC0tPiBHe1ZhbGlkP30KRyAtLT58WWVzfCBDCkcgLS0&#43;fE5vfCBIW1Nob3cgRXJyb3JdCkggLS0&#43;IEQKRSAtLT4gSVtFbmRd"> <svg fill="none" stroke="currentColor" viewBox="0 0 24 24"> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 16H6a2 2 0 01-2-2V6a2 2 0 012-2h8a2 2 0 012 2v2m-6 12h8a2 2 0 002-2v-8a2 2 0 00-2-2h-8a2 2 0 00-2 2v8a2 2 0 002 2z"></path> </svg> </button> <button class="mermaid-fullscreen-btn"> <svg fill="none" stroke="currentColor" viewBox="0 0 24 24"> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 8V4m0 0h4M4 4l5 5m11-1V4m0 0h-4m4 0l-5 5M4 16v4m0 0h4m-4 0l5-5m11 5l-5-5m5 5v-4m0 4h-4"></path> </svg> </button> </div> </div> <div class="mermaid-content p-6 bg-gray-50"> <div id="mermaid-0" class="mermaid-diagram text-center"> <div class="mermaid-loading flex items-center justify-center py-8"> <div class="animate-spin rounded-full h-8 w-8 border-b-2 border-blue-600"></div> <span class="ml-3 text-gray-600">Rendering diagram...</span> </div> </div> </div> </div> </div> <script type="application/json" class="mermaid-data" data-id="mermaid-0"> "\ngraph TD\nA[Start] --\u003e B{Is User Logged In?}\nB --\u003e|Yes| C[Show Dashboard]\nB --\u003e|No| D[Show Login Form]\nC --\u003e E[User Actions]\nD --\u003e F[Validate Credentials]\nF --\u003e G{Valid?}\nG --\u003e|Yes| C\nG --\u003e|No| H[Show Error]\nH --\u003e D\nE --\u003e I[End]" </script> <h3 id="complex-system-architecture">Complex System Architecture</h3> <div class="mermaid-wrapper my-8"> <div class="mermaid-container bg-white border border-gray-200 rounded-lg shadow-sm overflow-hidden"> <div class="mermaid-header bg-gradient-to-r from-blue-50 to-indigo-50 px-4 py-3 border-b border-gray-200 flex items-center justify-between"> <div class="flex items-center space-x-2"> <svg class="w-5 h-5 text-blue-600" fill="none" stroke="currentColor" viewBox="0 0 24 24"> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z"></path> </svg> <span class="text-sm font-medium text-gray-700">Mermaid Diagram</span> </div> <div class="flex items-center space-x-2"> <button class="mermaid-copy-btn" data-code="CmdyYXBoIFRCCnN1YmdyYXBoICJGcm9udGVuZCIKQVtSZWFjdCBBcHBdIC0tPiBCW0FQSSBHYXRld2F5XQplbmQKCiAgICBzdWJncmFwaCAiQmFja2VuZCBTZXJ2aWNlcyIKICAgICAgICBCIC0tPiBDW1VzZXIgU2VydmljZV0KICAgICAgICBCIC0tPiBEW09yZGVyIFNlcnZpY2VdCiAgICAgICAgQiAtLT4gRVtQYXltZW50IFNlcnZpY2VdCiAgICBlbmQKCiAgICBzdWJncmFwaCAiRGF0YSBMYXllciIKICAgICAgICBDIC0tPiBGWyhVc2VyIERhdGFiYXNlKV0KICAgICAgICBEIC0tPiBHWyhPcmRlciBEYXRhYmFzZSldCiAgICAgICAgRSAtLT4gSFsoUGF5bWVudCBEYXRhYmFzZSldCiAgICBlbmQKCiAgICBzdWJncmFwaCAiRXh0ZXJuYWwgU2VydmljZXMiCiAgICAgICAgRSAtLT4gSVtTdHJpcGUgQVBJXQogICAgICAgIEUgLS0&#43;IEpbUGF5UGFsIEFQSV0KICAgIGVuZAoKICAgIHN1YmdyYXBoICJNb25pdG9yaW5nIgogICAgICAgIEtbUHJvbWV0aGV1c10gLS0&#43;IExbR3JhZmFuYV0KICAgICAgICBNW0VMSyBTdGFja10gLS0&#43;IE5bS2liYW5hXQogICAgZW5k"> <svg fill="none" stroke="currentColor" viewBox="0 0 24 24"> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 16H6a2 2 0 01-2-2V6a2 2 0 012-2h8a2 2 0 012 2v2m-6 12h8a2 2 0 002-2v-8a2 2 0 00-2-2h-8a2 2 0 00-2 2v8a2 2 0 002 2z"></path> </svg> </button> <button class="mermaid-fullscreen-btn"> <svg fill="none" stroke="currentColor" viewBox="0 0 24 24"> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 8V4m0 0h4M4 4l5 5m11-1V4m0 0h-4m4 0l-5 5M4 16v4m0 0h4m-4 0l5-5m11 5l-5-5m5 5v-4m0 4h-4"></path> </svg> </button> </div> </div> <div class="mermaid-content p-6 bg-gray-50"> <div id="mermaid-1" class="mermaid-diagram text-center"> <div class="mermaid-loading flex items-center justify-center py-8"> <div class="animate-spin rounded-full h-8 w-8 border-b-2 border-blue-600"></div> <span class="ml-3 text-gray-600">Rendering diagram...</span> </div> </div> </div> </div> </div> <script type="application/json" class="mermaid-data" data-id="mermaid-1"> "\ngraph TB\nsubgraph \"Frontend\"\nA[React App] --\u003e B[API Gateway]\nend\n\n subgraph \"Backend Services\"\n B --\u003e C[User Service]\n B --\u003e D[Order Service]\n B --\u003e E[Payment Service]\n end\n\n subgraph \"Data Layer\"\n C --\u003e F[(User Database)]\n D --\u003e G[(Order Database)]\n E --\u003e H[(Payment Database)]\n end\n\n subgraph \"External Services\"\n E --\u003e I[Stripe API]\n E --\u003e J[PayPal API]\n end\n\n subgraph \"Monitoring\"\n K[Prometheus] --\u003e L[Grafana]\n M[ELK Stack] --\u003e N[Kibana]\n end" </script> <h2 id="sequence-diagrams">Sequence Diagrams</h2> <p>Sequence diagrams are excellent for showing interactions between different components or services over time.</p>