New mermaid diagrams mode: `inline`

[ryepup]

Allows basic interaction to work by rendering <svg> tags directly

refs #23

[jeffreytse]

Hi @ryepup

Thank you for your issue and PR, I think you want a svg image for the html page, right? Currently I prefer to automatically process svg image by processor. And the mode option is for the image pre-fetching or not.

Thanks and regards.

[ryepup]

The goal of this PR is to add a mode option to directly output the <svg> tags.

For example, this markdown:

# Test

```mermaid!
graph TD
  a[jekyll-spaceship]
  click a "https://github.com/jeffreytse/jekyll-spaceship" "view on github"
```

would get rendered to HTML like

<h1>Test</h1>

<svg id="mermaid-svg" width="151" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" height="54" viewBox="0 0 151 54"><style>#mermaid-svg{font-family:"trebuchet ms",verdana,arial;font-size:16px;fill:#333;}#mermaid-svg .error-icon{fill:#552222;}#mermaid-svg .error-text{fill:#552222;stroke:#552222;}#mermaid-svg .edge-thickness-normal{stroke-width:2px;}#mermaid-svg .edge-thickness-thick{stroke-width:3.5px;}#mermaid-svg .edge-pattern-solid{stroke-dasharray:0;}#mermaid-svg .edge-pattern-dashed{stroke-dasharray:3;}#mermaid-svg .edge-pattern-dotted{stroke-dasharray:2;}#mermaid-svg .marker{fill:#333333;}#mermaid-svg .marker.cross{stroke:#333333;}#mermaid-svg svg{font-family:"trebuchet ms",verdana,arial;font-size:16px;}#mermaid-svg .label{font-family:"trebuchet ms",verdana,arial;color:#333;}#mermaid-svg .label text{fill:#333;}#mermaid-svg .node rect,#mermaid-svg .node circle,#mermaid-svg .node ellipse,#mermaid-svg .node polygon,#mermaid-svg .node path{fill:#ECECFF;stroke:#9370DB;stroke-width:1px;}#mermaid-svg .node .label{text-align:center;}#mermaid-svg .node.clickable{cursor:pointer;}#mermaid-svg .arrowheadPath{fill:#333333;}#mermaid-svg .edgePath .path{stroke:#333333;stroke-width:1.5px;}#mermaid-svg .flowchart-link{stroke:#333333;fill:none;}#mermaid-svg .edgeLabel{background-color:#e8e8e8;text-align:center;}#mermaid-svg .edgeLabel rect{opacity:0.5;background-color:#e8e8e8;fill:#e8e8e8;}#mermaid-svg .cluster rect{fill:#ffffde;stroke:#aaaa33;stroke-width:1px;}#mermaid-svg .cluster text{fill:#333;}#mermaid-svg div.mermaidTooltip{position:absolute;text-align:center;max-width:200px;padding:2px;font-family:"trebuchet ms",verdana,arial;font-size:12px;background:hsl(80,100%,96.2745098039%);border:1px solid #aaaa33;border-radius:2px;pointer-events:none;z-index:100;}#mermaid-svg:root{--mermaid-font-family:"trebuchet ms",verdana,arial;}#mermaid-svg flowchart{fill:apa;}</style><g><g class="output"><g class="clusters"></g><g class="edgePaths"></g><g class="edgeLabels"></g><g class="nodes"><g class="node clickable" id="a" transform="translate(75.5,27)" title="view on github" style="opacity: 1;"><a class="clickable" href="https://github.com/jeffreytse/jekyll-spaceship" rel="noopener"><rect rx="0" ry="0" x="-67.5" y="-19" width="135" height="38" class="label-container"></rect><g class="label" transform="translate(0,0)"><g transform="translate(-57.5,-9)"><foreignObject width="115" height="18"><div xmlns="http://www.w3.org/1999/xhtml" style="display: inline-block; white-space: nowrap;">jekyll-spaceship</div></foreignObject></g></g></a></g></g></g></g></svg>

With that HTML output, the links embedded inside the <svg> work as expected.

[jeffreytse]

Hi @ryepup

Sure, this commit e1a5bf7 has the features for auto parsing the SVG object for diagrams (PlantUML/Mermaid).

Thanks and regards.

[ryepup]

thanks! e1a5bf7 handles my use case perfectly!

[jeffreytse]

Hi @ryepup

🎉 Thanks for your good issue and PR, I hope you would like to use this Jekyll plugin. The latest gem version v0.9.2 has been released. And this version including the SVG image object feature for diagrams.

Thanks and regards.