Merge pull request #15459 from github/repo-sync

repo sync

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/)

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:
+
+<pre>
+Here is a simple flow chart:
+
+```mermaid
+graph TD;
+    A-->B;
+    A-->C;
+    B-->D;
+    C-->D;
+```
+</pre>
+
+![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 %}

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

data/features/mermaid.yml

@@ -0,0 +1,7 @@
+# Issue 5812 and 6172
+# Mermaid syntax support
+versions:
+  fpt: '*'
+  ghec: '*'
+  ghes: '>=3.5'
+  ghae: 'issue-6172'