Add more example

zuisong · Sep 26, 2023 · 3be2da7 · 3be2da7
1 parent f7b56d6
commit 3be2da7
Show file tree

Hide file tree

Showing 9 changed files with 307 additions and 4 deletions.
diff --git a/docs/README.md b/docs/README.md
@@ -20,6 +20,14 @@
 
 ---
 
+### tikz
+
+[](langs/tikz.md ':include :type=code md')
+
+[](langs/tikz.md ':include')
+
+---
+
 ### mermaid
 
 [](langs/mermaid.md ':include :type=code md')
@@ -84,6 +92,46 @@
 
 ---
 
+### d2
+
+[](langs/d2.md ':include :type=code md')
+
+[](langs/d2.md ':include')
+
+---
+
+### dbml
+
+[](langs/dbml.md ':include :type=code md')
+
+[](langs/dbml.md ':include')
+
+---
+
+### structurizr
+
+[](langs/structurizr.md ':include :type=code md')
+
+[](langs/structurizr.md ':include')
+
+---
+
+### symbolator
+
+[](langs/symbolator.md ':include :type=code md')
+
+[](langs/symbolator.md ':include')
+
+---
+
+### wireviz
+
+[](langs/wireviz.md ':include :type=code md')
+
+[](langs/wireviz.md ':include')
+
+---
+
 ### c4plantuml
 
 [](langs/c4plantuml.md ':include :type=code md')

diff --git a/docs/index.html b/docs/index.html
@@ -5,26 +5,62 @@
     <meta charset="UTF-8">
     <title>Docsify-Kroki Example</title>
     <meta name="viewport"
-          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"/>
-    <link rel="stylesheet" href="//unpkg.com/docsify/lib/themes/vue.css"/>
+        content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0" />
+    <link rel="stylesheet" href="//unpkg.com/docsify/lib/themes/vue.css" />
 </head>
 
 <body>
-<div id="app"></div>
+    <div id="app"></div>
 </body>
 
 <!-- docsify -->
 <script>
     window.$docsify = {
         kroki: {
+            langs: [
+                "actdiag",
+                "blockdiag",
+                "bpmn",
+                "bytefield",
+                "c4plantuml",
+                "d2",
+                "dbml",
+                "ditaa",
+                "erd",
+                "excalidraw",
+                "graphviz",
+                "mermaid",
+                "nomnoml",
+                "nwdiag",
+                "packetdiag",
+                "pikchr",
+                "plantuml",
+                "rackdiag",
+                "seqdiag",
+                "structurizr",
+                "svgbob",
+                "symbolator",
+                "tikz",
+                "vega",
+                "vegalite",
+                "wavedrom",
+                "wireviz",
+            ],
             // put your config here
         },
+        hideCode: {
+            scroll: false, // Enable scrolling
+            height: 300 // Max height
+        }
     }
 </script>
 <script src="//unpkg.com/docsify"></script>
 
 <!-- plugins -->
+<script src="//unpkg.com/docsify-copy-code@2"></script>
+<script src="//unpkg.com/docsify-hide-code"></script>
+
 <script src="//unpkg.com/docsify-kroki"></script>
 <!-- <script src="../dist/docsify-kroki.js"></script> -->
 
-</html>
+</html>
diff --git a/docs/langs/d2.md b/docs/langs/d2.md
@@ -0,0 +1,24 @@
+```d2
+D2 Parser: {
+  shape: class
+
+  # Default visibility is + so no need to specify.
+  +reader: io.RuneReader
+  readerPos: d2ast.Position
+
+  # Private field.
+  -lookahead: "[]rune"
+
+  # Protected field.
+  # We have to escape the # to prevent the line from being parsed as a comment.
+  \#lookaheadPos: d2ast.Position
+
+  +peek(): (r rune, eof bool)
+  rewind()
+  commit()
+
+  \#peekn(n int): (s string, eof bool)
+}
+
+"github.com/terrastruct/d2parser.git" -> D2 Parser
+```
diff --git a/docs/langs/dbml.md b/docs/langs/dbml.md
@@ -0,0 +1,25 @@
+```dbml
+Table users {
+  id integer
+  username varchar
+  role varchar
+  created_at timestamp
+}
+
+Table posts {
+  id integer [primary key]
+  title varchar
+  body text [note: 'Content of the post']
+  user_id integer
+  status post_status
+  created_at timestamp
+}
+
+Enum post_status {
+  draft
+  published
+  private [note: 'visible via URL only']
+}
+
+Ref: posts.user_id > users.id // many-to-one
+```
diff --git a/docs/langs/structurizr.md b/docs/langs/structurizr.md
@@ -0,0 +1,26 @@
+```structurizr
+workspace {
+    model { 
+        user = person "User" 
+        softwareSystem = softwareSystem "Software System" { 
+            webapp = container "Web Application" { 
+                user -> this "Uses!!!" 
+            } 
+            database = container "Database" { 
+                webapp -> this "Reads from and writes to" 
+            } 
+        } 
+    } 
+    views { 
+        systemContext softwareSystem { 
+            include * 
+            autolayout lr 
+        } 
+        container softwareSystem { 
+            include * 
+            autolayout lr 
+        } 
+        theme default 
+    } 
+}
+```
diff --git a/docs/langs/symbolator.md b/docs/langs/symbolator.md
@@ -0,0 +1,18 @@
+```symbolator
+module demo_device #(
+    //# {{}}
+    parameter SIZE = 8,
+    parameter RESET_ACTIVE_LEVEL = 1
+) (
+    //# {{clocks|Clocking}}
+    input wire clock,
+    //# {{control|Control signals}}
+    input wire reset,
+    input wire enable,
+    //# {{data|Data ports}}
+    input wire [SIZE-1:0] data_in,
+    output wire [SIZE-1:0] data_out
+);
+  // ...
+endmodule
+```
diff --git a/docs/langs/tikz.md b/docs/langs/tikz.md
@@ -0,0 +1,96 @@
+```tikz
+\documentclass{article}
+\usepackage{tikz}
+\usepackage{tikz-3dplot}
+\usetikzlibrary{math}
+\usepackage[active,tightpage]{preview}
+\PreviewEnvironment{tikzpicture}
+\setlength\PreviewBorder{0.125pt}
+%
+% File name: directional-angles.tex
+% Description: 
+% The directional angles of a vector are geometrically represented.
+% 
+% Date of creation: July, 25th, 2021.
+% Date of last modification: October, 9th, 2022.
+% Author: Efra�n Soto Apolinar.
+% https://www.aprendematematicas.org.mx/author/efrain-soto-apolinar/instructing-courses/
+% Source: page 11 of the 
+% Glosario Ilustrado de Matematicas Escolares.
+% https://tinyurl.com/5udm2ufy
+%
+% Terms of use:
+% According to TikZ.net
+% https://creativecommons.org/licenses/by-nc-sa/4.0/
+% Your commitment to the terms of use is greatly appreciated.
+%
+\begin{document}
+  \tdplotsetmaincoords{80}{120}
+  %
+  \begin{tikzpicture}[tdplot_main_coords,scale=0.75] 
+    % Indicate the components of the vector in rectangular coordinates
+    \pgfmathsetmacro{\ux}{4}
+    \pgfmathsetmacro{\uy}{4}
+    \pgfmathsetmacro{\uz}{3}
+    % Length of each axis
+    \pgfmathsetmacro{\ejex}{\ux+0.5}
+    \pgfmathsetmacro{\ejey}{\uy+0.5}
+    \pgfmathsetmacro{\ejez}{\uz+0.5}
+    \pgfmathsetmacro{\umag}{sqrt(\ux*\ux+\uy*\uy+\uz*\uz)} % Magnitude of vector $\vec{u}$
+    % Compute the angle $\theta$
+    \pgfmathsetmacro{\angthetax}{pi*atan(\uy/\ux)/180}
+    \pgfmathsetmacro{\angthetay}{pi*atan(\ux/\uz)/180}
+    \pgfmathsetmacro{\angthetaz}{pi*atan(\uz/\uy)/180}
+    % Compute the angle $\phi$
+    \pgfmathsetmacro{\angphix}{pi*acos(\ux/\umag)/180}
+    \pgfmathsetmacro{\angphiy}{pi*acos(\uy/\umag)/180}
+    \pgfmathsetmacro{\angphiz}{pi*acos(\uz/\umag)/180}
+    % Compute rho sin(phi) to simplify computations
+    \pgfmathsetmacro{\costz}{cos(\angthetax r)}
+    \pgfmathsetmacro{\sintz}{sin(\angthetax r)}
+    \pgfmathsetmacro{\costy}{cos(\angthetay r)}
+    \pgfmathsetmacro{\sinty}{sin(\angthetay r)}
+    \pgfmathsetmacro{\costx}{cos(\angthetaz r)}
+    \pgfmathsetmacro{\sintx}{sin(\angthetaz r)}
+    % Coordinate axis
+    \draw[thick,->] (0,0,0) -- (\ejex,0,0) node[below left] {$x$};
+    \draw[thick,->] (0,0,0) -- (0,\ejey,0) node[right] {$y$};
+    \draw[thick,->] (0,0,0) -- (0,0,\ejez) node[above] {$z$};
+    % Projections of the components in the axis
+    \draw[gray,very thin,opacity=0.5] (0,0,0) -- (\ux,0,0) -- (\ux,\uy,0) -- (0,\uy,0) -- (0,0,0);	% face on the plane z = 0
+    \draw[gray,very thin,opacity=0.5] (0,0,\uz) -- (\ux,0,\uz) -- (\ux,\uy,\uz) -- (0,\uy,\uz) -- (0,0,\uz);	% face on the plane z = \uz
+    \draw[gray,very thin,opacity=0.5] (0,0,0) -- (0,0,\uz) -- (\ux,0,\uz) -- (\ux,0,0) -- (0,0,0);	% face on the plane y = 0
+    \draw[gray,very thin,opacity=0.5] (0,\uy,0) -- (0,\uy,\uz) -- (\ux,\uy,\uz) -- (\ux,\uy,0) -- (0,\uy,0);	% face on the plane y = \uy
+    \draw[gray,very thin,opacity=0.5] (0,0,0) -- (0,\uy,0) -- (0,\uy,\uz) -- (0,0,\uz) -- (0,0,0); % face on the plane x = 0
+    \draw[gray,very thin,opacity=0.5] (\ux,0,0) -- (\ux,\uy,0) -- (\ux,\uy,\uz) -- (\ux,0,\uz) -- (\ux,0,0); % face on the plane x = \ux
+    % Arc indicating the angle $\alpha$
+    % (angle formed by the vector $\vec{v}$ and the $x$ axis)
+    \draw[red,thick] plot[domain=0:\angphix,smooth,variable=\t] ({cos(\t r)},{sin(\t r)*\costx},{sin(\t r)*\sintx});
+    % Arc indicating the angle $\beta$
+    % (angle formed by the vector $\vec{v}$ and the $y$ axis)
+    \draw[red,thick] plot[domain=0:\angphiy,smooth,variable=\t] ({sin(\t r)*\sinty},{cos(\t r)},{sin(\t r)*\costy});
+    % Arc indicating the angle $\gamma$
+    % (angle formed by the vector $\vec{v}$ and the $z$ axis)
+    \draw[red,thick] plot[domain=0:\angphiz,smooth,variable=\t] ({sin(\t r)*\costz},{sin(\t r)*\sintz},{cos(\t r)});
+    % Vector $\vec{u}$
+    \draw[blue,thick,->] (0,0,0) -- (\ux,\uy,\uz) node [below right] {$\vec{u}$};
+    % Nodes indicating the direction angles
+    \pgfmathsetmacro{\xa}{1.85*cos(0.5*\angphix r)}
+    \pgfmathsetmacro{\ya}{1.85*sin(0.5*\angphix r)*\costx}
+    \pgfmathsetmacro{\za}{1.85*sin(0.5*\angphiz r)*\sintx}
+    \node[red] at (\xa,\ya,\za) {\footnotesize$\alpha$};
+    %
+    \pgfmathsetmacro{\xb}{1.5*sin(0.5*\angphiy r)*\sinty}
+    \pgfmathsetmacro{\yb}{1.5*cos(0.5*\angphiy r)}
+    \pgfmathsetmacro{\zb}{1.5*sin(0.5*\angphiy r)*\costy}
+    \node[red] at (\xb,\yb,\zb) {\footnotesize$\beta$};
+    %
+    \pgfmathsetmacro{\xc}{1.5*sin(0.5*\angphiz r)*\costz}
+    \pgfmathsetmacro{\yc}{1.5*sin(0.5*\angphiz r)*\sintz}
+    \pgfmathsetmacro{\zc}{1.5*cos(0.5*\angphiz r)}
+    \node[red] at (\xc,\yc,\zc) {\footnotesize$\gamma$};
+    %
+  \end{tikzpicture}
+  %
+\end{document}
+```
diff --git a/docs/langs/wireviz.md b/docs/langs/wireviz.md
@@ -0,0 +1,28 @@
+```wireviz
+connectors:
+  X1:
+    type: D-Sub
+    subtype: female
+    pinlabels: [DCD, RX, TX, DTR, GND, DSR, RTS, CTS, RI]
+  X2:
+    type: Molex KK 254
+    subtype: female
+    pinlabels: [GND, RX, TX]
+
+cables:
+  W1:
+    gauge: 0.25 mm2
+    length: 0.2
+    color_code: DIN
+    wirecount: 3
+    shield: true
+
+connections:
+  -
+    - X1: [5,2,3]
+    - W1: [1,2,3]
+    - X2: [1,3,2]
+  -
+    - X1: 5
+    - W1: s
+```
diff --git a/src/kroki.ts b/src/kroki.ts
@@ -136,6 +136,8 @@ export const defaultConfig: DocsifyKrokiOption = {
     "seqdiag",
     "structurizr",
     "svgbob",
+    "symbolator",
+    "tikz",
     "vega",
     "vegalite",
     "wavedrom",