Add support for mermaid diagrams in README files

app/components/rendered-html.hbs

@@ -2,6 +2,11 @@
   This component renders raw HTML. Be very careful with this since it
   can enable cross-site scripting attacks!
 --}}
-<div local-class="wrapper" ...attributes {{highlight-syntax selector="pre > code"}}>
+<div
+  local-class="wrapper"
+  ...attributes
+  {{highlight-syntax selector="pre > code"}}
+  {{render-mermaids}}
+>
   {{html-safe @html}}
 </div>

app/controllers/crate/version.js

@@ -7,6 +7,7 @@ import { task } from 'ember-concurrency';
 import { alias } from 'macro-decorators';
 
 export default class CrateVersionController extends Controller {
+  @service mermaid;
   @service session;
 
   get downloadsContext() {
@@ -41,6 +42,17 @@ export default class CrateVersionController extends Controller {
       ? version.loadReadmeTask.lastSuccessful.value
       : await version.loadReadmeTask.perform();
 
+    // If the README contains `language-mermaid` we ensure that the `mermaid` library has loaded before we continue
+    if (readme.includes('language-mermaid') && !this.mermaid.loadTask.lastSuccessful?.value) {
+      try {
+        await this.mermaid.loadTask.perform();
+      } catch (error) {
+        // If we failed to load the library due to network issues, it is not the end of the world, and we just log
+        // the error to the console.
+        console.error(error);
+      }
+    }
+
     if (typeof document !== 'undefined') {
       setTimeout(() => {
         let e = document.createEvent('CustomEvent');

app/modifiers/render-mermaids.js

@@ -0,0 +1,27 @@
+import { inject as service } from '@ember/service';
+import { waitForPromise } from '@ember/test-waiters';
+
+import Modifier from 'ember-modifier';
+
+export default class ScrollPositionModifier extends Modifier {
+  @service notifications;
+  @service mermaid;
+
+  modify(element) {
+    // If the `mermaid` library is loaded (which should have happend in the controller)
+    let mermaid = this.mermaid.loadTask.lastSuccessful?.value;
+    if (mermaid) {
+      // ... find any relevant code snippets
+      let nodes = element.querySelectorAll('.language-mermaid');
+
+      // ... and render them as diagrams
+      waitForPromise(mermaid.run({ nodes })).catch(error => {
+        // Log errors to the console
+        console.error(error.error || error);
+
+        // ... and report them as warnings to the user
+        this.notifications.warning('Failed to render mermaid diagram.');
+      });
+    }
+  }
+}

app/routes/crate/version.js

@@ -1,5 +1,6 @@
 import Route from '@ember/routing/route';
 import { inject as service } from '@ember/service';
+import { waitForPromise } from '@ember/test-waiters';
 
 import { didCancel } from 'ember-concurrency';
 
@@ -39,7 +40,7 @@ export default class VersionRoute extends Route {
   setupController(controller, model) {
     super.setupController(...arguments);
 
-    controller.loadReadmeTask.perform().catch(() => {
+    waitForPromise(controller.loadReadmeTask.perform()).catch(() => {
       // ignored
     });
 

app/services/mermaid.js

@@ -0,0 +1,11 @@
+import Service from '@ember/service';
+
+import { dropTask } from 'ember-concurrency';
+
+export default class MermaidService extends Service {
+  loadTask = dropTask(async () => {
+    let { default: mermaid } = await import('mermaid');
+    mermaid.initialize({ startOnLoad: false, securityLevel: 'sandbox' });
+    return mermaid;
+  });
+}

crates_io_markdown/lib.rs

@@ -29,6 +29,7 @@ impl<'a> MarkdownRenderer<'a> {
                 "language-javascript",
                 "language-json",
                 "language-markup",
+                "language-mermaid",
                 "language-protobuf",
                 "language-ruby",
                 "language-rust",
@@ -367,6 +368,17 @@ mod tests {
         assert!(result.contains("<code class=\"language-rust\">"));
     }
 
+    #[test]
+    fn code_block_with_mermaid_highlighting() {
+        let code_block = r#"```mermaid \
+                            graph LR \
+                            A --> C \
+                            C --> A \
+                           ```"#;
+        let result = markdown_to_html(code_block, None, "");
+        assert!(result.contains("<code class=\"language-mermaid\">"));
+    }
+
     #[test]
     fn code_block_with_syntax_highlighting_even_if_annot_has_no_run() {
         let code_block = r#"```rust  ,  no_run \

package.json

@@ -46,6 +46,7 @@
     "fastboot-app-server": "4.1.1",
     "highlight.js": "11.8.0",
     "macro-decorators": "0.1.2",
+    "mermaid": "10.2.3",
     "morgan": "1.10.0",
     "pretty-bytes": "6.1.0",
     "semver": "7.5.2",