#20 المخططات والرسوم البيانية

يدعم PenPage Mermaid — أداة رسم مخططات نصية. اكتب نصًا بسيطًا في كتلة شفرة، فيُصيَّر كمخطط تلقائيًا.

كيفية الاستخدام: أنشئ كتلة شفرة واضبط اللغة على mermaid. يظهر المخطط أسفل الشفرة.

فيما يلي 12 نوعًا من المخططات يمكنك استخدامها. انسخ أي مثال كنقطة بداية.

---

1. مخطط انسيابي (Flowchart)

flowchart TD
    A[Christmas] -->|Get money| B(Go shopping)
    B --> C{Let me think}
    C -->|One| D[Laptop]
    C -->|Two| E[iPhone]
    C -->|Three| F[fa:fa-car Car]

2. مخطط تسلسلي (Sequence Diagram)

sequenceDiagram
  participant U as User
  participant A as App
  participant S as Server
  U->>A: Click Save
  A->>S: POST /api/save
  S-->>A: 200 OK
  A-->>U: Show success

3. مخطط جانت (Gantt Chart)

gantt
  title Project Plan
  dateFormat YYYY-MM-DD
  section Design
    Wireframe     :done, d1, 2025-01-01, 7d
    Prototype     :active, d2, after d1, 5d
  section Dev
    Frontend      :d3, after d2, 10d
    Backend       :d4, after d2, 12d
  section Launch
    Testing       :d5, after d4, 5d
    Deploy        :d6, after d5, 2d

4. مخطط الأصناف (Class Diagram)

classDiagram
  class Animal {
    +String name
    +makeSound()
  }
  class Dog {
    +fetch()
  }
  class Cat {
    +purr()
  }
  Animal <|-- Dog
  Animal <|-- Cat

5. علاقات الكيانات (Entity Relationship)

erDiagram
    CUSTOMER ||--o{ ORDER : places
    ORDER ||--|{ ORDER_ITEM : contains
    PRODUCT ||--o{ ORDER_ITEM : includes
    CUSTOMER {
        string id
        string name
        string email
    }
    ORDER {
        string id
        date orderDate
        string status
    }
    PRODUCT {
        string id
        string name
        float price
    }
    ORDER_ITEM {
        int quantity
        float price
    }

6. مخطط الحالات (State Diagram)

stateDiagram-v2
  [*] --> Draft
  Draft --> Review : Submit
  Review --> Approved : Accept
  Review --> Draft : Reject
  Approved --> Published : Deploy
  Published --> [*]

7. مخطط دائري (Pie Chart)

pie title Time Spent This Week
  "Coding" : 40
  "Meetings" : 20
  "Review" : 15
  "Learning" : 15
  "Other" : 10

8. رسم Git (Git Graph)

gitGraph
  commit id: "Init"
  branch feature
  checkout feature
  commit id: "Add UI"
  commit id: "Add API"
  checkout main
  commit id: "Hotfix"
  merge feature id: "Merge"
  commit id: "Release"

9. خريطة ذهنية (Mindmap)

mindmap
  root((mindmap))
    Origins
      Long history
      ::icon(fa fa-book)
      Popularisation
        British popular psychology author Tony Buzan
    Research
      On effectiveness<br/>and features
      On Automatic creation
        Uses
            Creative techniques
            Strategic planning
            Argument mapping
    Tools
      PenPage
      Mermaid

10. مخطط XY (XY Chart)

xychart-beta
  title "Project Status"
  x-axis [jan, feb, mar, apr, may, jun, jul, aug, sep, oct, nov, dec]
  y-axis "Progress (hr)" 10 --> 120
  bar [80, 80, 80, 90, 90, 90, 95, 100, 100, 110, 120, 120]
  line [12, 25 , 27, 35, 38, 56, 58 , 69]
  line [10, 20, 30, 40, 50, 60, 70, 80, 90, 100, 110, 120]

11. مخطط رباعي (Quadrant Chart)

quadrantChart
  title Task Priority Matrix
  x-axis Low Effort --> High Effort
  y-axis Low Impact --> High Impact
  quadrant-1 Do First
  quadrant-2 Schedule
  quadrant-3 Delegate
  quadrant-4 Eliminate
  Fix login bug: [0.2, 0.9]
  Redesign homepage: [0.8, 0.8]
  Update docs: [0.3, 0.4]
  Refactor CSS: [0.7, 0.3]
  Add dark mode: [0.6, 0.7]

12. رحلة المستخدم (User Journey)

journey
  title User Onboarding
  section Sign Up
    Visit site: 5: User
    Fill form: 3: User
    Verify email: 4: User
  section First Use
    Create note: 5: User
    Explore features: 4: User
    Share a page: 5: User

---

تعلّم المزيد

يدعم Mermaid أنواعًا وخيارات أكثر بكثير من المخططات. زُر الوثائق الرسمية لمرجع الصياغة الكامل:

Mermaid Official Docs — mermaid.js.org

Live Editor — mermaid.live — جرّب المخططات على الإنترنت قبل لصقها في PenPage.