技能 mermaid
📊

mermaid

安全 🌐 网络访问⚙️ 外部命令

أنشئ مخططات Mermaid جميلة لـ GitHub

غالبًا ما تتعطل مخططات Mermaid بين الوضعين الداكن والفاتح أو تستخدم أيقونات غير مدعومة على GitHub. توفّر هذه المهارة أنماطًا وقوالب مجرّبة لإنشاء مخططات احترافية متوافقة عبر السمات وتُعرض بشكل صحيح في كل مرة.

支持: Claude Codex Code(CC)
📊 69 充足
1

下载技能 ZIP

2

在 Claude 中上传

前往 设置 → 功能 → 技能 → 上传技能

3

开启并开始使用

测试它

正在使用“mermaid”。 Create a Mermaid flowchart showing a user login process with validation.

预期结果:

  • مخطط انسيابي مع عقدة المستخدم ((circle)) في البداية
  • تعبئة داكنة (#374151) مع حدود فاتحة (#d1d5db) لتوافق السمات
  • خطوة التحقق بشكل ملعب (["Validate"])
  • معين قرار لمسارات النجاح/الفشل
  • تم تنسيق subgraphs مع fill:none لملاءمة السمات

正在使用“mermaid”。 Create a Mermaid architecture diagram for a microservices system.

预期结果:

  • عدة subgraphs تمثل الخدمات (API, Auth, Database)
  • أزواج ألوان احترافية لكل نوع مكوّن
  • أسهم اتجاهية واضحة بين الخدمات
  • أنماط classDef قابلة لإعادة الاستخدام في الأعلى لسهولة الصيانة
  • دوائر لممثلي المستخدمين، ملاعب للإجراءات، أسطوانات للتخزين

正在使用“mermaid”。 Create a Mermaid diagram showing a data pipeline process.

预期结果:

  • مخطط انسيابي خطي بمراحل المصدر والمعالجة والوجهة
  • تنسيق متسق عبر جميع عقد خط الأنابيب
  • نقاط قرار بأشكال سداسية
  • مسارات النجاح باللون الأخضر، ومنطق التفريع باللون البرتقالي
  • تغليف subgraph صحيح لكل مرحلة من مراحل خط الأنابيب

安全审计

安全
v5 • 1/16/2026

This is a pure documentation skill containing only markdown guidance for Mermaid diagram syntax. The static analyzer flagged 115 patterns as potential security issues, but all are false positives: markdown code fences were misidentified as Ruby backtick execution, hex colour codes were misidentified as weak cryptographic algorithms, and metadata fields were misidentified as system reconnaissance. No executable code, network requests, file system access, or command execution capabilities exist in this skill.

2
已扫描文件
403
分析行数
2
发现项
5
审计总数
审计者: claude 查看审计历史 →

质量评分

38
架构
100
可维护性
87
内容
20
社区
100
安全
83
规范符合性

你能构建什么

مخططات معمارية لطلبات السحب

أنشئ مخططات واضحة لمعمارية النظام لإدراجها في أوصاف طلبات السحب والوثائق.

توثيق تدفقات العمليات

ابنِ تدفقات عمليات مرئية ومخططات خطوط أنابيب البيانات للتوثيق التقني والويكيات.

مخططات البنية التحتية

صمّم مخططات طوبولوجيا للبنية التحتية تُعرض بشكل صحيح عبر جميع سمات GitHub وطرق العرض.

试试这些提示

مخطط انسيابي أساسي
Create a Mermaid flowchart showing a user registration process with validation, account creation, and welcome steps.
مخطط معمارية
Create a Mermaid architecture diagram with user, API gateway, microservices, and database components using proper styling.
مخطط انسيابي للقرارات
Create a Mermaid flowchart with a decision diamond showing success/failure paths and retry logic.
نظام معقد
Create a comprehensive Mermaid diagram with multiple subgraphs, sub-processes, and cross-component communication flows.

最佳实践

  • استخدم دائمًا تعبئات داكنة مع حدود فاتحة ونص أبيض للتوافق عبر السمات
  • عرّف جميع أنماط classDef في أعلى المخطط لسهولة الصيانة
  • اضبط تعبئة subgraph على none لتتكيّف مع أي لون خلفية

避免

  • استخدام تعبئات فاتحة مع نص داكن يجعل النص غير مرئي في الوضع الداكن
  • أيقونات Font Awesome (fa:fa-*) تُعرض كنص حرفي على GitHub
  • تسميات subgraph غير المقتبسة مع مسافات تسبب أخطاء في التحليل

常见问题

ما أنواع مخططات Mermaid المدعومة؟
يدعم GitHub المخططات الانسيابية، ومخططات التسلسل، ومخططات الفئات، ومخططات الحالة، ومخططات الكيان-العلاقة، ورحلة المستخدم، ومخططات جانت.
هل تعمل المخططات في المستودعات الخاصة؟
نعم، تُعرض مخططات Mermaid بشكل صحيح في مستودعات GitHub العامة والخاصة باستخدام الصياغة نفسها.
كيف أعاين المخططات قبل الالتزام؟
استخدم mermaid.live لمعاينة مخططاتك. انسخ الكود، اعرضه هناك، ثم الصقه في markdown.
هل يمكنني استخدام ألوان مخصصة؟
نعم، أي لون سداسي صالح. فقط اتبع نمط التعبئة الداكنة + الحدود الفاتحة + النص الأبيض للتوافق مع السمات.
هل تعمل الرسوم المتحركة للمخططات على GitHub؟
لا، يعرض GitHub مخططات ثابتة. تعمل الرسوم المتحركة فقط في عارضات Mermaid المحلية مثل mermaid.live.
ما الفرق بين classDef و style؟
تُنشئ classDef أنماطًا مسماة قابلة لإعادة الاستخدام تُطبّق بصياغة :::. أما style فيُطبّق ضمنيًا على عقد محددة. استخدم classDef للاتساق.

开发者详情

文件结构

📄 SKILL.md