From 3be2da7c0dd0afc6ca98e8e7f10618cdb3fc3277 Mon Sep 17 00:00:00 2001 From: zuisong Date: Tue, 26 Sep 2023 15:14:57 +0800 Subject: [PATCH] Add more example --- docs/README.md | 48 ++++++++++++++++++++ docs/index.html | 44 ++++++++++++++++-- docs/langs/d2.md | 24 ++++++++++ docs/langs/dbml.md | 25 ++++++++++ docs/langs/structurizr.md | 26 +++++++++++ docs/langs/symbolator.md | 18 ++++++++ docs/langs/tikz.md | 96 +++++++++++++++++++++++++++++++++++++++ docs/langs/wireviz.md | 28 ++++++++++++ src/kroki.ts | 2 + 9 files changed, 307 insertions(+), 4 deletions(-) create mode 100644 docs/langs/d2.md create mode 100644 docs/langs/dbml.md create mode 100644 docs/langs/structurizr.md create mode 100644 docs/langs/symbolator.md create mode 100644 docs/langs/tikz.md create mode 100644 docs/langs/wireviz.md diff --git a/docs/README.md b/docs/README.md index 7f1db97..c362168 100644 --- 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 index c447274..f3cb08c 100644 --- a/docs/index.html +++ b/docs/index.html @@ -5,26 +5,62 @@ Docsify-Kroki Example - + content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0" /> + -
+
+ + + - + \ No newline at end of file diff --git a/docs/langs/d2.md b/docs/langs/d2.md new file mode 100644 index 0000000..56f615a --- /dev/null +++ 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 +``` \ No newline at end of file diff --git a/docs/langs/dbml.md b/docs/langs/dbml.md new file mode 100644 index 0000000..c8668e7 --- /dev/null +++ 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 +``` \ No newline at end of file diff --git a/docs/langs/structurizr.md b/docs/langs/structurizr.md new file mode 100644 index 0000000..d8bf7a0 --- /dev/null +++ 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 + } +} +``` \ No newline at end of file diff --git a/docs/langs/symbolator.md b/docs/langs/symbolator.md new file mode 100644 index 0000000..1fdc332 --- /dev/null +++ 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 +``` \ No newline at end of file diff --git a/docs/langs/tikz.md b/docs/langs/tikz.md new file mode 100644 index 0000000..96c6cd9 --- /dev/null +++ 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} +``` \ No newline at end of file diff --git a/docs/langs/wireviz.md b/docs/langs/wireviz.md new file mode 100644 index 0000000..dfc4677 --- /dev/null +++ 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 +``` \ No newline at end of file diff --git a/src/kroki.ts b/src/kroki.ts index 458ce53..5147036 100644 --- a/src/kroki.ts +++ b/src/kroki.ts @@ -136,6 +136,8 @@ export const defaultConfig: DocsifyKrokiOption = { "seqdiag", "structurizr", "svgbob", + "symbolator", + "tikz", "vega", "vegalite", "wavedrom",