<?xml version="1.0" encoding="utf-8"?>
<?xml-stylesheet type="text/xsl" href="../assets/xml/rss.xsl" media="all"?><rss version="2.0" xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:atom="http://www.w3.org/2005/Atom"><channel><title>notroot (Posts about diagrams)</title><link>https://blog.notroot.online/</link><description></description><atom:link href="https://blog.notroot.online/categories/diagrams.xml" rel="self" type="application/rss+xml"></atom:link><language>en</language><copyright>Contents © 2024 &lt;a href="mailto:notroot@notroot.online"&gt;Notroot&lt;/a&gt; </copyright><lastBuildDate>Wed, 01 May 2024 22:18:39 GMT</lastBuildDate><generator>Nikola (getnikola.com)</generator><docs>http://blogs.law.harvard.edu/tech/rss</docs><item><title>Blogging with Emacs: Plots and Diagrams</title><link>https://blog.notroot.online/posts/blogging-with-emacs%3A-bells-and-whistles/</link><dc:creator>Notroot</dc:creator><description>&lt;p&gt;
Continuing my very-meta habit of blogging about how I'm blogging, and not much else… I give you: "Bells and Whistles," perhaps better titled, "More of the Same".
&lt;/p&gt;

&lt;p&gt;
In Emacs Org Mode, there are many ways to plot and diagram, and even draw (it's terrible, don't bother). Let's see if we can get some working with my Nikola-based blogging solution.
&lt;/p&gt;

&lt;div id="outline-container-org7b74ec5" class="outline-2"&gt;
&lt;h2 id="org7b74ec5"&gt;Plotting Charts&lt;/h2&gt;
&lt;div class="outline-text-2" id="text-org7b74ec5"&gt;
&lt;p&gt;
This example is from Org Mode's &lt;a href="https://orgmode.org/worg/org-contrib/babel/languages/ob-doc-python.html"&gt;official documentation&lt;/a&gt;, though I've changed the output path for Nikola building.
&lt;/p&gt;

&lt;p&gt;
First I'll activate a Python &lt;code&gt;venv&lt;/code&gt; with &lt;code&gt;matplotlib&lt;/code&gt; pre-installed
&lt;/p&gt;

&lt;div class="highlight"&gt;&lt;pre&gt;&lt;span&gt;&lt;/span&gt;&lt;span class="kn"&gt;import&lt;/span&gt; &lt;span class="nn"&gt;matplotlib&lt;/span&gt;
&lt;span class="kn"&gt;import&lt;/span&gt; &lt;span class="nn"&gt;matplotlib.pyplot&lt;/span&gt; &lt;span class="k"&gt;as&lt;/span&gt; &lt;span class="nn"&gt;plt&lt;/span&gt;
&lt;span class="n"&gt;fig&lt;/span&gt;&lt;span class="o"&gt;=&lt;/span&gt;&lt;span class="n"&gt;plt&lt;/span&gt;&lt;span class="o"&gt;.&lt;/span&gt;&lt;span class="n"&gt;figure&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="n"&gt;figsize&lt;/span&gt;&lt;span class="o"&gt;=&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="mi"&gt;3&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;&lt;span class="mi"&gt;2&lt;/span&gt;&lt;span class="p"&gt;))&lt;/span&gt;
&lt;span class="n"&gt;plt&lt;/span&gt;&lt;span class="o"&gt;.&lt;/span&gt;&lt;span class="n"&gt;plot&lt;/span&gt;&lt;span class="p"&gt;([&lt;/span&gt;&lt;span class="mi"&gt;1&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;&lt;span class="mi"&gt;3&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;&lt;span class="mi"&gt;2&lt;/span&gt;&lt;span class="p"&gt;])&lt;/span&gt;
&lt;span class="n"&gt;fig&lt;/span&gt;&lt;span class="o"&gt;.&lt;/span&gt;&lt;span class="n"&gt;tight_layout&lt;/span&gt;&lt;span class="p"&gt;()&lt;/span&gt;

&lt;span class="n"&gt;fname&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="s1"&gt;'../images/myfig.png'&lt;/span&gt;
&lt;span class="n"&gt;plt&lt;/span&gt;&lt;span class="o"&gt;.&lt;/span&gt;&lt;span class="n"&gt;savefig&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="n"&gt;fname&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt;
&lt;span class="c1"&gt;# fname[1:] # return this to org-mode&lt;/span&gt;
&lt;/pre&gt;&lt;/div&gt;

&lt;p&gt;
Then make an HTML link (on Org export) into &lt;code&gt;images&lt;/code&gt;, like this:
&lt;/p&gt;

&lt;pre class="example" id="org6e44a8d"&gt;
[[./images/myfig.png]]
&lt;/pre&gt;

&lt;p&gt;
Which will then display the image after Nikola builds, like this:
&lt;/p&gt;


&lt;div id="orge7df8ab" class="figure"&gt;
&lt;p&gt;&lt;img src="https://blog.notroot.online/images/myfig.png" alt="nil"&gt;
&lt;/p&gt;
&lt;/div&gt;

&lt;p&gt;
Voila! We plotted a chart! If I change the Python code, and re-build, I'll get a different chart.
&lt;/p&gt;
&lt;/div&gt;
&lt;/div&gt;

&lt;div id="outline-container-org3826789" class="outline-2"&gt;
&lt;h2 id="org3826789"&gt;Diagramming&lt;/h2&gt;
&lt;div class="outline-text-2" id="text-org3826789"&gt;
&lt;p&gt;
Diagrams are different from plots and charts. They aren't strictly mathematical. Instead, we need to look to other possible solutions.
&lt;/p&gt;

&lt;p&gt;
Emacs package sources offer several options, but the one I have experience with is &lt;a href="https://ditaa.sourceforge.net/"&gt;ditaa&lt;/a&gt;.
&lt;/p&gt;

&lt;div class="highlight"&gt;&lt;pre&gt;&lt;span&gt;&lt;/span&gt;+--------+   +-------+    +-------+
|        | --+ ditaa +--&amp;gt; |       |
|  Text  |   +-------+    |diagram|
|Document|   |!magic!|    |       |
|     {d}|   |       |    |       |
+---+----+   +-------+    +-------+
    :                         ^
    |       Lots of work      |
    +-------------------------+
&lt;/pre&gt;&lt;/div&gt;

&lt;p&gt;
Then make an HTML link like before:
&lt;/p&gt;


&lt;div id="org32f77ab" class="figure"&gt;
&lt;p&gt;&lt;img src="https://blog.notroot.online/images/ditaa.png" alt="nil"&gt;
&lt;/p&gt;
&lt;/div&gt;

&lt;p&gt;
Voila! We made a diagram!
&lt;/p&gt;
&lt;/div&gt;
&lt;/div&gt;

&lt;div id="outline-container-org1b5ad41" class="outline-2"&gt;
&lt;h2 id="org1b5ad41"&gt;Conclusion&lt;/h2&gt;
&lt;div class="outline-text-2" id="text-org1b5ad41"&gt;
&lt;p&gt;
I also tried including LaTeX equations and inline LaTeX, to no avail. Even with the default MathJax, it seems that Nikola does not do a pure Emacs Org Mode export to HTML, and I was unable to get LaTeX working.
&lt;/p&gt;

&lt;p&gt;
Which brings up the point I'd like to conclude with:
&lt;/p&gt;

&lt;p&gt;
Nikola + Org Mode is a workable solution that lets us use most Org Mode features out-of-the-box, like tables, executable code blocks, and the like.
&lt;/p&gt;

&lt;p&gt;
However, when it comes to bells and whistles, it falls a little short of pure Org Mode HTML export.
&lt;/p&gt;

&lt;ul class="org-ul"&gt;
&lt;li&gt;Having to create a separate HTML link for an image is annoying, but Nikola makes so much else easier that I can probably overlook it. If I was doing a pure Org Mode export, Emacs would create the image link for me.&lt;/li&gt;
&lt;li&gt;The &lt;code&gt;ditaa&lt;/code&gt; integration was awkward, at best. I basically had to do an Org Mode HTML export to the &lt;code&gt;../images&lt;/code&gt; directory, then add an HTML link. If it was pure Org Mode export, Emacs would create the image link for me.&lt;/li&gt;
&lt;li&gt;No Emacs-based LaTeX. In fact, I couldn't get LaTeX to display at all! Even after I added the &lt;code&gt;mathjax&lt;/code&gt; tag to the post's meta file, as described in the Nikola Handbook.&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;
For now, I'll keep using Nikola, but my next iteration of this blog might be pure Org Mode, with HTML templates.
&lt;/p&gt;
&lt;/div&gt;
&lt;/div&gt;</description><category>blog</category><category>diagrams</category><category>emacs</category><category>org-mode</category><category>plots</category><guid>https://blog.notroot.online/posts/blogging-with-emacs%3A-bells-and-whistles/</guid><pubDate>Wed, 01 May 2024 00:39:09 GMT</pubDate></item></channel></rss>