howard/hamacs
howard/hamacs
1
1
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Added Mermaid diagram support

Browse source 
Work is using Hugo and this is a big partl
This commit is contained in:
Howard Abrams 2024-10-19 13:41:06 -07:00
parent 06643aa146
commit bc06c77df5
2 changed files with 36 additions and 6 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

12
ha-org-pikchr-01.svg
View file

@ -1,9 +1,9 @@
<svg xmlns='http://www.w3.org/2000/svg' class="pikchr" viewBox="0 0 260.64 76.32">
<path d="M2.16,38.16L74.16,38.16" style="fill:none;stroke-width:2.16;stroke:rgb(255,255,255);" />
<path d="M74.16,74.16L182.16,74.16L182.16,2.16L74.16,2.16Z" style="fill:none;stroke-width:2.16;stroke:rgb(255,255,255);" />
<text x="128.16" y="28.08" text-anchor="middle" fill="rgb(255,255,255)" dominant-baseline="central">Hello,</text>
<text x="128.16" y="48.24" text-anchor="middle" fill="rgb(255,255,255)" dominant-baseline="central">World!</text>
<polygon points="254.16,38.16 242.64,42.48 242.64,33.84" style="fill:rgb(255,255,255)"/>
<path d="M182.16,38.16L248.4,38.16" style="fill:none;stroke-width:2.16;stroke:rgb(255,255,255);" />
<path d="M2.16,38.16L74.16,38.16" style="fill:none;stroke-width:2.16;stroke:rgb(238,238,238);" />
<path d="M74.16,74.16L182.16,74.16L182.16,2.16L74.16,2.16Z" style="fill:none;stroke-width:2.16;stroke:rgb(238,238,238);" />
<text x="128.16" y="28.08" text-anchor="middle" fill="rgb(238,238,238)" dominant-baseline="central">Hello,</text>
<text x="128.16" y="48.24" text-anchor="middle" fill="rgb(238,238,238)" dominant-baseline="central">World!</text>
<polygon points="254.16,38.16 242.64,42.48 242.64,33.84" style="fill:rgb(238,238,238)"/>
<path d="M182.16,38.16L248.4,38.16" style="fill:none;stroke-width:2.16;stroke:rgb(238,238,238);" />
</svg>

Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 733 B

After

Width:  |  Height:  |  Size: 733 B

30
ha-org.org
View file

@ -586,7 +586,37 @@ And this example shows off the syntax colorization:
For the results:
#+ATTR_HTML: :width 300 :background white
[[file:ha-org-pikchr-02.svg]]
*** Mermaid
At work, I’ve been integrating [[https://mermaidjs.github.io/][Mermaid]] into our documentation, =foobar=.
Assuming we have installed the [[https://github.com/mermaid-js/mermaid-cli][Mermaid CLI]]:
#+BEGIN_SRC sh
npm install -g @mermaid-js/mermaid-cli
#+END_SRC
We edit the code with [[https://github.com/abrochard/mermaid-mode][mermaid-mode]]:
#+BEGIN_SRC emacs-lisp
(use-package mermaid-mode
:config
(setq mermaid-mmdc-location "/opt/homebrew/bin/mmdc"))
#+END_SRC
We can make Mermaid diagrams in Emacs Org files using [[https://github.com/arnm/ob-mermaid][ob-mermaid]]:
#+BEGIN_SRC emacs-lisp
(use-package ob-mermaid
:config
(setq ob-mermaid-cli-path "/opt/homebrew/bin/mmdc"))
#+END_SRC
#+BEGIN_SRC mermaid :file ha-org-mermaid.png :theme dark :background-color transparent
sequenceDiagram
A-->B: Works!
#+END_SRC
[[file:ha-org-mermaid.png]]
*** Next Image
When I create images or other artifacts that I consider /part/ of the org document, I want to have them based on the org file, but with a prepended number. Keeping track of what numbers are now free is difficult, so for a /default/ let's figure it out: