https://github.com/atxtechbro/diagrams-as-code
This repository explores the use of Mermaid for creating diagrams as code, with a focus on how to represent diagrams in a clear and maintainable way. It also examines the concept of separating the content of a diagram from its visual presentation, and discusses potential approaches and tools for achieving this separation.
https://github.com/atxtechbro/diagrams-as-code
diagrams-as-code documentation markdown mermaid software-architecture visualization
Last synced: 3 months ago
JSON representation
This repository explores the use of Mermaid for creating diagrams as code, with a focus on how to represent diagrams in a clear and maintainable way. It also examines the concept of separating the content of a diagram from its visual presentation, and discusses potential approaches and tools for achieving this separation.
- Host: GitHub
- URL: https://github.com/atxtechbro/diagrams-as-code
- Owner: atxtechbro
- Created: 2025-02-27T11:46:14.000Z (8 months ago)
- Default Branch: main
- Last Pushed: 2025-02-27T12:57:08.000Z (8 months ago)
- Last Synced: 2025-02-27T16:19:54.288Z (8 months ago)
- Topics: diagrams-as-code, documentation, markdown, mermaid, software-architecture, visualization
- Homepage:
- Size: 2.93 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Diagrams as Code
## Render a Mermaid diagram in GitHub
Here are a few examples of Mermaid diagrams:
```mermaid
graph
a --> b;
```
```mermaid
sequenceDiagram
a --> b: am i alone?
b --> a: i see you
```
```mermaid
sequenceDiagram
Alice-->John: Hello John, how are you?
John-->>Alice: Great!
```
## Diagrams as Code 2.0
> "Separate the content from the presentation"
>
> — Simon Brown, from his C4 model documentation: [https://c4model.com/](https://c4model.com/)
The examples above demonstrate a direct, text-to-visual representation of a diagram.
**Question:** Is it possible to achieve a separation of the diagram's core information from its visual presentation using only Markdown and GitHub? If not, what additional tools or approaches would be required?