# Mermaid - Generation of diagrams and flowcharts from text in a similar manner as markdown

**URL:** <https://talk.commonmark.org/t/mermaid-generation-of-diagrams-and-flowcharts-from-text-in-a-similar-manner-as-markdown/1882>\
**Category:** Uncategorized\
**Created:** [October 11, 2015, 9:26am UTC](https://talk.commonmark.org/t/mermaid-generation-of-diagrams-and-flowcharts-from-text-in-a-similar-manner-as-markdown/1882 "2015-10-11T09:26:12Z")\
**Posts on this page:** 1\
**Showing post:** 19

<div class="post-metadata">

**Author:** ![Crissov](https://cdn.commonmark.org/user_avatar/talk.commonmark.org/crissov/32/1455_2.png) [@Crissov](https://talk.commonmark.org/u/Crissov)\
**Post date:** [October 18, 2015, 9:16am UTC](https://talk.commonmark.org/t/mermaid-generation-of-diagrams-and-flowcharts-from-text-in-a-similar-manner-as-markdown/1882/19 "2015-10-18T09:16:01Z")

</div>

> [@mofosyne](#):
>
> Another approach is to say that “.dot” and “#dot” in infotext means a div with either a class=dot or id=dot. ( e.g. .mermaid is equiv to !div { .mermaid } )

I don’t like the generic attribute syntax with curly braces at all, but I could live with special-casing strings that are introduced by dot `.` or hash `#` in places that don’t get rendered. The exact treatment depends on the output format, HTML attributes `id` and `class` are obviously the default case. Other places than the info string of a start fence are the location and reference parts of links, but it’s not as [compatible with existing implementations](http://johnmacfarlane.net/babelmark2/?normalize=1&text=%5Btext%5D(.class+%23id)%0A%5Btext%5D(target+.class+%23id)%0A%5Btext%5D(target+%22title%22+.class+%23id)%0A%5Btext%5D(target+.class+%23id+%22title%22)%0A%5Btext%5D(target+.class+%22title%22+%23id)%0A%0A!%5Btext%5D(media+.class+%23id)%0A!%5Btext%5D(media+%22title%22+.class+%23id)%0A!%5Btext%5D(media+.class+%23id+%22title%22)%0A!%5Btext%5D(media+.class+%22title%22+%23id)%0A%0A%5Btext%5D%5Bref1%5D%0A++%5Bref1%5D%3A+target+.class+%23id%0A%5Btext%5D%5Bref2%5D%0A++%5Bref2%5D%3A+target+%22title%22+.class+%23id%0A%5Btext%5D%5Bref3%5D%0A++%5Bref3%5D%3A+target+.class+%23id+%22title%22%0A%5Btext%5D%5Bref4%5D%0A++%5Bref4%5D%3A+target+.class+%22title%22+%23id%0A%0A!%5Btext%5D%5Bref5%5D%0A++%5Bref5%5D%3A+media+.class+%23id%0A!%5Btext%5D%5Bref6%5D%0A++%5Bref6%5D%3A+media+%22title%22+.class+%23id%0A!%5Btext%5D%5Bref7%5D%0A++%5Bref7%5D%3A+media+.class+%23id+%22title%22%0A!%5Btext%5D%5Bref8%5D%0A++%5Bref8%5D%3A+media+.class+%22title%22+%23id%0A%0A%5Btext%5D%5Bref9+.class+%23id%5D%0A++%5Bref9%5D%3A+target%0A%0A%5Btext%5D%5Bref0+.class%5D%0A++%5Bref0%5D%3A+target+%23id%0A%0A%5Btext%5D%5B.class+%23id%5D%0A), e.g.:

```auto
[text](location .class #id)

[text][reference .class #id]
  [reference]: location

[text][reference]
  [reference]: location .class #id

```

---

_[View the full topic](https://talk.commonmark.org/t/mermaid-generation-of-diagrams-and-flowcharts-from-text-in-a-similar-manner-as-markdown/1882)._