Skip to content

Instantly share code, notes, and snippets.

@wzulfikar

wzulfikar/Default.handlebars

Last active March 27, 2026 03:26
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save wzulfikar/df4a83eba6910e2d804e2f69c5804938 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save wzulfikar/df4a83eba6910e2d804e2f69c5804938 to your computer and use it in GitHub Desktop.
Download ZIP
MacDown template that support mermaid diagram (http://knsv.github.io/mermaid/index.html). Save this snippet as `Default.handlebars` in `/Applications/MacDown.app/Contents/Resources/Templates/`
Raw
Default.handlebars
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes">
{{{ titleTag }}}
{{#each styleTags }}
{{{ this }}}
{{/each }}
<!-- link to mermaid css -->
<link rel="stylesheet" type="text/css" href="/Volumes/data/archive/tools/mermaid-macdown/mermaid.css">
</head>
<body>
{{{ body }}}
{{#each scriptTags }}
{{{ this }}}
{{/each }}
<!-- link to mermaid js -->
<script src="/Volumes/data/archive/tools/mermaid-macdown/mermaid.min.js"></script>
<script>
!function(){
var uml,containerElement,
umlElement=document.querySelector(".language-mermaid-uml");
while(umlElement){
uml=umlElement.innerHTML;
containerElement = umlElement.parentNode.parentNode;
containerElement.className = "mermaid";
containerElement.innerHTML=uml;
umlElement=document.querySelector(".language-mermaid-uml");
}
}();
mermaid.initialize({startOnLoad:true});
/**
* use `mermaid-uml` as codeblock language.
* eg:
* ```mermaid-uml
* graph TD;
* A-->B;
* A-->C;
* B-->D;
* C-->D;
* ```
*
* ```mermaid-uml
* sequenceDiagram
* participant Alice
* Alice->John: Hello John, how are you?
* ```
*/
</script>
</body>
</html>
@yemM
Copy link
Copy Markdown

yemM commented May 27, 2021

Works like a charm thank you.

@janstieler
Copy link
Copy Markdown

janstieler commented Mar 27, 2026 •
edited
Loading

Hi,
@yemM how has you get it to work?
And where should be teh mermaid css file saved? There is no volume folder inside the app.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment