updated files with kroki and mermaid plugins

This commit is contained in:
hyung-hwan 2023-10-14 21:10:41 +09:00
parent 7ca3ca34d1
commit b18d4ca440
2 changed files with 209 additions and 14 deletions

View File

@ -5,16 +5,77 @@
<meta name="viewport" content="width=device-width,initial-scale=1" /> <meta name="viewport" content="width=device-width,initial-scale=1" />
<meta charset="UTF-8" /> <meta charset="UTF-8" />
<link rel="stylesheet" href="//cdn.jsdelivr.net/npm/docsify@4/themes/vue.css" /> <link rel="stylesheet" href="//cdn.jsdelivr.net/npm/docsify@4/themes/vue.css" />
<!-- <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css"> -->
<link rel="stylesheet" href="//unpkg.com/@fortawesome/fontawesome-free/css/fontawesome.css" />
<link rel="stylesheet" href="//unpkg.com/@fortawesome/fontawesome-free/css/brands.css" />
<link rel="stylesheet" href="//unpkg.com/@fortawesome/fontawesome-free/css/regular.css" />
<link rel="stylesheet" href="//unpkg.com/@fortawesome/fontawesome-free/css/solid.css" />
</head> </head>
<body> <body>
<div data-app id='main'></div> <div data-app id='main'></div>
<script src="//cdn.jsdelivr.net/npm/docsify@4"></script>
<script> <script>
window.$docsify = { window.$docsify = {
el: '#main', el: '#main',
loadSidebar: true, // when true, _sidebar.md is required loadSidebar: true, // when true, _sidebar.md is required
coverpage: false // when true, _coverpage.md is required coverpage: false, // when true, _coverpage.md is required
mermaidConfig: {
querySelector: '.mermaid'
},
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",
],
// default
serverPath: "//kroki.io/",
},
}; };
</script> </script>
<script src="//cdn.jsdelivr.net/npm/docsify@4"></script> <script src="//cdn.jsdelivr.net/npm/prismjs@1/components/prism-c.min.js"></script>
<script src="//cdn.jsdelivr.net/npm/prismjs@1/components/prism-go.min.js"></script>
<script src="//cdn.jsdelivr.net/npm/prismjs@1/components/prism-javascript.min.js"></script>
<script src="//cdn.jsdelivr.net/npm/prismjs@1/components/prism-typescript.min.js"></script>
<script src="//unpkg.com/mermaid/dist/mermaid.js"></script>
<script src="//unpkg.com/docsify-mermaid@latest/dist/docsify-mermaid.js"></script>
<script>
mermaid.initialize({
startOnLoad: true,
securityLevel: 'loose',
//logLevel: 0
});
</script>
<script src="//unpkg.com/docsify-kroki"></script>
</body> </body>
</html> </html>

View File

@ -1 +1,135 @@
## Vitess # Vitess
```mermaid
graph LR
A --- B
B-->C[fa:fa-ban forbidden]
B-->D(fa:fa-spinner);
```
```c
#include <stdio.h>
int main ()
{
printf ("hello, world\n");
return 0;
}
```
```mermaid
mindmap
root((mindmap))
Origins
Long history
::icon(fa fa-book)
Popularisation
British popular psychology author Tony Buzan
Research
On effectivness<br/>and features
On Automatic creation
Uses
Creative techniques
Strategic planning
Argument mapping
Tools
Pen and paper
Mermaid
```
```c
#include <stdio.h>
// Function to add two numbers
int add(int a, int b) {
return a + b;
}
// Function to subtract two numbers
int subtract(int a, int b) {
return a - b;
}
// Function that accepts a function pointer as a parameter
int calculate(int (*operation)(int, int), int a, int b) {
return operation(a, b);
}
int main() {
int x = 100, y = 200;
int sum = calculate(add, x, y);
int diff = calculate(subtract, x, y);
printf("Sum: %d\n", sum);
printf("Difference: %d\n", diff);
return 0;
}
```
```bytefield
(defattrs :bg-green {:fill "#a0ffa0"})
(defattrs :bg-yellow {:fill "#ffffa0"})
(defattrs :bg-pink {:fill "#ffb0a0"})
(defattrs :bg-cyan {:fill "#a0fafa"})
(defattrs :bg-purple {:fill "#e4b5f7"})
(defn draw-group-label-header
[span label]
(draw-box (text label [:math {:font-size 12}]) {:span span :borders #{} :height 14}))
(defn draw-remotedb-header
[kind args]
(draw-column-headers)
(draw-group-label-header 5 "start")
(draw-group-label-header 5 "TxID")
(draw-group-label-header 3 "type")
(draw-group-label-header 2 "args")
(draw-group-label-header 1 "tags")
(next-row 18)
(draw-box 0x11 :bg-green)
(draw-box 0x872349ae [{:span 4} :bg-green])
(draw-box 0x11 :bg-yellow)
(draw-box (text "TxID" :math) [{:span 4} :bg-yellow])
(draw-box 0x10 :bg-pink)
(draw-box (hex-text kind 4 :bold) [{:span 2} :bg-pink])
(draw-box 0x0f :bg-cyan)
(draw-box (hex-text args 2 :bold) :bg-cyan)
(draw-box 0x14 :bg-purple)
(draw-box (text "0000000c" :hex [[:plain {:font-weight "light" :font-size 16}] " (12)"]) [{:span 4} :bg-purple])
(draw-box (hex-text 6 2 :bold) [:box-first :bg-purple])
(doseq [val [6 6 3 6 6 6 6 3]]
(draw-box (hex-text val 2 :bold) [:box-related :bg-purple]))
(doseq [val [0 0]]
(draw-box val [:box-related :bg-purple]))
(draw-box 0 [:box-last :bg-purple]))
(draw-remotedb-header 0x4702 9)
(draw-box 0x11)
(draw-box 0x2104 {:span 4})
(draw-box 0x11)
(draw-box 0 {:span 4})
(draw-box 0x11)
(draw-box (text "length" [:math] [:sub 1]) {:span 4})
(draw-box 0x14)
(draw-box (text "length" [:math] [:sub 1]) {:span 4})
(draw-gap "Cue and loop point bytes")
(draw-box nil :box-below)
(draw-box 0x11)
(draw-box 0x36 {:span 4})
(draw-box 0x11)
(draw-box (text "num" [:math] [:sub "hot"]) {:span 4})
(draw-box 0x11)
(draw-box (text "num" [:math] [:sub "cue"]) {:span 4})
(draw-box 0x11)
(draw-box (text "length" [:math] [:sub 2]) {:span 4})
(draw-box 0x14)
(draw-box (text "length" [:math] [:sub 2]) {:span 4})
(draw-gap "Unknown bytes" {:min-label-columns 6})
(draw-bottom)
```