diff --git a/assets/images/help/writing/mermaid-flow-chart.png b/assets/images/help/writing/mermaid-flow-chart.png new file mode 100644 index 0000000000..900b3b6c39 Binary files /dev/null and b/assets/images/help/writing/mermaid-flow-chart.png differ diff --git a/content/get-started/writing-on-github/working-with-advanced-formatting/creating-and-highlighting-code-blocks.md b/content/get-started/writing-on-github/working-with-advanced-formatting/creating-and-highlighting-code-blocks.md index 46ca346425..b9f21c56e7 100644 --- a/content/get-started/writing-on-github/working-with-advanced-formatting/creating-and-highlighting-code-blocks.md +++ b/content/get-started/writing-on-github/working-with-advanced-formatting/creating-and-highlighting-code-blocks.md @@ -66,6 +66,13 @@ For example, to syntax highlight Ruby code: We use [Linguist](https://github.com/github/linguist) to perform language detection and to select [third-party grammars](https://github.com/github/linguist/blob/master/vendor/README.md) for syntax highlighting. You can find out which keywords are valid in [the languages YAML file](https://github.com/github/linguist/blob/master/lib/linguist/languages.yml). +{% if mermaid %} +## Creating diagrams + +You can use Mermaid syntax to add diagrams. For more information, see "[Creating diagrams](/get-started/writing-on-github/working-with-advanced-formatting/creating-diagrams)." + +{% endif %} + ## Further reading - [{% data variables.product.prodname_dotcom %} Flavored Markdown Spec](https://github.github.com/gfm/) diff --git a/content/get-started/writing-on-github/working-with-advanced-formatting/creating-diagrams.md b/content/get-started/writing-on-github/working-with-advanced-formatting/creating-diagrams.md new file mode 100644 index 0000000000..4f4f1a2e26 --- /dev/null +++ b/content/get-started/writing-on-github/working-with-advanced-formatting/creating-diagrams.md @@ -0,0 +1,33 @@ +--- +title: Creating diagrams +intro: Create diagrams to convey information through charts and graphs +versions: + feature: mermaid +shortTitle: Create diagrams +--- + +You can use Mermaid syntax to create diagrams. Mermaid is a Markdown-inspired tool that renders text into diagrams. For example, Mermaid can render flow charts, sequence diagrams, pie charts and more. For more information, see the [Mermaid documentation](https://mermaid-js.github.io/mermaid/#/). + +To create a Mermaid diagram, add Mermaid syntax inside a fenced code block with the `mermaid` language identifier. For more information about creating code blocks, see "[Creating and highlighting code blocks](/get-started/writing-on-github/working-with-advanced-formatting/creating-and-highlighting-code-blocks)." + +For example, you can create a flow chart: + +
+Here is a simple flow chart:
+
+```mermaid
+graph TD;
+    A-->B;
+    A-->C;
+    B-->D;
+    C-->D;
+```
+
+ +![Rendered Mermaid flow chart](/assets/images/help/writing/mermaid-flow-chart.png) + +{% note %} + +**Note:** You may observe errors if you run a third-party Mermaid plugin when using Mermaid syntax on {% data variables.product.company_short %}. + +{% endnote %} diff --git a/content/get-started/writing-on-github/working-with-advanced-formatting/index.md b/content/get-started/writing-on-github/working-with-advanced-formatting/index.md index 26651f391d..9e52880793 100644 --- a/content/get-started/writing-on-github/working-with-advanced-formatting/index.md +++ b/content/get-started/writing-on-github/working-with-advanced-formatting/index.md @@ -13,6 +13,7 @@ children: - /organizing-information-with-tables - /organizing-information-with-collapsed-sections - /creating-and-highlighting-code-blocks + - /creating-diagrams - /autolinked-references-and-urls - /attaching-files - /creating-a-permanent-link-to-a-code-snippet diff --git a/data/features/mermaid.yml b/data/features/mermaid.yml new file mode 100644 index 0000000000..7923730060 --- /dev/null +++ b/data/features/mermaid.yml @@ -0,0 +1,7 @@ +# Issue 5812 and 6172 +# Mermaid syntax support +versions: + fpt: '*' + ghec: '*' + ghes: '>=3.5' + ghae: 'issue-6172'