From 4c8eb686ab152e422ce4e9254e7294f4a48379fb Mon Sep 17 00:00:00 2001 From: ef3d0c3e Date: Wed, 31 Jul 2024 17:26:27 +0200 Subject: [PATCH] Update docs & Trim latex2svg --- docs/external/graphviz.nml | 301 +++++++++++++++++++++++++++++++++++-- docs/external/latex.nml | 2 + docs/styles/layout.nml | 62 ++++++++ third/latex2svg | 43 +----- 4 files changed, 356 insertions(+), 52 deletions(-) create mode 100644 docs/styles/layout.nml diff --git a/docs/external/graphviz.nml b/docs/external/graphviz.nml index 06a5455..659aa2c 100644 --- a/docs/external/graphviz.nml +++ b/docs/external/graphviz.nml @@ -1,28 +1,31 @@ @import ../template.nml -%% +%% # Graphs from graphviz -[graph] +#+LAYOUT_BEGIN Centered +[graph][width=50%] digraph { bgcolor=transparent; + graph[fontcolor=darkgray]; + node[fontcolor=darkgray]; + edge[fontcolor=darkgray, color=gray90]; - filelist [color=green, label="File List"]; - doclist [color=green, label="Document List"]; + filelist [shape=box, color=orange, label="File List"]; + doclist [shape=box, color=orange, label="Document List"]; iscached [shape=diamond, color=red, label="Cached?"]; - parse [color=white, label=Parse]; - compile [color=white, label=Compile]; - cache [shape=box, color=blue, label=Cache]; + parse [shape=box, color=white, label=Parse]; + compile [shape=box,color=white, label=Compile]; + cache [shape=box, color=orange, label=Cache]; - edge [color=gray] filelist -> iscached; iscached -> cache[dir=both]; - iscached -> doclist[label="+"]; + iscached -> doclist[label="Yes"]; iscached -> parse[label="No"]; parse -> compile; - compile -> cache[label="+"]; - compile -> doclist[label="+"]; + compile -> cache[label=""]; + compile -> doclist[label=""]; buildnav [color=white, label="Build Navigation"]; doclist -> buildnav; @@ -30,3 +33,279 @@ digraph { buildnav -> output; } [/graph] +#+LAYOUT_END + +Graphs blocks are delimited by `` [graph]...[/graph]`` + +# Properties + * ``layout`` The layout engine, defaults to `dot` + see [Graphviz's documentation](https://graphviz.org/docs/layouts/), allowed values: + *- `[dot](https://graphviz.org/docs/layouts/dot/)` + *- `[neato](https://graphviz.org/docs/layouts/neato/)` + *- `[fdp](https://graphviz.org/docs/layouts/fdp/)` + *- `[sfdp](https://graphviz.org/docs/layouts/sfdp/)` + *- `[circo](https://graphviz.org/docs/layouts/circo/)` + *- `[twopi](https://graphviz.org/docs/layouts/twopi/)` + *- `[osage](https://graphviz.org/docs/layouts/osage/)` + *- `[patchwork](https://graphviz.org/docs/layouts/patchwork/)` + * ``width`` The resulting svg's width property, defaults to `100%` + +# Examples + + + +#+LAYOUT_BEGIN[style=flex:0.33] Split +[graph] +digraph UML_Class_diagram { + bgcolor=transparent; + graph[fontcolor=darkgray]; + node[fontcolor=darkgray]; + edge[fontcolor=darkgray, color=gray90]; + graph [ + label="UML Class diagram demo" + labelloc="t" + fontname="Helvetica,Arial,sans-serif" + ] + node [ + fontname="Helvetica,Arial,sans-serif" + shape=record + style=filled + fillcolor=gray95 + ] + edge [fontname="Helvetica,Arial,sans-serif"] + edge [arrowhead=vee style=dashed] + Client -> Interface1 [label=dependency] + Client -> Interface2 + + edge [dir=back arrowtail=empty style=""] + Interface1 -> Class1 [xlabel=inheritance] + Interface2 -> Class1 [dir=none] + Interface2 [label="" xlabel="Simple\ninterface" shape=circle] + + Interface1[label = <{«interface» I/O | + property
...
|+ method
...
}>] + Class1[label = <{I/O class | + property
...
|+ method
...
}>] + edge [dir=back arrowtail=empty style=dashed] + Class1 -> System_1 [label=implementation] + System_1 [ + shape=plain + label=< + + + +
System
+ + + + + + +
+ property
- Subsystem 1
- Subsystem 2
- Subsystem 3
...
+
+ method
...
> + ] + + edge [dir=back arrowtail=diamond] + System_1:ss1 -> Subsystem_1 [xlabel="composition"] + + Subsystem_1 [ + shape=plain + label=< + + + +
Subsystem 1
+ + + + +
+ property
- resource
...
+
+ + method
+ ...
+
> + ] + Subsystem_2 [ + shape=plain + label=< + + + +
Subsystem 2
+ + + + +
+ property
- resource
...
+
+ + method
+ ...
+
> + ] + Subsystem_3 [ + shape=plain + label=< + + + +
Subsystem 3
+ + + + +
+ property
- resource
...
+
+ + method
+ ...
+
> + ] + System_1:ss2 -> Subsystem_2; + System_1:ss3 -> Subsystem_3; + + edge [xdir=back arrowtail=odiamond] + Subsystem_1:r1 -> "Shared resource" [label=aggregation] + Subsystem_2:r1 -> "Shared resource" + Subsystem_3:r1 -> "Shared resource" + "Shared resource" [ + label = <{ + Shared resource + | + + property
+ ...
+ | + + method
+ ...
+ }> + ] +} +[/graph] +#+LAYOUT_NEXT[style=flex:0.66] +Generated by the following code: +`` +[graph] +digraph UML_Class_diagram { + bgcolor=transparent; + graph[fontcolor=darkgray]; + node[fontcolor=darkgray]; + edge[fontcolor=darkgray, color=gray90]; + graph [ + label="UML Class diagram demo" + labelloc="t" + fontname="Helvetica,Arial,sans-serif" + ] + node [ + fontname="Helvetica,Arial,sans-serif" + shape=record + style=filled + fillcolor=gray95 + ] + edge [fontname="Helvetica,Arial,sans-serif"] + edge [arrowhead=vee style=dashed] + Client -> Interface1 [label=dependency] + Client -> Interface2 + + edge [dir=back arrowtail=empty style=""] + Interface1 -> Class1 [xlabel=inheritance] + Interface2 -> Class1 [dir=none] + Interface2 [label="" xlabel="Simple\ninterface" shape=circle] + + Interface1[label = <{«interface» I/O | + property
...
|+ method
...
}>] + Class1[label = <{I/O class | + property
...
|+ method
...
}>] + edge [dir=back arrowtail=empty style=dashed] + Class1 -> System_1 [label=implementation] + System_1 [ + shape=plain + label=< + + + +
System
+ + + + + + +
+ property
- Subsystem 1
- Subsystem 2
- Subsystem 3
...
+
+ method
...
> + ] + + edge [dir=back arrowtail=diamond] + System_1:ss1 -> Subsystem_1 [xlabel="composition"] + + Subsystem_1 [ + shape=plain + label=< + + + +
Subsystem 1
+ + + + +
+ property
- resource
...
+
+ + method
+ ...
+
> + ] + Subsystem_2 [ + shape=plain + label=< + + + +
Subsystem 2
+ + + + +
+ property
- resource
...
+
+ + method
+ ...
+
> + ] + Subsystem_3 [ + shape=plain + label=< + + + +
Subsystem 3
+ + + + +
+ property
- resource
...
+
+ + method
+ ...
+
> + ] + System_1:ss2 -> Subsystem_2; + System_1:ss3 -> Subsystem_3; + + edge [xdir=back arrowtail=odiamond] + Subsystem_1:r1 -> "Shared resource" [label=aggregation] + Subsystem_2:r1 -> "Shared resource" + Subsystem_3:r1 -> "Shared resource" + "Shared resource" [ + label = <{ + Shared resource + | + + property
+ ...
+ | + + method
+ ...
+ }> + ] +} +[/graph] +`` +#+LAYOUT_END + +# Graphiz cache + +Rendered Graphviz graphs that have been rendered to **svg** are stored in the cache database, under table ``cached_dot``. +Unless you modify the graph or it's properties, it won't be rendered again, instead it will be sourced from the database. diff --git a/docs/external/latex.nml b/docs/external/latex.nml index ee8e586..a1e2e4d 100644 --- a/docs/external/latex.nml +++ b/docs/external/latex.nml @@ -41,6 +41,7 @@ $|\begin{tikzpicture} `` Gives the following: +#+LAYOUT_BEGIN Centered $|\begin{tikzpicture} \begin{axis} \addplot3[patch,patch refines=3, @@ -61,6 +62,7 @@ $|\begin{tikzpicture} }; \end{axis} \end{tikzpicture}|$ +#+LAYOUT_END # LaTeX environment diff --git a/docs/styles/layout.nml b/docs/styles/layout.nml new file mode 100644 index 0000000..8104100 --- /dev/null +++ b/docs/styles/layout.nml @@ -0,0 +1,62 @@ +@import ../template.nml +%% + +# Layouts + +You can create layout blocks by using the following tokens: + * ``#+LAYOUT_BEGIN `` Starts layout `` + * ``#+LAYOUT_NEXT`` Advances layout to the next block + * ``#+LAYOUT_END`` Ends last created layout + +Here's an example of what you can do using layouts (with flashy colors for show): +#+LAYOUT_BEGIN[style=background-color:#F00;flex:0.5] Split +First + #+LAYOUT_BEGIN[style=background-color:#FF0] Centered + Second + #+LAYOUT_END +#+LAYOUT_NEXT[style=background-color:#00F] + Third + #+LAYOUT_BEGIN[style=background-color:#0FF] Split + Fourth + #+LAYOUT_NEXT[style=background-color:#0F0] + Fifth + #+LAYOUT_END +#+LAYOUT_END + +Given by the following code: +```Plain Text +#+LAYOUT_BEGIN[style=background-color:#F00;flex:0.5] Split +First + #+LAYOUT_BEGIN[style=background-color:#FF0] Centered + Second + #+LAYOUT_END +#+LAYOUT_NEXT[style=background-color:#00F] + Third + #+LAYOUT_BEGIN[style=background-color:#0FF] Split + Fourth + #+LAYOUT_NEXT[style=background-color:#0F0] + Fifth + #+LAYOUT_END +#+LAYOUT_END +``` +*(indentation is for readability)* + +# Available layouts +## Centered + +Centered layout align text to the center of the current block. + +#### Style +The ``Centered`` layout uses the `.centered` css class to center the text. + +#### Properties + * ``style`` Added css style to the div (defaults to none) + +## Split + +#### Style +The ``Split`` layout uses the `.split-container` and `.split` css class to create the desired layout. +If you wish to modify the relative width of the splits: add `style=flex: 0.5` in the properties, this makes the following split half the width of the other splits. + +#### Properties + * ``style`` Added css style to the div (defaults to none) diff --git a/third/latex2svg b/third/latex2svg index 2a7c377..f900a21 100755 --- a/third/latex2svg +++ b/third/latex2svg @@ -1,5 +1,7 @@ #!/usr/bin/env python3 """latex2svg +-- This version of latex2svg comes with NML and has been modified to work with it only -- +-- The original version can be found here : https://github.com/Moonbase59/latex2svg -- Read LaTeX code from stdin and render a SVG using LaTeX, dvisvgm and svgo. @@ -23,38 +25,6 @@ import re from tempfile import TemporaryDirectory from ctypes.util import find_library -default_template = r""" -\documentclass[{{ fontsize }}pt,preview]{standalone} -{{ preamble }} -\begin{document} -\begin{preview} -{{ code }} -\end{preview} -\end{document} -""" - -default_preamble = r""" -\usepackage[utf8x]{inputenc} -\usepackage{amsmath} -\usepackage{amsfonts} -\usepackage{amssymb} -\usepackage{amstext} -\usepackage{newtxtext} -\usepackage[libertine]{newtxmath} -% prevent errors from old font commands -\DeclareOldFontCommand{\rm}{\normalfont\rmfamily}{\mathrm} -\DeclareOldFontCommand{\sf}{\normalfont\sffamily}{\mathsf} -\DeclareOldFontCommand{\tt}{\normalfont\ttfamily}{\mathtt} -\DeclareOldFontCommand{\bf}{\normalfont\bfseries}{\mathbf} -\DeclareOldFontCommand{\it}{\normalfont\itshape}{\mathit} -\DeclareOldFontCommand{\sl}{\normalfont\slshape}{\@nomath\sl} -\DeclareOldFontCommand{\sc}{\normalfont\scshape}{\@nomath\sc} -% prevent errors from undefined shortcuts -\newcommand{\N}{\mathbb{N}} -\newcommand{\R}{\mathbb{R}} -\newcommand{\Z}{\mathbb{Z}} -""" - default_svgo_config = r""" module.exports = { plugins: [ @@ -84,8 +54,6 @@ svgo_cmd = 'svgo' default_params = { 'fontsize': 12, # TeX pt - 'template': default_template, - 'preamble': default_preamble, 'latex_cmd': latex_cmd, 'dvisvgm_cmd': dvisvgm_cmd, 'svgo_cmd': svgo_cmd, @@ -237,22 +205,15 @@ def main(): """) parser.add_argument('--version', action='version', version='%(prog)s {version}'.format(version=__version__)) - parser.add_argument('--preamble', - help="LaTeX preamble code to read from file") parser.add_argument('--fontsize', help="LaTeX fontsize in pt") args = parser.parse_args() - preamble = default_preamble - if args.preamble is not None: - with open(args.preamble) as f: - preamble = f.read() fontsize = 12 if args.fontsize is not None: fontsize = int(args.fontsize) latex = sys.stdin.read() try: params = default_params.copy() - params['preamble'] = preamble params['fontsize'] = fontsize out = latex2svg(latex, params) sys.stdout.write(out['svg'])