From 07bd34c565c29fd85346523a8ce55dee8d8a0827 Mon Sep 17 00:00:00 2001 From: StepanovPlaton Date: Tue, 3 Feb 2026 14:34:30 +0400 Subject: [PATCH] =?UTF-8?q?Delete=20Posts=20=E2=80=9Cmermaids=E2=80=9D?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/content/posts/mermaids.md | 198 ---------------------------------- 1 file changed, 198 deletions(-) delete mode 100644 src/content/posts/mermaids.md diff --git a/src/content/posts/mermaids.md b/src/content/posts/mermaids.md deleted file mode 100644 index 2e299f9..0000000 --- a/src/content/posts/mermaids.md +++ /dev/null @@ -1,198 +0,0 @@ ---- -title: Mermaid Example -published: 2011-11-02 -pinned: false -description: A simple example of a Markdown blog post with Mermaid. -tags: [Markdown, Mermaid] -category: Examples -draft: false ---- - - -# Complete Guide to Markdown with Mermaid Diagrams - -This article demonstrates how to create various complex diagrams using Mermaid in Markdown documents, including flowcharts, sequence diagrams, Gantt charts, class diagrams, and state diagrams. - - -## Flowchart Example - -Flowcharts are excellent for representing processes or algorithm steps. - -```mermaid -graph TD - A[Start] --> B{Condition Check} - B -->|Yes| C[Process Step 1] - B -->|No| D[Process Step 2] - C --> E[Subprocess] - D --> E - subgraph E [Subprocess Details] - E1[Substep 1] --> E2[Substep 2] - E2 --> E3[Substep 3] - end - E --> F{Another Decision} - F -->|Option 1| G[Result 1] - F -->|Option 2| H[Result 2] - F -->|Option 3| I[Result 3] - G --> J[End] - H --> J - I --> J -``` - - -## Sequence Diagram Example - -Sequence diagrams show interactions between objects over time. - -```mermaid -sequenceDiagram - participant User - participant WebApp - participant Server - participant Database - - User->>WebApp: Submit Login Request - WebApp->>Server: Send Auth Request - Server->>Database: Query User Credentials - Database-->>Server: Return User Data - Server-->>WebApp: Return Auth Result - - alt Auth Successful - WebApp->>User: Show Welcome Page - WebApp->>Server: Request User Data - Server->>Database: Get User Preferences - Database-->>Server: Return Preferences - Server-->>WebApp: Return User Data - WebApp->>User: Load Personalized Interface - else Auth Failed - WebApp->>User: Show Error Message - WebApp->>User: Prompt Re-entry - end -``` - - -## Gantt Chart Example - -Gantt charts are perfect for displaying project schedules and timelines. - -```mermaid -gantt - title Website Development Project Timeline - dateFormat YYYY-MM-DD - axisFormat %m/%d - - section Design Phase - Requirements Analysis :a1, 2023-10-01, 7d - UI Design :a2, after a1, 10d - Prototype Creation :a3, after a2, 5d - - section Development Phase - Frontend Development :b1, 2023-10-20, 15d - Backend Development :b2, after a2, 18d - Database Design :b3, after a1, 12d - - section Testing Phase - Unit Testing :c1, after b1, 8d - Integration Testing :c2, after b2, 10d - User Acceptance Testing :c3, after c2, 7d - - section Deployment - Production Deployment :d1, after c3, 3d - Launch :milestone, after d1, 0d -``` - - -## Class Diagram Example - -Class diagrams show the static structure of a system, including classes, attributes, methods, and their relationships. - -```mermaid -classDiagram - class User { - +String username - +String password - +String email - +Boolean active - +login() - +logout() - +updateProfile() - } - - class Article { - +String title - +String content - +Date publishDate - +Boolean published - +publish() - +edit() - +delete() - } - - class Comment { - +String content - +Date commentDate - +addComment() - +deleteComment() - } - - class Category { - +String name - +String description - +addArticle() - +removeArticle() - } - - User "1" -- "*" Article : writes - User "1" -- "*" Comment : posts - Article "1" -- "*" Comment : has - Article "1" -- "*" Category : belongs to -``` - - -## State Diagram Example - -State diagrams show the sequence of states an object goes through during its life cycle. - -```mermaid -stateDiagram-v2 - [*] --> Draft - - Draft --> UnderReview : submit - UnderReview --> Draft : reject - UnderReview --> Approved : approve - Approved --> Published : publish - Published --> Archived : archive - Published --> Draft : retract - - state Published { - [*] --> Active - Active --> Hidden : temporarily hide - Hidden --> Active : restore - Active --> [*] - Hidden --> [*] - } - - Archived --> [*] -``` - - -## Pie Chart Example - -Pie charts are ideal for displaying proportions and percentage data. - -```mermaid -pie title Website Traffic Sources Analysis - "Search Engines" : 45.6 - "Direct Access" : 30.1 - "Social Media" : 15.3 - "Referral Links" : 6.4 - "Other Sources" : 2.6 -``` - - -## Conclusion - -Mermaid is a powerful tool for creating various types of diagrams in Markdown documents. This article demonstrated how to use flowcharts, sequence diagrams, Gantt charts, class diagrams, state diagrams, and pie charts. These diagrams can help you express complex concepts, processes, and data structures more clearly. - -To use Mermaid, simply specify the mermaid language in a code block and describe the diagram using concise text syntax. Mermaid will automatically convert these descriptions into beautiful visual diagrams. - -Try using Mermaid diagrams in your next technical blog post or project documentation - they will make your content more professional and easier to understand! \ No newline at end of file