Mermaid Playground

This repository contains various examples and guides on how to create and represent different types of UML and C4 diagrams using Mermaid. The goal is to help visualize software architecture and design through effective diagrams, focusing on teaching how to share software designs clearly.

This project is part of the DADS Series, a YouTube playlist where the author explores the foundations of Design, Architecture, and Software Development (DADS) or Diseño, Arquitectura y Desarrollo de Software.

Content

UML Diagrams

• Class Diagrams: Understand the structure of your system, including classes, attributes, methods, and relationships.
• Sequence Diagrams: Visualize the interactions between objects in a sequential manner.
• Activity Diagrams: Model workflows and business processes, showing the flow of control.
• Component Diagrams: Represent the internal structure of a system, including components and their relationships.
• Use Case Diagrams: Identify the functionality provided by a system and the different users that interact with it.

Each subfolder under the uml directory contains:

• An md file with specific examples for each diagram type.
• Detailed explanations and usage examples in Mermaid syntax.

C4 Models

• Context Diagram: Show the high-level context of the system and its interactions with external entities.
• Container Diagram: Represent the containers (applications, databases, etc.) that make up the system.
• Component Diagram: Provide details on the internal components of each container.
• Code Diagram: Visualize the code structure and interactions within a component or module.

The c4-models folder contains:

• An md file for each level of the C4 model with comprehensive examples and explanations.
• Overview image (c4-overview.png) to provide a visual summary of the C4 approach.

How to Use This Repository

1. Navigate to the desired folder (uml or c4-models) based on the type of diagram you want to learn.
2. Open the corresponding markdown (md) file to see code snippets and diagram representations using Mermaid.
3. Modify and run the code in your own environment or use tools like Mermaid Live Editor to visualize the diagrams.

For a complete guide on Mermaid syntax and diagram types, check the official Mermaid Documentation.

Try it yourself

I have to recommend you try these diagrams directly on Marmaid Chart because the experience is awesome...

About the Author

Juan G Carmona is a Cloud and Software Architect, passionate about software design, architecture, and the development of scalable solutions. With over two decades of experience, he combines his deep technical knowledge with a commitment to continuous learning and sharing through content creation.

You can follow his work and connect with him on the following platforms:

• YouTube: Technical tutorials, guides, and insights on software architecture and cloud solutions.
• LinkedIn: Professional profile with articles, updates, and networking opportunities.
• Personal Website: Explore more about his projects, services, and blog.

For any inquiries, feel free to reach out via email.