jekyll-theme-endless 0.22.3 → 0.23.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- checksums.yaml +4 -4
- data/lib/jekyll-theme-endless/version.rb +1 -1
- data/pages_examples/example.bpmn +133 -0
- data/pages_examples/showroom-asciidoc.adoc +313 -10
- metadata +2 -1
checksums.yaml
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
---
|
|
2
2
|
SHA256:
|
|
3
|
-
metadata.gz:
|
|
4
|
-
data.tar.gz:
|
|
3
|
+
metadata.gz: e2a0a34324999ee8e0d2a6b8971cc5257dbea7e9ab17309e19f5b7a48be61fb6
|
|
4
|
+
data.tar.gz: a8283b21a63e68183289327a5d523af8a6d1a66038ceca3c2e55f0fe387d6047
|
|
5
5
|
SHA512:
|
|
6
|
-
metadata.gz:
|
|
7
|
-
data.tar.gz:
|
|
6
|
+
metadata.gz: f0026bb254eb5effaa1d9978c8f9a2ac9d27274e9a51dc44da74c92abe0aca2ab537c814f1ec11dee867c12cda711dfafebe1525cf10ea715ff45fbe71dba240
|
|
7
|
+
data.tar.gz: 47efde871388d119ee0c6efb462902d3edbd4fd1eae7f59fa29a312e4c04cdca3a219a336a5c87608ffe4d2b29477ee0a8a0e7d3885aacae38e296c5de7790cd
|
|
@@ -0,0 +1,133 @@
|
|
|
1
|
+
<?xml version="1.0" encoding="UTF-8"?>
|
|
2
|
+
<definitions xmlns="http://www.omg.org/spec/BPMN/20100524/MODEL" xmlns:bpmndi="http://www.omg.org/spec/BPMN/20100524/DI" xmlns:omgdc="http://www.omg.org/spec/DD/20100524/DC" xmlns:omgdi="http://www.omg.org/spec/DD/20100524/DI" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" targetNamespace="" xsi:schemaLocation="http://www.omg.org/spec/BPMN/20100524/MODEL http://www.omg.org/spec/BPMN/2.0/20100501/BPMN20.xsd">
|
|
3
|
+
<collaboration id="sid-c0e745ff-361e-4afb-8c8d-2a1fc32b1424">
|
|
4
|
+
<participant id="sid-87F4C1D6-25E1-4A45-9DA7-AD945993D06F" name="Customer" processRef="sid-C3803939-0872-457F-8336-EAE484DC4A04" />
|
|
5
|
+
</collaboration>
|
|
6
|
+
<process id="sid-C3803939-0872-457F-8336-EAE484DC4A04" name="Customer" processType="None" isClosed="false" isExecutable="false">
|
|
7
|
+
<extensionElements />
|
|
8
|
+
<laneSet id="sid-b167d0d7-e761-4636-9200-76b7f0e8e83a">
|
|
9
|
+
<lane id="sid-57E4FE0D-18E4-478D-BC5D-B15164E93254">
|
|
10
|
+
<flowNodeRef>START_PROCESS</flowNodeRef>
|
|
11
|
+
<flowNodeRef>SCAN_QR_CODE</flowNodeRef>
|
|
12
|
+
<flowNodeRef>SCAN_OK</flowNodeRef>
|
|
13
|
+
<flowNodeRef>sid-E49425CF-8287-4798-B622-D2A7D78EF00B</flowNodeRef>
|
|
14
|
+
<flowNodeRef>END_PROCESS</flowNodeRef>
|
|
15
|
+
<flowNodeRef>sid-5134932A-1863-4FFA-BB3C-A4B4078B11A9</flowNodeRef>
|
|
16
|
+
</lane>
|
|
17
|
+
</laneSet>
|
|
18
|
+
<startEvent id="START_PROCESS" name="Notices QR code">
|
|
19
|
+
<outgoing>sid-7B791A11-2F2E-4D80-AFB3-91A02CF2B4FD</outgoing>
|
|
20
|
+
</startEvent>
|
|
21
|
+
<task id="SCAN_QR_CODE" name="Scan QR code">
|
|
22
|
+
<incoming>sid-4DC479E5-5C20-4948-BCFC-9EC5E2F66D8D</incoming>
|
|
23
|
+
<outgoing>sid-EE8A7BA0-5D66-4F8B-80E3-CC2751B3856A</outgoing>
|
|
24
|
+
</task>
|
|
25
|
+
<exclusiveGateway id="SCAN_OK" name="Scan successful? " gatewayDirection="Diverging">
|
|
26
|
+
<incoming>sid-EE8A7BA0-5D66-4F8B-80E3-CC2751B3856A</incoming>
|
|
27
|
+
<outgoing>sid-8B820AF5-DC5C-4618-B854-E08B71FB55CB</outgoing>
|
|
28
|
+
<outgoing>sid-337A23B9-A923-4CCE-B613-3E247B773CCE</outgoing>
|
|
29
|
+
</exclusiveGateway>
|
|
30
|
+
<task id="sid-E49425CF-8287-4798-B622-D2A7D78EF00B" name="Open product information in mobile app">
|
|
31
|
+
<incoming>sid-8B820AF5-DC5C-4618-B854-E08B71FB55CB</incoming>
|
|
32
|
+
<outgoing>sid-57EB1F24-BD94-479A-BF1F-57F1EAA19C6C</outgoing>
|
|
33
|
+
</task>
|
|
34
|
+
<endEvent id="END_PROCESS" name="Is informed">
|
|
35
|
+
<incoming>sid-57EB1F24-BD94-479A-BF1F-57F1EAA19C6C</incoming>
|
|
36
|
+
</endEvent>
|
|
37
|
+
<exclusiveGateway id="sid-5134932A-1863-4FFA-BB3C-A4B4078B11A9" gatewayDirection="Converging">
|
|
38
|
+
<incoming>sid-7B791A11-2F2E-4D80-AFB3-91A02CF2B4FD</incoming>
|
|
39
|
+
<incoming>sid-337A23B9-A923-4CCE-B613-3E247B773CCE</incoming>
|
|
40
|
+
<outgoing>sid-4DC479E5-5C20-4948-BCFC-9EC5E2F66D8D</outgoing>
|
|
41
|
+
</exclusiveGateway>
|
|
42
|
+
<sequenceFlow id="sid-7B791A11-2F2E-4D80-AFB3-91A02CF2B4FD" sourceRef="START_PROCESS" targetRef="sid-5134932A-1863-4FFA-BB3C-A4B4078B11A9" />
|
|
43
|
+
<sequenceFlow id="sid-EE8A7BA0-5D66-4F8B-80E3-CC2751B3856A" sourceRef="SCAN_QR_CODE" targetRef="SCAN_OK" />
|
|
44
|
+
<sequenceFlow id="sid-57EB1F24-BD94-479A-BF1F-57F1EAA19C6C" sourceRef="sid-E49425CF-8287-4798-B622-D2A7D78EF00B" targetRef="END_PROCESS" />
|
|
45
|
+
<sequenceFlow id="sid-8B820AF5-DC5C-4618-B854-E08B71FB55CB" name="Yes" sourceRef="SCAN_OK" targetRef="sid-E49425CF-8287-4798-B622-D2A7D78EF00B" />
|
|
46
|
+
<sequenceFlow id="sid-4DC479E5-5C20-4948-BCFC-9EC5E2F66D8D" sourceRef="sid-5134932A-1863-4FFA-BB3C-A4B4078B11A9" targetRef="SCAN_QR_CODE" />
|
|
47
|
+
<sequenceFlow id="sid-337A23B9-A923-4CCE-B613-3E247B773CCE" name="No" sourceRef="SCAN_OK" targetRef="sid-5134932A-1863-4FFA-BB3C-A4B4078B11A9" />
|
|
48
|
+
</process>
|
|
49
|
+
<bpmndi:BPMNDiagram id="sid-74620812-92c4-44e5-949c-aa47393d3830">
|
|
50
|
+
<bpmndi:BPMNPlane id="sid-cdcae759-2af7-4a6d-bd02-53f3352a731d" bpmnElement="sid-c0e745ff-361e-4afb-8c8d-2a1fc32b1424">
|
|
51
|
+
<bpmndi:BPMNShape id="sid-87F4C1D6-25E1-4A45-9DA7-AD945993D06F_gui" bpmnElement="sid-87F4C1D6-25E1-4A45-9DA7-AD945993D06F" isHorizontal="true">
|
|
52
|
+
<omgdc:Bounds x="42.5" y="75" width="933" height="250" />
|
|
53
|
+
<bpmndi:BPMNLabel labelStyle="sid-84cb49fd-2f7c-44fb-8950-83c3fa153d3b">
|
|
54
|
+
<omgdc:Bounds x="47.49999999999999" y="170.42857360839844" width="12.000000000000014" height="59.142852783203125" />
|
|
55
|
+
</bpmndi:BPMNLabel>
|
|
56
|
+
</bpmndi:BPMNShape>
|
|
57
|
+
<bpmndi:BPMNShape id="sid-57E4FE0D-18E4-478D-BC5D-B15164E93254_gui" bpmnElement="sid-57E4FE0D-18E4-478D-BC5D-B15164E93254" isHorizontal="true">
|
|
58
|
+
<omgdc:Bounds x="72.5" y="75" width="903" height="250" />
|
|
59
|
+
</bpmndi:BPMNShape>
|
|
60
|
+
<bpmndi:BPMNShape id="START_PROCESS_gui" bpmnElement="START_PROCESS">
|
|
61
|
+
<omgdc:Bounds x="150" y="165" width="30" height="30" />
|
|
62
|
+
<bpmndi:BPMNLabel labelStyle="sid-e0502d32-f8d1-41cf-9c4a-cbb49fecf581">
|
|
63
|
+
<omgdc:Bounds x="141.8214282989502" y="197" width="46.35714340209961" height="22" />
|
|
64
|
+
</bpmndi:BPMNLabel>
|
|
65
|
+
</bpmndi:BPMNShape>
|
|
66
|
+
<bpmndi:BPMNShape id="SCAN_QR_CODE_gui" bpmnElement="SCAN_QR_CODE">
|
|
67
|
+
<omgdc:Bounds x="352.5" y="140" width="100" height="80" />
|
|
68
|
+
<bpmndi:BPMNLabel labelStyle="sid-84cb49fd-2f7c-44fb-8950-83c3fa153d3b">
|
|
69
|
+
<omgdc:Bounds x="360.5" y="172" width="84" height="12" />
|
|
70
|
+
</bpmndi:BPMNLabel>
|
|
71
|
+
</bpmndi:BPMNShape>
|
|
72
|
+
<bpmndi:BPMNShape id="SCAN_OK_gui" bpmnElement="SCAN_OK" isMarkerVisible="true">
|
|
73
|
+
<omgdc:Bounds x="550" y="160" width="40" height="40" />
|
|
74
|
+
<bpmndi:BPMNLabel labelStyle="sid-e0502d32-f8d1-41cf-9c4a-cbb49fecf581">
|
|
75
|
+
<omgdc:Bounds x="521" y="127" width="102" height="12" />
|
|
76
|
+
</bpmndi:BPMNLabel>
|
|
77
|
+
</bpmndi:BPMNShape>
|
|
78
|
+
<bpmndi:BPMNShape id="sid-E49425CF-8287-4798-B622-D2A7D78EF00B_gui" bpmnElement="sid-E49425CF-8287-4798-B622-D2A7D78EF00B">
|
|
79
|
+
<omgdc:Bounds x="687.5" y="140" width="100" height="80" />
|
|
80
|
+
<bpmndi:BPMNLabel labelStyle="sid-84cb49fd-2f7c-44fb-8950-83c3fa153d3b">
|
|
81
|
+
<omgdc:Bounds x="695.9285736083984" y="162" width="83.14285278320312" height="36" />
|
|
82
|
+
</bpmndi:BPMNLabel>
|
|
83
|
+
</bpmndi:BPMNShape>
|
|
84
|
+
<bpmndi:BPMNShape id="END_PROCESS_gui" bpmnElement="END_PROCESS">
|
|
85
|
+
<omgdc:Bounds x="865" y="166" width="28" height="28" />
|
|
86
|
+
<bpmndi:BPMNLabel labelStyle="sid-e0502d32-f8d1-41cf-9c4a-cbb49fecf581">
|
|
87
|
+
<omgdc:Bounds x="847.5714263916016" y="196" width="62.857147216796875" height="11" />
|
|
88
|
+
</bpmndi:BPMNLabel>
|
|
89
|
+
</bpmndi:BPMNShape>
|
|
90
|
+
<bpmndi:BPMNShape id="sid-5134932A-1863-4FFA-BB3C-A4B4078B11A9_gui" bpmnElement="sid-5134932A-1863-4FFA-BB3C-A4B4078B11A9" isMarkerVisible="true">
|
|
91
|
+
<omgdc:Bounds x="240" y="160" width="40" height="40" />
|
|
92
|
+
</bpmndi:BPMNShape>
|
|
93
|
+
<bpmndi:BPMNEdge id="sid-7B791A11-2F2E-4D80-AFB3-91A02CF2B4FD_gui" bpmnElement="sid-7B791A11-2F2E-4D80-AFB3-91A02CF2B4FD">
|
|
94
|
+
<omgdi:waypoint x="180" y="180" />
|
|
95
|
+
<omgdi:waypoint x="240" y="180" />
|
|
96
|
+
</bpmndi:BPMNEdge>
|
|
97
|
+
<bpmndi:BPMNEdge id="sid-EE8A7BA0-5D66-4F8B-80E3-CC2751B3856A_gui" bpmnElement="sid-EE8A7BA0-5D66-4F8B-80E3-CC2751B3856A">
|
|
98
|
+
<omgdi:waypoint x="452.5" y="180" />
|
|
99
|
+
<omgdi:waypoint x="550" y="180" />
|
|
100
|
+
</bpmndi:BPMNEdge>
|
|
101
|
+
<bpmndi:BPMNEdge id="sid-57EB1F24-BD94-479A-BF1F-57F1EAA19C6C_gui" bpmnElement="sid-57EB1F24-BD94-479A-BF1F-57F1EAA19C6C">
|
|
102
|
+
<omgdi:waypoint x="787.5" y="180" />
|
|
103
|
+
<omgdi:waypoint x="865" y="180" />
|
|
104
|
+
</bpmndi:BPMNEdge>
|
|
105
|
+
<bpmndi:BPMNEdge id="sid-8B820AF5-DC5C-4618-B854-E08B71FB55CB_gui" bpmnElement="sid-8B820AF5-DC5C-4618-B854-E08B71FB55CB">
|
|
106
|
+
<omgdi:waypoint x="590" y="180" />
|
|
107
|
+
<omgdi:waypoint x="687.5" y="180" />
|
|
108
|
+
<bpmndi:BPMNLabel labelStyle="sid-e0502d32-f8d1-41cf-9c4a-cbb49fecf581">
|
|
109
|
+
<omgdc:Bounds x="597" y="155" width="19" height="14" />
|
|
110
|
+
</bpmndi:BPMNLabel>
|
|
111
|
+
</bpmndi:BPMNEdge>
|
|
112
|
+
<bpmndi:BPMNEdge id="sid-4DC479E5-5C20-4948-BCFC-9EC5E2F66D8D_gui" bpmnElement="sid-4DC479E5-5C20-4948-BCFC-9EC5E2F66D8D">
|
|
113
|
+
<omgdi:waypoint x="280" y="180" />
|
|
114
|
+
<omgdi:waypoint x="352.5" y="180" />
|
|
115
|
+
</bpmndi:BPMNEdge>
|
|
116
|
+
<bpmndi:BPMNEdge id="sid-337A23B9-A923-4CCE-B613-3E247B773CCE_gui" bpmnElement="sid-337A23B9-A923-4CCE-B613-3E247B773CCE">
|
|
117
|
+
<omgdi:waypoint x="570.5" y="200" />
|
|
118
|
+
<omgdi:waypoint x="570.5" y="269" />
|
|
119
|
+
<omgdi:waypoint x="260.5" y="269" />
|
|
120
|
+
<omgdi:waypoint x="260.5" y="200" />
|
|
121
|
+
<bpmndi:BPMNLabel labelStyle="sid-e0502d32-f8d1-41cf-9c4a-cbb49fecf581">
|
|
122
|
+
<omgdc:Bounds x="549" y="205" width="15" height="14" />
|
|
123
|
+
</bpmndi:BPMNLabel>
|
|
124
|
+
</bpmndi:BPMNEdge>
|
|
125
|
+
</bpmndi:BPMNPlane>
|
|
126
|
+
<bpmndi:BPMNLabelStyle id="sid-e0502d32-f8d1-41cf-9c4a-cbb49fecf581">
|
|
127
|
+
<omgdc:Font name="Arial" size="11" isBold="false" isItalic="false" isUnderline="false" isStrikeThrough="false" />
|
|
128
|
+
</bpmndi:BPMNLabelStyle>
|
|
129
|
+
<bpmndi:BPMNLabelStyle id="sid-84cb49fd-2f7c-44fb-8950-83c3fa153d3b">
|
|
130
|
+
<omgdc:Font name="Arial" size="12" isBold="false" isItalic="false" isUnderline="false" isStrikeThrough="false" />
|
|
131
|
+
</bpmndi:BPMNLabelStyle>
|
|
132
|
+
</bpmndi:BPMNDiagram>
|
|
133
|
+
</definitions>
|
|
@@ -631,14 +631,14 @@ making it a versatile choice for creating diagrams directly within documentation
|
|
|
631
631
|
|
|
632
632
|
The Docker image provided by jekyll-theme-endless currently ships with the software preinstalled to support the following diagram types:
|
|
633
633
|
// https://docs.asciidoctor.org/diagram-extension/latest/diagram_types/a2s/[ASCIIToSVG],
|
|
634
|
-
|
|
635
|
-
|
|
636
|
-
|
|
637
|
-
|
|
638
|
-
|
|
639
|
-
|
|
640
|
-
|
|
641
|
-
|
|
634
|
+
BlockDiag (
|
|
635
|
+
https://docs.asciidoctor.org/diagram-extension/latest/diagram_types/actdiag/[ActDiag],
|
|
636
|
+
https://docs.asciidoctor.org/diagram-extension/latest/diagram_types/blockdiag/[BlockDiag],
|
|
637
|
+
https://docs.asciidoctor.org/diagram-extension/latest/diagram_types/nwdiag/[NwDiag / RackDiag / PacketDiag],
|
|
638
|
+
https://docs.asciidoctor.org/diagram-extension/latest/diagram_types/seqdiag/[SeqDiag]
|
|
639
|
+
),
|
|
640
|
+
https://docs.asciidoctor.org/diagram-extension/latest/diagram_types/bytefield/[Bytefield-SVG],
|
|
641
|
+
https://docs.asciidoctor.org/diagram-extension/latest/diagram_types/dbml/[DBML],
|
|
642
642
|
https://docs.asciidoctor.org/diagram-extension/latest/diagram_types/ditaa/[Ditaa],
|
|
643
643
|
https://docs.asciidoctor.org/diagram-extension/latest/diagram_types/dpic/[Dpic],
|
|
644
644
|
// https://docs.asciidoctor.org/diagram-extension/latest/diagram_types/erd/[Erd],
|
|
@@ -660,10 +660,10 @@ https://docs.asciidoctor.org/diagram-extension/latest/diagram_types/smcat/[State
|
|
|
660
660
|
// https://docs.asciidoctor.org/diagram-extension/latest/diagram_types/syntrax/[Syntrax / JSyntrax],
|
|
661
661
|
// https://docs.asciidoctor.org/diagram-extension/latest/diagram_types/umlet/[UMLet],
|
|
662
662
|
// https://docs.asciidoctor.org/diagram-extension/latest/diagram_types/vega/[Vega / Vega-Lite],
|
|
663
|
-
|
|
663
|
+
https://docs.asciidoctor.org/diagram-extension/latest/diagram_types/wavedrom/[WaveDrom],
|
|
664
664
|
//
|
|
665
665
|
https://docs.asciidoctor.org/diagram-extension/latest/diagram_types/barcode/[Barcodes and QR codes],
|
|
666
|
-
|
|
666
|
+
https://docs.asciidoctor.org/diagram-extension/latest/diagram_types/bpmn/[BPMN],
|
|
667
667
|
// https://docs.asciidoctor.org/diagram-extension/latest/diagram_types/d2/[D2],
|
|
668
668
|
// https://docs.asciidoctor.org/diagram-extension/latest/diagram_types/diagrams/[Diagrams],
|
|
669
669
|
https://docs.asciidoctor.org/diagram-extension/latest/diagram_types/meme/[Meme],
|
|
@@ -673,6 +673,257 @@ https://docs.asciidoctor.org/diagram-extension/latest/diagram_types/tikz/[TikZ].
|
|
|
673
673
|
|
|
674
674
|
|
|
675
675
|
|
|
676
|
+
=== BlockDiag-Diagrams
|
|
677
|
+
|
|
678
|
+
These diagram-library provides support for several diagram types. Note that you can use the same code syntax to change the attributes in BlockDiag, ActDiag, NwDiag, RackDiag, PacketDiag, and SeqDiag diagrams. (for example to set colors `[color = "#bbfcbb"]`, shapes `[shape = "actor"]`, etc.).
|
|
679
|
+
|
|
680
|
+
|
|
681
|
+
|
|
682
|
+
[[blockdiag]]
|
|
683
|
+
==== BlockDiag
|
|
684
|
+
|
|
685
|
+
Diagrams created with BlockDiag can represent hierarchical structures, workflows, and relationships between components in a clear and organized manner.
|
|
686
|
+
(See the http://blockdiag.com/en/blockdiag/examples.html[examples of BlockDiag diagrams]).
|
|
687
|
+
|
|
688
|
+
.Example of a BlockDiag diagram illustrating a simple flowchart with two branches, connections an a group.
|
|
689
|
+
[blockdiag, format="svg"]
|
|
690
|
+
....
|
|
691
|
+
blockdiag {
|
|
692
|
+
A [stacked];
|
|
693
|
+
C [shape = actor];
|
|
694
|
+
D, G [shape = cloud];
|
|
695
|
+
|
|
696
|
+
A -> B -> C -> D;
|
|
697
|
+
A -> E -> F -> G;
|
|
698
|
+
|
|
699
|
+
group {
|
|
700
|
+
label = "Cloud Infrastructure";
|
|
701
|
+
color = "#8ceb8c";
|
|
702
|
+
// change fontsize of group-label
|
|
703
|
+
// fontsize = 16;
|
|
704
|
+
|
|
705
|
+
C, D, G;
|
|
706
|
+
}
|
|
707
|
+
}
|
|
708
|
+
....
|
|
709
|
+
|
|
710
|
+
|
|
711
|
+
|
|
712
|
+
[[actdiag]]
|
|
713
|
+
==== ActDiag
|
|
714
|
+
|
|
715
|
+
ActDiag is designed for creating activity diagrams, which are useful for modeling workflows and processes, showing the flow of control from one activity to another.
|
|
716
|
+
(See the http://blockdiag.com/en/actdiag/examples.html[examples of ActDiag diagrams]).
|
|
717
|
+
|
|
718
|
+
.Example of an ActDiag diagram illustrating a simple workflow with user actions and system processes.
|
|
719
|
+
[actdiag, format="svg"]
|
|
720
|
+
....
|
|
721
|
+
actdiag {
|
|
722
|
+
write -> convert -> image
|
|
723
|
+
|
|
724
|
+
lane user {
|
|
725
|
+
label = "User"
|
|
726
|
+
write [label = "Writing reST"];
|
|
727
|
+
image [label = "Get diagram IMAGE"];
|
|
728
|
+
}
|
|
729
|
+
lane actdiag {
|
|
730
|
+
convert [label = "Convert reST to Image"];
|
|
731
|
+
}
|
|
732
|
+
}
|
|
733
|
+
....
|
|
734
|
+
|
|
735
|
+
|
|
736
|
+
|
|
737
|
+
[[nwdiag]]
|
|
738
|
+
==== NwDiag
|
|
739
|
+
|
|
740
|
+
NwDiag is specialized for network diagrams, allowing you to visualize network topologies, connections, and configurations of network devices.
|
|
741
|
+
(See the http://blockdiag.com/en/nwdiag/nwdiag-examples.html[examples of NwDiag diagrams]).
|
|
742
|
+
|
|
743
|
+
.Example of a NwDiag diagram illustrating a simple network topology with DMZ and internal networks.
|
|
744
|
+
[nwdiag, format="svg"]
|
|
745
|
+
....
|
|
746
|
+
nwdiag {
|
|
747
|
+
network dmz {
|
|
748
|
+
address = "210.x.x.x/24"
|
|
749
|
+
|
|
750
|
+
web01 [address = "210.x.x.1"];
|
|
751
|
+
web02 [address = "210.x.x.2"];
|
|
752
|
+
}
|
|
753
|
+
network internal {
|
|
754
|
+
address = "172.x.x.x/24";
|
|
755
|
+
|
|
756
|
+
web01 [address = "172.x.x.1"];
|
|
757
|
+
web02 [address = "172.x.x.2"];
|
|
758
|
+
db01 [shape = "flowchart.database"];
|
|
759
|
+
db02 [shape = "flowchart.database"];
|
|
760
|
+
}
|
|
761
|
+
}
|
|
762
|
+
....
|
|
763
|
+
|
|
764
|
+
|
|
765
|
+
|
|
766
|
+
[[rackdiag]]
|
|
767
|
+
==== RackDiag
|
|
768
|
+
|
|
769
|
+
RackDiag is used for creating rack diagrams, which are ideal for visualizing the physical layout of servers and network equipment within data center racks.
|
|
770
|
+
(See the http://blockdiag.com/en/nwdiag/rackdiag-examples.html[examples of RackDiag diagrams]).
|
|
771
|
+
|
|
772
|
+
.Example of a RackDiag diagram illustrating a simple server rack layout with various equipment installed in 8 of 16 units.
|
|
773
|
+
[rackdiag, format="svg"]
|
|
774
|
+
....
|
|
775
|
+
rackdiag {
|
|
776
|
+
// define height of rack
|
|
777
|
+
16U;
|
|
778
|
+
|
|
779
|
+
// define rack items
|
|
780
|
+
1: UPS [2U];
|
|
781
|
+
3: DB Server
|
|
782
|
+
4: Web Server
|
|
783
|
+
5: Web Server
|
|
784
|
+
6: Web Server
|
|
785
|
+
7: Load Balancer [color = "#bbfcbb"]
|
|
786
|
+
8: L3 Switch
|
|
787
|
+
}
|
|
788
|
+
....
|
|
789
|
+
|
|
790
|
+
|
|
791
|
+
|
|
792
|
+
[[packetdiag]]
|
|
793
|
+
==== PacketDiag
|
|
794
|
+
|
|
795
|
+
PacketDiag is used for creating packet diagrams, which are useful for visualizing network packet flows and interactions between network entities.
|
|
796
|
+
(See the http://blockdiag.com/en/nwdiag/packetdiag-examples.html[examples of PacketDiag diagrams]).
|
|
797
|
+
|
|
798
|
+
.Example of a PacketDiag diagram illustrating the structure of a TCP packet with various fields and flags.
|
|
799
|
+
[packetdiag, format="svg"]
|
|
800
|
+
....
|
|
801
|
+
packetdiag {
|
|
802
|
+
colwidth = 32
|
|
803
|
+
fontsize = 15;
|
|
804
|
+
//node_height = 72
|
|
805
|
+
|
|
806
|
+
0-15: Source Port
|
|
807
|
+
16-31: Destination Port
|
|
808
|
+
32-63: Sequence Number
|
|
809
|
+
64-95: Acknowledgment Number
|
|
810
|
+
96-99: Data Offset
|
|
811
|
+
100-105: Reserved [color = "#f88585"]
|
|
812
|
+
106: URG [rotate = 270]
|
|
813
|
+
107: ACK [rotate = 270]
|
|
814
|
+
108: PSH [rotate = 270]
|
|
815
|
+
109: RST [rotate = 270]
|
|
816
|
+
110: SYN [rotate = 270]
|
|
817
|
+
111: FIN [rotate = 270]
|
|
818
|
+
112-127: Window
|
|
819
|
+
128-143: Checksum
|
|
820
|
+
144-159: Urgent Pointer
|
|
821
|
+
160-191: (Options and Padding)
|
|
822
|
+
192-223: data [colheight = 3, color = "#cccccc"]
|
|
823
|
+
}
|
|
824
|
+
....
|
|
825
|
+
|
|
826
|
+
|
|
827
|
+
|
|
828
|
+
[[seqdiag]]
|
|
829
|
+
==== SeqDiag
|
|
830
|
+
|
|
831
|
+
SeqDiag is designed for sequence diagrams, allowing you to model interactions between objects or components over time, showing the sequence of messages exchanged.
|
|
832
|
+
(See the http://blockdiag.com/en/seqdiag/examples.html[examples of SeqDiag diagrams]).
|
|
833
|
+
|
|
834
|
+
.Example of a SeqDiag diagram illustrating a simple client-server interaction with requests and responses.
|
|
835
|
+
[seqdiag, format="svg"]
|
|
836
|
+
....
|
|
837
|
+
seqdiag {
|
|
838
|
+
// define order, color and shape of participants
|
|
839
|
+
browser;
|
|
840
|
+
webserver [color = "#bbfcbb"];
|
|
841
|
+
database [shape = "flowchart.database"];
|
|
842
|
+
|
|
843
|
+
browser -> webserver [label = "GET /index.html"];
|
|
844
|
+
browser <-- webserver;
|
|
845
|
+
browser -> webserver [label = "POST /blog/comment"];
|
|
846
|
+
webserver -> database [label = "INSERT comment"];
|
|
847
|
+
webserver <-- database;
|
|
848
|
+
browser <-- webserver;
|
|
849
|
+
}
|
|
850
|
+
....
|
|
851
|
+
|
|
852
|
+
|
|
853
|
+
|
|
854
|
+
|
|
855
|
+
|
|
856
|
+
[[bytefield]]
|
|
857
|
+
=== Bytefield-SVG
|
|
858
|
+
|
|
859
|
+
Bytefield-SVG is ideal for visualizing data structures at the byte level, making it useful for understanding memory layouts, protocol formats, and binary data representations.
|
|
860
|
+
(See the https://bytefield-svg.deepsymmetry.org/bytefield-svg/1.11.0/intro.html[Introduction to Bytefield-SVG] and https://github.com/Deep-Symmetry/bytefield-svg?tab=readme-ov-file[Bytefield-SVG on GitHub]).
|
|
861
|
+
|
|
862
|
+
.Example of a Bytefield-SVG diagram illustrating the structure of an IPv4 header (RFC791) with various fields and their bit lengths. (Example taken and adapted from https://bytefield-svg.deepsymmetry.org/bytefield-svg/1.11.0/examples.html#_internet_protocol_version_4_header_rfc791[examples of Bytefield-SVG diagrams]).
|
|
863
|
+
[bytefield, format="svg"]
|
|
864
|
+
....
|
|
865
|
+
(draw-column-headers)
|
|
866
|
+
(draw-box "Version" {:span 4 :fill "#f0a0a0"})
|
|
867
|
+
(draw-box "IHL" {:span 4 :fill "#f0a0a0"})
|
|
868
|
+
(draw-box "DSCP" {:span 6 :fill "#f0a0a0"})
|
|
869
|
+
(draw-box "ECN" {:span 2 :fill "#f0a0a0"})
|
|
870
|
+
(draw-box "Total length" {:span 16})
|
|
871
|
+
(draw-box "Identification" {:span 16})
|
|
872
|
+
(draw-box "Flags" {:span 3})
|
|
873
|
+
(draw-box "Fragment offset" {:span 13})
|
|
874
|
+
(draw-box "Time to live" {:span 8})
|
|
875
|
+
(draw-box "Protocol" {:span 8 :fill "#a0ffa0"})
|
|
876
|
+
(draw-box "Header checksum" {:span 16})
|
|
877
|
+
(draw-box "Source IP address" [{:span 16 :fill "#65f5ff"} , :box-above])
|
|
878
|
+
(draw-box nil [{:span 16 :fill "#65f5ff"}, :box-below])
|
|
879
|
+
|
|
880
|
+
(draw-box "Destination IP address" [{:span 16 :fill "#65f5ff"} , :box-above])
|
|
881
|
+
(draw-box nil [{:span 16 :fill "#65f5ff"}, :box-below])
|
|
882
|
+
|
|
883
|
+
(draw-gap "Options (if IHL > 5)")
|
|
884
|
+
(draw-bottom)
|
|
885
|
+
....
|
|
886
|
+
|
|
887
|
+
|
|
888
|
+
|
|
889
|
+
|
|
890
|
+
[[dbml]]
|
|
891
|
+
=== DBML
|
|
892
|
+
|
|
893
|
+
https://dbml.dbdiagram.io/home/#intro[DBML] (Database Markup Language) is designed for modeling database schemas and structures in a clear and concise manner, making it easier to visualize and understand database designs.
|
|
894
|
+
(See the https://github.com/softwaretechnik-berlin/dbml-renderer[DBML Renderer on GitHub], https://github.com/softwaretechnik-berlin/dbml-renderer/tree/main/examples[examples directory], and the https://dbml.dbdiagram.io/home#command-line-tool-cli[DBML Command Line Tool]).
|
|
895
|
+
|
|
896
|
+
.Example of a DBML diagram illustrating a simple database schema with two tables, an enum type, and a relationship between the tables.
|
|
897
|
+
[dbml, format="svg"]
|
|
898
|
+
....
|
|
899
|
+
Table users {
|
|
900
|
+
id integer
|
|
901
|
+
username varchar
|
|
902
|
+
role varchar
|
|
903
|
+
created_at timestamp
|
|
904
|
+
}
|
|
905
|
+
|
|
906
|
+
Table posts {
|
|
907
|
+
id integer [primary key]
|
|
908
|
+
title varchar
|
|
909
|
+
body text [note: 'Content of the post']
|
|
910
|
+
user_id integer
|
|
911
|
+
status post_status
|
|
912
|
+
created_at timestamp
|
|
913
|
+
}
|
|
914
|
+
|
|
915
|
+
Enum post_status {
|
|
916
|
+
draft
|
|
917
|
+
published
|
|
918
|
+
private [note: 'visible via URL only']
|
|
919
|
+
}
|
|
920
|
+
|
|
921
|
+
Ref: posts.user_id > users.id // many-to-one
|
|
922
|
+
....
|
|
923
|
+
|
|
924
|
+
|
|
925
|
+
|
|
926
|
+
|
|
676
927
|
=== Ditaa
|
|
677
928
|
|
|
678
929
|
Ideal for converting ASCII art into diagrams, especially useful for quick sketches and block diagrams.
|
|
@@ -1162,6 +1413,41 @@ eat -> sleep [color="blue" width=3.5] : belly full;
|
|
|
1162
1413
|
|
|
1163
1414
|
|
|
1164
1415
|
|
|
1416
|
+
[[wavedrom]]
|
|
1417
|
+
=== WaveDrom
|
|
1418
|
+
|
|
1419
|
+
https://wavedrom.com/[WaveDrom] is a tool for visualizing signal transitions and timing relationships in digital circuits and systems.
|
|
1420
|
+
Also see https://github.com/wavedrom/wavedrom[WaveDrom on GitHub].
|
|
1421
|
+
|
|
1422
|
+
.Example of a WaveDrom diagram illustrating a simple digital circuit that implements an XOR gate using basic logic gates (AND, OR, NOT). The diagram shows the input signals 'a' and 'b,' as well as the output signal 'out,' which is derived from the logical operations on the inputs. Example taken from the https://wavedrom.com/tutorial2.html[WaveDrom tutorial (Part 2)].
|
|
1423
|
+
[wavedrom,, svg]
|
|
1424
|
+
....
|
|
1425
|
+
{ assign: [
|
|
1426
|
+
["out",
|
|
1427
|
+
["|",
|
|
1428
|
+
["&", ["~", "a"], "b"],
|
|
1429
|
+
["&", ["~", "b"], "a"]
|
|
1430
|
+
]
|
|
1431
|
+
]
|
|
1432
|
+
]}
|
|
1433
|
+
....
|
|
1434
|
+
|
|
1435
|
+
.Example of a WaveDrom timing diagram illustrating the behavior of several digital signals over time, including clock cycles, data values, request and acknowledge signals. The diagram uses waveforms to represent the state transitions of each signal. Example taken from the https://wavedrom.com/tutorial.html[WaveDrom tutorial (Part 1)].
|
|
1436
|
+
[wavedrom,, svg]
|
|
1437
|
+
....
|
|
1438
|
+
{ signal: [
|
|
1439
|
+
{ name: "clk", wave: "p.....|..." },
|
|
1440
|
+
{ name: "Data", wave: "x.345x|=.x", data: ["head", "body", "tail", "data"] },
|
|
1441
|
+
{ name: "Request", wave: "0.1..0|1.0" },
|
|
1442
|
+
{},
|
|
1443
|
+
{ name: "Acknowledge", wave: "1.....|01." }
|
|
1444
|
+
]}
|
|
1445
|
+
....
|
|
1446
|
+
|
|
1447
|
+
|
|
1448
|
+
|
|
1449
|
+
|
|
1450
|
+
|
|
1165
1451
|
[[barcodes]]
|
|
1166
1452
|
=== QR codes and Barcodes
|
|
1167
1453
|
|
|
@@ -1196,6 +1482,23 @@ qrcode::This QR code is generated with Asciidoctor Diagram and presented in PNG
|
|
|
1196
1482
|
|
|
1197
1483
|
|
|
1198
1484
|
|
|
1485
|
+
[[bpmn]]
|
|
1486
|
+
=== BPMN
|
|
1487
|
+
|
|
1488
|
+
https://bpmn.io/[BPMN] is a tool for creating **B**usiness **P**rocess **M**odel and **N**otation diagrams, which are used to model business processes in a graphical representation.
|
|
1489
|
+
You can easily https://demo.bpmn.io/[build your own BPMN diagrams online].
|
|
1490
|
+
|
|
1491
|
+
.Example of a BMPN diagram included via the `include::path/to/file.bpmn[]`-command. You can also add the XML code directly to your AsciiDoc source code, but this makes it more difficult to edit the diagram with a BPMN editor. (https://github.com/bpmn-io/bpmn-js-examples/blob/main/overlays/resources/qr-code.bpmn[QR code example] taken and adapated from the https://bpmn.io/toolkit/bpmn-js/examples/[bpmn-js example page]).
|
|
1492
|
+
[bpmn, format="svg"]
|
|
1493
|
+
....
|
|
1494
|
+
include::example.bpmn[]
|
|
1495
|
+
....
|
|
1496
|
+
|
|
1497
|
+
|
|
1498
|
+
|
|
1499
|
+
|
|
1500
|
+
|
|
1501
|
+
|
|
1199
1502
|
[[meme]]
|
|
1200
1503
|
=== Meme
|
|
1201
1504
|
|
metadata
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
--- !ruby/object:Gem::Specification
|
|
2
2
|
name: jekyll-theme-endless
|
|
3
3
|
version: !ruby/object:Gem::Version
|
|
4
|
-
version: 0.
|
|
4
|
+
version: 0.23.0
|
|
5
5
|
platform: ruby
|
|
6
6
|
authors:
|
|
7
7
|
- Sven Boekhoff
|
|
@@ -294,6 +294,7 @@ files:
|
|
|
294
294
|
- lib/jekyll-theme-endless/generate-tagpages.rb
|
|
295
295
|
- lib/jekyll-theme-endless/liquid-match-filter.rb
|
|
296
296
|
- lib/jekyll-theme-endless/version.rb
|
|
297
|
+
- pages_examples/example.bpmn
|
|
297
298
|
- pages_examples/showroom-asciidoc-code.html
|
|
298
299
|
- pages_examples/showroom-asciidoc.adoc
|
|
299
300
|
- pages_examples/showroom-markdown.md
|