Support Mermaid diagrams and visualizations about retype

[geoffreymcgill]

Retype v1.7.0 has been released and includes Mermaid support. See https://retype.com/components/mermaid/.

Hope this helps.

[ApolonTorq]

The two markdown syntaxes I've seen for mermaidjs are:

• As a fenced code block with mermaid "syntax highlighting" .
• Azure Devops specific syntax

The Azure Devops mermaid versions doesn't work with some syntax so its likely quite an old version of mermaid behind the scenes. As a result, I use the ``` mermaid syntax.

This feature request does lead to the question of retypeapp extensibility as there are other "syntaxes" that it would be useful to support. Examples include all of the various diagram types supported by Kroki and any other form of code or non-code syntaxes.

By making fenced code block ``` processing an extensibility point of retypedapp, it would allow customers to be able implement their own custom syntax renders. Of course, I'd prefer this extensibility to be part of the free offering, however its a clear point of differentiation for a commercial version 😸 .

What language/coding-environment is retypedapp written? The context of this question is what an extensibility or addin infrastructure could look like.

[geoffreymcgill]

The fenced Mermaid syntax should be easy for Retype to support. Just need to prioritize building this new feature into the release schedule.

Currently, Retype uses Markdig for our Markdown parsing and Markdig already supports fenced Mermaid and nomnoml syntax.

https://github.com/xoofx/markdig/blob/master/src/Markdig.Tests/Specs/DiagramsSpecs.md

Kroki looks very interesting. I'll try and work out some configuration, syntax, and extensibility ideas for integrating the diagram types with Retype. It's certainly possible. We need to add four more developers to our team to keep up with all the features in the pipeline. 🏄 We'll get to them all – one step at a time.

What language/coding-environment is retypedapp written?

The Retype app is written in C#. The output of the app is static files (.html, .js, .css, images, etc), so no specific server-side technology is required for your generated website hosting. But, yes, the entire main CLI app is written in C#, supported on Mac, Win, and Linux.

[ApolonTorq]

Having access to all of the Markdig extensions would be fantastic if you would consider it sooner rather than later - especially if its easy to turn on within Retypeapp at your end. The Kroki link was primarily supplied as an FYI and nice-to-have.

The query on the retypeapp implementation language was primarily out of interest in extensibility. Enabling all of the Markdig extensions (or have them configurable in retype.json) would cover most of my currently anticipated extension needs.

[geoffreymcgill]

We are going to try and include Mermaid support in the upcoming Retype v1.7.0 release, which should happen early next week.

[geoffreymcgill]

Enabling all of the Markdig extensions (or have them configurable in retype.json) would cover most of my currently anticipated extension needs.

Essentially all the Markdig extensions are enabled currently, but some also require additional resources files to be selectively included on the page(s), such as the Mermaid .js files. The Retype App needs to manage the inclusion of those files, so that is why out of the box extensions like Mermaid are not currently working.

We will certainly be adding more extensibility and flexibility with each new release. Just one step at a time as the team has the resources available to implement, test, and document.

[ApolonTorq]

We are going to try and include Mermaid support in the upcoming Retype v1.7.0 release, which should happen early next week.

That would be fantastic. Thanks for the inclusion of mermaid functionality and I hope it makes it into V1.7.0.

[geoffreymcgill]

Okay, we have merged the Mermaid functionality into the v1.7.0 dev branch. It took a lot longer solve some Mermaid rendering scenarios than we had anticipated, but it's looking great now.

As far as we can determine, Mermaid does not support the automatic switching from light and dark modes, so we were kinda forced to render a white background on the Mermaid blocks when in dark mode. It's a compromise we had to make to get it working.

Sample

```mermaid
graph LR
    A[Hard edge] -->|Link text| B(Round edge)
    B --> C{Decision}
    C -->|One| D[Result one]
    C -->|Two| E[Result two]
```

Light mode

Dark mode

If at some point in the future Mermaid supports full light/dark mode switching, then our current implementation might automatically support as well. We'll just have to test at that time.

We're almost finished v1.7.0 and will be releasing very soon.

[ApolonTorq]

Thanks!

Sorry for my ignorance, but is there light/dark mode switching convention/standard that goes beyond having different css style options? If you can post some links to the javascript light/dark mode requirements, I can follow up on it with mermaidjs separately.

[geoffreymcgill]

We are using Tailwind CSS for handling the dark mode switching and I believe all the switching functionality is handled within CSS, but Tailwind might be using some JavaScript too.

https://tailwindcss.com/docs/dark-mode

Here's a post I found that provides samples for implementing dark and light mode checks in CSS and JS.

https://ourcodeworld.com/articles/read/1114/how-to-detect-if-the-user-prefers-a-light-or-dark-color-schema-in-the-browser-with-javascript-and-css

With CSS

@media (prefers-color-scheme: dark) {
    body { 
        background: black; 
    }
}

Or a light one:

@media (prefers-color-scheme: light) {
    body { 
        background: white; 
    }
}

With JavaScript

const userPrefersDark = window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches;

const userPrefersLight = window.matchMedia && window.matchMedia('(prefers-color-scheme: light)').matches;

if(userPrefersDark){
    console.log("User prefers a dark interface");
}

Hope this helps.

[ApolonTorq]

Fantastic! Thanks :)