github / markup

Determines which markup library to use to render a content file (e.g. README) on GitHub

MIT License

5.81k stars 3.41k forks source link

Add rendering of Mermaid diagrams #1441

Open FerLuisxd opened 3 years ago

FerLuisxd commented 3 years ago

Mermaid allow the rendering of diagrams from markdown-like text snippets. Code-highlighting could be reused to render them when setting mermaid as the languaje.

FerLuisxd commented 3 years ago

533

walterrowe commented 3 years ago

+11 for this feature

This is an important feature!

Graph LR

ClassDef red fill:#e33,color:#3ee,stroke:#3ee,stroke-width:2px;
ClassDef grn fill:#3e3,color:#e3e,stroke:#e3e,stroke-width:2px;
ClassDef blu fill:#33e,color:#ee3,stroke:#ee3,stroke-width:2px;

style box fill:#3e3,color:#e3e,stroke:#e3e,stroke-width:2px;

Subgraph box[My Box]
A:::red --> B:::grn --> C:::blu
End

linkstyle 0 fill:#e33,color:#3ee,stroke:#3ee,stroke-width:2px;
linkstyle 1 fill:#3e3,color:#e3e,stroke:#e3e,stroke-width:2px;

matheusmacedoap commented 2 years ago

Seria um ótimo recurso!!!

Fa7C0n commented 2 years ago

RokeJulianLockhart commented 4 weeks ago

https://github.com/github/markup/issues/1441#issue-807614896

@FerLuisxd, doesn't this already work, per https://github.com/github/docs/blob/f8992bc56c56b19e26af839b8fd427824cc99473/content/get-started/writing-on-github/working-with-advanced-formatting/creating-diagrams.md#creating-mermaid-diagrams?

```mermaid pie title NETFLIX "Time spent looking for movie" : 90 "Time spent watching it" : 10 ```