How does it handle rendering issues on platforms like GitHub?

The skill includes specific rules for cross-platform compatibility, such as avoiding reserved words and using specific syntax patterns that ensure consistent rendering across different Markdown viewers.

Which diagram types are supported by this skill?

It supports a wide range of diagrams including flowcharts, sequence diagrams, ERDs, Gantt charts, C4 architecture, mindmaps, state machines, and more.

Why does the skill recommend TB (Top-to-Bottom) direction?

Top-to-bottom layout is recommended to prevent horizontal overflow on letter-size PDF exports and to ensure readability on narrow viewports like mobile devices.

Can it help fix complex layout problems?

Yes, it provides initialization directives for the ELK layout engine to handle complex diagrams with many edge crossings and provides templates for subgraphs.

Markdown Mermaid Diagrams

Name: Markdown Mermaid Diagrams
Author: AeyeOps

byAeyeOps

0•

学習とドキュメンテーション

Generates and optimizes Mermaid.js diagrams within Markdown files for technical documentation and architecture visualization.

This skill provides a comprehensive suite of validated templates and syntax guides for creating various Mermaid.js diagrams, including flowcharts, sequence diagrams, and ERDs, directly inside Markdown. It ensures cross-platform rendering compatibility for tools like GitHub, GitLab, and Obsidian while offering expert troubleshooting for common syntax errors, layout overflows, and styling inconsistencies. It is particularly useful for developers needing to visualize system architectures, database schemas, or API flows without leaving their documentation workflow.

主な機能

01Cross-platform compatibility guidance for GitHub, GitLab, VS Code, and Obsidian

02Built-in troubleshooting for common Mermaid 'diagram not rendering' errors

03Validated syntax templates for 20+ diagram types including C4, ERDs, and Gantt charts

04Advanced rendering control using initialization directives for themes and ELK layouts

05Automated layout optimization to prevent width overflows in PDFs and narrow viewports

060 GitHub stars

ユースケース

01Documenting API request-response cycles and microservice interactions with Sequence Diagrams

02Visualizing complex database schemas and relationships using Entity Relationship Diagrams (ERD)

03Mapping out internal logic, state machines, and project timelines for technical documentation

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add aeyeops/aeo-skill-marketplace markdown-mermaid

For use in Claude.ai and ChatGPT

Download Skill