<p>I had this very same issue. Sadly in the code repos themselves you cannot view the rendered diagrams.</p>
<p>The diagrams (<a href="https://docs.microsoft.com/en-us/azure/devops/project/wiki/wiki-markdown-guidance?view=azure-devops#add-mermaid-diagrams-to-a-wiki-page" rel="nofollow noreferrer">and only a few supported types</a> are rendered) are only rendered in the &quot;Wiki from code&quot;</p>
<p>There is this extension in the VS Marketplace to render the <code>.mmd</code> mermaid files but that's not inline documentation with markdown.</p>
<p>There's also the issue that the syntax for mermaid diagrams in the markdown documents breaks traditional spec by using colons instead of backquotes:</p>
<pre><code>:::mermaid
  graph TD;
    A--&gt;B
:::
</code></pre>
<p>v.s.</p>
<pre><code>```mermaid
  graph TD;
    A--&gt;B
```
</code></pre>
<p>This wrecks many mermaid plugins in editors like VS Code when it comes to syntax highlighting language support. But thankfully that will actually still render in the markdown preview panes.</p>
<ul>
<li>VSCode Mermaid Extensions
<ul>
<li><code>bierner.markdown-mermaid</code>
<ul>
<li>render the diagrams</li>
</ul>
</li>
<li><code>bpruitt-goddard.mermaid-markdown-syntax-highlighting</code>
<ul>
<li>Syntax highlighting for mermaid code in code fences (not DevOps Colon syntax)</li>
</ul>
</li>
</ul>
</li>
</ul>
<p>Some workaround for viewing mermaid diagrams in the markdown documents without being in the code wiki is the use of <a href="https://mermaid-js.github.io/mermaid-live-editor/edit#eyJjb2RlIjoiZXJEaWFncmFtXG4gICAgICAgICAgQ1VTVE9NRVIgfXwuLnx7IERFTElWRVJZLUFERFJFU1MgOiBoYXNcbiAgICAgICAgICBDVVNUT01FUiB8fC0tb3sgT1JERVIgOiBwbGFjZXNcbiAgICAgICAgICBDVVNUT01FUiB8fC0tb3sgSU5WT0lDRSA6IFwibGlhYmxlIGZvclwiXG4gICAgICAgICAgREVMSVZFUlktQUREUkVTUyB8fC0tb3sgT1JERVIgOiByZWNlaXZlc1xuICAgICAgICAgIElOVk9JQ0UgfHwtLXx7IE9SREVSIDogY292ZXJzXG4gICAgICAgICAgT1JERVIgfHwtLXx7IE9SREVSLUlURU0gOiBpbmNsdWRlc1xuICAgICAgICAgIFBST0RVQ1QtQ0FURUdPUlkgfHwtLXx7IFBST0RVQ1QgOiBjb250YWluc1xuICAgICAgICAgIFBST0RVQ1QgfHwtLW97IE9SREVSLUlURU0gOiBcIm9yZGVyZWQgaW5cIlxuICAgICAgICAgICAgIiwibWVybWFpZCI6Int9IiwidXBkYXRlRWRpdG9yIjpmYWxzZSwiYXV0b1N5bmMiOnRydWUsInVwZGF0ZURpYWdyYW0iOmZhbHNlfQ" rel="nofollow noreferrer">mermaid INK</a>, with an issue I filed recently, they also updated the supported graph types on mermaid INK so now we can embed the diagrams that way and can get around the <a href="https://vsf-prod.westus.cloudapp.azure.com/content/problem/1217809/devops-wiki-not-running-latest-mermaid-version.html" rel="nofollow noreferrer">outdated version of mermaid that DevOps currently supports</a>.</p>
<p>To use mermaid INK all you need to do is write your mermaid code in the I've editor and then grab the markdown link at the bottom of the editor and embed the diagram into your markdown document. This is a hack because now you lose out on version control of plain text diagram code, but the link to the image will take you back to the editor with an exact copy of the code you used to generate it.</p>

CC BY-SA 4.0
2022-09-01T16:02:40.580Z
Nice workaround, only downside is that the IP is on a source you don't control.
Jim
CC BY-SA 4.0
2021-06-18T08:05:18.637Z
2021-06-18T08:05:18.637Z
Bryan Jenks
<p>I'd like to include markdown diagrams in my project's source code. I'd also like to see them rendered in Azure DevOps when looking at source/pull-requests when I click on the Preview tab for the file.</p>
<p>md files are supported, but it seems mermaid diagrams are not. Is there a way to enable mermaid diagrams, or is there an alternative I can use that is supported?</p>
<p>Note: Not in the Wiki, in a file in with the source code repository.</p>

CC BY-SA 4.0
2024-01-23T09:50:07.413Z
you can try vote for this feature, but not sure if this is help https://developercommunity.visualstudio.com/t/support-mermaid-diagrams-in-markdown-file-preview/817244
Karlaji To
<azure-devops>
Diagrams in Azure DevOps
Peter Morris
# Diagrams in Azure DevOps

(Asked by: username_0 on 2021-06-15)

I'd like to include markdown diagrams in my project's source code. I'd also like to see them rendered in Azure DevOps when looking at source/pull-requests when I click on the Preview tab for the file.

md files are supported, but it seems mermaid diagrams are not. Is there a way to enable mermaid diagrams, or is there an alternative I can use that is supported?

Note: Not in the Wiki, in a file in with the source code repository.

**Tags:** azure-devops

> **Comments:**
> **username_1**: you can try vote for this feature, but not sure if this is help https://developercommunity.visualstudio.com/t/support-mermaid-diagrams-in-markdown-file-preview/817244  

---

## 1 answers

### Answer by username_2 on 2021-06-18. Score: 3

I had this very same issue. Sadly in the code repos themselves you cannot view the rendered diagrams.
The diagrams (and only a few supported types are rendered) are only rendered in the "Wiki from code"
There is this extension in the VS Marketplace to render the .mmd mermaid files but that's not inline documentation with markdown.
There's also the issue that the syntax for mermaid diagrams in the markdown documents breaks traditional spec by using colons instead of backquotes:
:::mermaid
  graph TD;
    A-->B
:::

v.s.
```mermaid
  graph TD;
    A-->B
```

This wrecks many mermaid plugins in editors like VS Code when it comes to syntax highlighting language support. But thankfully that will actually still render in the markdown preview panes.

VSCode Mermaid Extensions

bierner.markdown-mermaid

render the diagrams


bpruitt-goddard.mermaid-markdown-syntax-highlighting

Syntax highlighting for mermaid code in code fences (not DevOps Colon syntax)





Some workaround for viewing mermaid diagrams in the markdown documents without being in the code wiki is the use of mermaid INK, with an issue I filed recently, they also updated the supported graph types on mermaid INK so now we can embed the diagrams that way and can get around the outdated version of mermaid that DevOps currently supports.
To use mermaid INK all you need to do is write your mermaid code in the I've editor and then grab the markdown link at the bottom of the editor and embed the diagram into your markdown document. This is a hack because now you lose out on version control of plain text diagram code, but the link to the image will take you back to the editor with an exact copy of the code you used to generate it.

> **Comments:**
> **username_3**: Nice workaround, only downside is that the IP is on a source you don't control.  

---

