GitHub HTML Rendering Pipeline

mermaid.md

```mermaid
sequenceDiagram
    participant dotcom
    participant iframe
    participant viewscreen
    dotcom->>iframe: loads html w/ iframe url
    iframe->>viewscreen: request template
    viewscreen->>iframe: html & javascript
    iframe->>dotcom: iframe ready
    dotcom->>iframe: set mermaid data on iframe
    iframe->>iframe: render mermaid
```

sequenceDiagram
    participant dotcom
    participant iframe
    participant viewscreen
    dotcom->>iframe: loads html w/ iframe url
    iframe->>viewscreen: request template
    viewscreen->>iframe: html & javascript
    iframe->>dotcom: iframe ready
    dotcom->>iframe: set mermaid data on iframe
    iframe->>iframe: render mermaid

It's weird that Gist is somehow behind Github for its markdown rendering

That's very nice! Do you think it would be possible to add support for hyperlinks/*?
e.g.

```mermaid
sequenceDiagram
    participant user
    participant [example](example.com)
    participant iframe
    participant ![viewscreen](./.tiny-icon.png)
    user->>dotcom: Go to the [example](example.com) page
    dotcom->>iframe: loads html w/ iframe url
    iframe->>viewscreen: request template
    viewscreen->>iframe: html & javascript
    iframe->>dotcom: iframe ready
    dotcom->>iframe: set mermaid data on iframe
    iframe->>iframe: render mermaid
```

Yes! I'd love hyperlink support!

Nice!

I'm new to mermaid, but I found a way to add hyperlinks here if that helps! (You might be looking for embedded images too though, right?)

Example:

flowchart LR;
    A-->B;
    B-->C;
    C-->D;
    click A callback "Tooltip for a callback"
    click B "http://www.github.com" "This is a tooltip for a link"
    click A call callback() "Tooltip for a callback"
    click B href "http://www.github.com" "This is a tooltip for a link"

me when someone [hyperlink blocked]

@dqlobo I'm testing the sequence diagram and it seems to not have support for hyperlinks (or it's not working or I got it wrong). I tried to follow this example.

The image is another story hahah not sure how they would do it, I think it would need to resize the image otherwise it would be unreadable

e.g.

```mermaid
sequenceDiagram
    participant Alice
    participant John
    links Alice: {"Dashboard": "https://dashboard.contoso.com/alice", "Wiki": "https://wiki.contoso.com/alice"}
    links John: {"Dashboard": "https://dashboard.contoso.com/john", "Wiki": "https://wiki.contoso.com/john"}
    Alice->>John: Hello John, how are you?
    John-->>Alice: Great!
    Alice-)John: See you later!
```

```mermaid
  flowchart LR;
      A[CI MULTI CHAPTCHA]-->B{Select captcha service by developer?};
      classDef green color:#022e1f,fill:#00f500;
      classDef red color:#022e1f,fill:#f11111;
      classDef white color:#022e1f,fill:#fff;
      classDef black color:#fff,fill:#000;
      B--YES-->C[How to use?]:::green;
      
      C-->U[I choose recaptcha.]:::green;
      U--Views-->Q["echo CIMC_JS('recaptcha');\n echo CIMC_HTML(['captcha_name'=>'recaptcha']);"]:::green;
      U--Controller-->W["CIMC_RULE('recaptcha');"]:::green;
      
      C-->I[I choose arcaptcha.]:::white;
      I--Views-->O["echo CIMC_JS('arcaptcha');\n echo CIMC_HTML(['captcha_name'=>'arcaptcha']);"]:::white;
      I--Controller-->P["CIMC_RULE('arcaptcha');"]:::white;
      
      C-->X[I choose bibot.]:::red;
      X--Views-->V["echo CIMC_JS('bibot');\n echo CIMC_HTML(['captcha_name'=>'bibot']);"]:::red;
      X--Controller-->N["CIMC_RULE('bibot');"]:::red;
      
      B--NO-->D[How to use?]:::black;
      D---Views:::black-->F["echo CIMC_JS('randomcaptcha');\n echo CIMC_HTML(['captcha_name'=>'randomcaptcha']);"]:::black; 
      D---Controller:::black-->T["CIMC_RULE('archaptcha,recaptcha,bibot');"]:::black;
```

Is this conversation thread being actively monitored for feedback on improvements to this feature? If not, where is the best place to submit feedback.

At any rate, this is awesome! Hoping for PlantUML support as well!

May I suggest... a syntax that supports importing a separate Mermaid file in the repository, via a relative path to the Markdown doc?

e.g.

```mermaid ./someFile.mmd```

I have the same question as @jimmcslim : Where should feedback go? Apparently <sub> and <sup> tags aren't supported like they are with GitHub-flavored Markdown: A^superscript_subscript.

This thread isn't being actively monitored. However being able to include code snippets from files outside the md file is def feedback we've heard before and are considering. If you'd like to contribute to mermaid.js then feel free to discuss mermaid features here: https://github.com/mermaid-js/mermaid

For general feedback on GitHub and the markdown support, probably best to go to https://github.com/github/feedback/discussions

For those interested, this feature isn't Markdown-specific. It works in any format supported by github/markup that supports syntax highlighted code-blocks.

Basically, if it can yield <pre lang="mermaid">, it should be supported. Notably, GitHub Wikis are an exception (though this may be fixed in future).

Examples in different markup languages

AsciiDoc

[source,mermaid]
----
Add mermaid here.
----

Org-mode

#+BEGIN_SRC mermaid
Add mermaid here.
#+BEGIN_SRC

Textile

<pre lang="mermaid">
Raw HTML will do.
</pre>

WikiText (a.k.a., "MediaWiki")

NB: GitHub only supports <source> tags, which were deprecated in MediaWiki 1.16 in favour of the <syntaxhighlight> tag:

<source lang="mermaid">
Mermaid goes here.
</source>

reStructuredText

.. code:: mermaid

	flowchart LR;
		A-->B;
		B-->C;
		C-->D;
		click A callback "Tooltip for a callback"
		click B "http://www.github.com" "This is a tooltip for a link"
		click A call callback() "Tooltip for a callback"
		click B href "http://www.github.com" "This is a tooltip for a link"

looking forward to it to add file .mmd to markdown file

A-->B;
B-->C;
C-->D;

Is the hyperlink solution support only for flowcharts? (Haven't been able to implement with user journey chart)

Is the hyperlink solution support only for flowcharts? (Haven't been able to implement with user journey chart)

+1

Looks like this works if we zoom in

graph TD;
    A[This is an <b>important</b> <a href='https://google.com'>link</a>]

Excellent!

bro it doesn't even render.

saying Unable to render rich display

What browser are you using? It renders just fine for me

chrome

…

On Fri, Jun 30, 2023 at 3:32 PM Gustavo Porto ***@***.***> wrote: ***@***.**** commented on this gist. ------------------------------ What browser are you using? It renders just fine for me — Reply to this email directly, view it on GitHub <https://gist.github.com/martinwoodward/8ad6296118c975510766d80310db71fd#gistcomment-4615077> or unsubscribe <https://github.com/notifications/unsubscribe-auth/A33RXJOR6C72ACJAFOSPJ33XN2MMFBFKMF2HI4TJMJ2XIZLTSKBKK5TBNR2WLJDHNFZXJJDOMFWWLK3UNBZGKYLEL52HS4DFQKSXMYLMOVS2I5DSOVS2I3TBNVS3W5DIOJSWCZC7OBQXE5DJMNUXAYLOORPWCY3UNF3GS5DZVRZXKYTKMVRXIX3UPFYGLK2HNFZXIQ3PNVWWK3TUUZ2G64DJMNZZDAVEOR4XAZNEM5UXG5FFOZQWY5LFVEYTCNBWG44TAMBRU52HE2LHM5SXFJTDOJSWC5DF> . You are receiving this email because you commented on the thread. Triage notifications on the go with GitHub Mobile for iOS <https://apps.apple.com/app/apple-store/id1477376905?ct=notification-email&mt=8&pt=524675> or Android <https://play.google.com/store/apps/details?id=com.github.android&referrer=utm_campaign%3Dnotification-email%26utm_medium%3Demail%26utm_source%3Dgithub> .

chrome

Something must be blocking it from loading them, I'm using a chromium based browser and it works:

chrome

Something must be blocking it from loading them, I'm using a chromium based browser and it works:

It worked fine for today. Idk why maybe there was a load on the GitHub servers.

Is the hyperlink solution support only for flowcharts? (Haven't been able to implement with user journey chart)
+1

Can you supoprt img tag for rendering the external image?