jekyll-theme-endless 0.22.2 → 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 +321 -33
- 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>
|
|
@@ -11,9 +11,7 @@
|
|
|
11
11
|
:page-summary: "Discover the AsciiDoc showroom: See what's possible with AsciiDoc in this theme, including code, tables, lists, quotes, and more for advanced formatting."
|
|
12
12
|
// The Liquid page variable ensures that the Liquid preprocessor is also applied to AsciiDoc files.
|
|
13
13
|
// https://github.com/asciidoctor/jekyll-asciidoc?tab=readme-ov-file#enabling-liquid-preprocessing
|
|
14
|
-
|
|
15
|
-
// See the comments in the [[meme]] section for more details.
|
|
16
|
-
:page-liquid:
|
|
14
|
+
//:page-liquid:
|
|
17
15
|
|
|
18
16
|
|
|
19
17
|
|
|
@@ -402,7 +400,11 @@ The result is:
|
|
|
402
400
|
== Images
|
|
403
401
|
|
|
404
402
|
// NOTE:
|
|
405
|
-
// The image originates from the theme’s assets folder
|
|
403
|
+
// The image originates from the theme’s assets folder.
|
|
404
|
+
// It is added to your blog (target folder) during the Jekyll build process.
|
|
405
|
+
// If you want to build this document independently of Jekyll (e.g. by using asciidoctor-pdf),
|
|
406
|
+
// the image must be already available in source-folder.
|
|
407
|
+
// Thus, make sure to download the image to your local assets folder in advance.
|
|
406
408
|
|
|
407
409
|
// AsciiDoc commands are not stripped/processed when used within `alt=""`.
|
|
408
410
|
:pic_1_src: /assets/images/tree-3822149_640.jpg
|
|
@@ -629,14 +631,14 @@ making it a versatile choice for creating diagrams directly within documentation
|
|
|
629
631
|
|
|
630
632
|
The Docker image provided by jekyll-theme-endless currently ships with the software preinstalled to support the following diagram types:
|
|
631
633
|
// https://docs.asciidoctor.org/diagram-extension/latest/diagram_types/a2s/[ASCIIToSVG],
|
|
632
|
-
|
|
633
|
-
|
|
634
|
-
|
|
635
|
-
|
|
636
|
-
|
|
637
|
-
|
|
638
|
-
|
|
639
|
-
|
|
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],
|
|
640
642
|
https://docs.asciidoctor.org/diagram-extension/latest/diagram_types/ditaa/[Ditaa],
|
|
641
643
|
https://docs.asciidoctor.org/diagram-extension/latest/diagram_types/dpic/[Dpic],
|
|
642
644
|
// https://docs.asciidoctor.org/diagram-extension/latest/diagram_types/erd/[Erd],
|
|
@@ -658,10 +660,10 @@ https://docs.asciidoctor.org/diagram-extension/latest/diagram_types/smcat/[State
|
|
|
658
660
|
// https://docs.asciidoctor.org/diagram-extension/latest/diagram_types/syntrax/[Syntrax / JSyntrax],
|
|
659
661
|
// https://docs.asciidoctor.org/diagram-extension/latest/diagram_types/umlet/[UMLet],
|
|
660
662
|
// https://docs.asciidoctor.org/diagram-extension/latest/diagram_types/vega/[Vega / Vega-Lite],
|
|
661
|
-
|
|
663
|
+
https://docs.asciidoctor.org/diagram-extension/latest/diagram_types/wavedrom/[WaveDrom],
|
|
662
664
|
//
|
|
663
665
|
https://docs.asciidoctor.org/diagram-extension/latest/diagram_types/barcode/[Barcodes and QR codes],
|
|
664
|
-
|
|
666
|
+
https://docs.asciidoctor.org/diagram-extension/latest/diagram_types/bpmn/[BPMN],
|
|
665
667
|
// https://docs.asciidoctor.org/diagram-extension/latest/diagram_types/d2/[D2],
|
|
666
668
|
// https://docs.asciidoctor.org/diagram-extension/latest/diagram_types/diagrams/[Diagrams],
|
|
667
669
|
https://docs.asciidoctor.org/diagram-extension/latest/diagram_types/meme/[Meme],
|
|
@@ -671,6 +673,257 @@ https://docs.asciidoctor.org/diagram-extension/latest/diagram_types/tikz/[TikZ].
|
|
|
671
673
|
|
|
672
674
|
|
|
673
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
|
+
|
|
674
927
|
=== Ditaa
|
|
675
928
|
|
|
676
929
|
Ideal for converting ASCII art into diagrams, especially useful for quick sketches and block diagrams.
|
|
@@ -1160,6 +1413,41 @@ eat -> sleep [color="blue" width=3.5] : belly full;
|
|
|
1160
1413
|
|
|
1161
1414
|
|
|
1162
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
|
+
|
|
1163
1451
|
[[barcodes]]
|
|
1164
1452
|
=== QR codes and Barcodes
|
|
1165
1453
|
|
|
@@ -1194,31 +1482,31 @@ qrcode::This QR code is generated with Asciidoctor Diagram and presented in PNG
|
|
|
1194
1482
|
|
|
1195
1483
|
|
|
1196
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
|
+
|
|
1197
1502
|
[[meme]]
|
|
1198
1503
|
=== Meme
|
|
1199
1504
|
|
|
1200
1505
|
The https://docs.asciidoctor.org/diagram-extension/latest/diagram_types/meme/[meme extension] is based on https://imagemagick.org/[ImageMagick] and is used to create simple memes with text overlaid on images.
|
|
1201
1506
|
|
|
1202
|
-
|
|
1203
|
-
// This image is copied into the build folder (by default `_site`) during the build process.
|
|
1204
|
-
// The meme extension needs to know the location of this image within the build directory.
|
|
1205
|
-
// Since the build path can change, for example through the `-d` parameter, you should not hardcode `_site` here.
|
|
1206
|
-
// The current build directory is stored in the Jekyll variable `site.destination`.
|
|
1207
|
-
// See: https://jekyllrb.com/docs/configuration/options/
|
|
1208
|
-
// This variable can be accessed using Liquid syntax via `{{ site.destination }}`.
|
|
1209
|
-
// However, Liquid commands are not processed in AsciiDoc documents by default.
|
|
1210
|
-
// To enable the Liquid preprocessor for this document, you need to set the `:page-liquid:` attribute in the document header.
|
|
1211
|
-
// See: https://github.com/asciidoctor/jekyll-asciidoc?tab=readme-ov-file#enabling-liquid-preprocessing
|
|
1212
|
-
// During the build process, the Liquid preprocessor runs first, followed by the AsciiDoc processor.
|
|
1213
|
-
//
|
|
1214
|
-
// I assume that this approach will rarely be needed in practice.
|
|
1215
|
-
// Nevertheless, it provides a good insight into how Jekyll builds work and how AsciiDoc files are processed.
|
|
1216
|
-
// So, unless you specifically want to use one of the images packaged with the jekyll-theme-endless theme for your memes,
|
|
1217
|
-
// you can simply remove the `:page-liquid:` attribute and specify a path without using the Liquid variable {{ site.destination }}.
|
|
1218
|
-
|
|
1219
|
-
:pic_2_src: {{ site.destination }}/assets/images/cat.jpg
|
|
1507
|
+
:pic_2_src: ../assets/images/cat.jpg
|
|
1220
1508
|
|
|
1221
|
-
.Example of a meme created with the Meme diagram type, featuring an image of a cat with overlaid text at the top and bottom. The text is styled with a stroke width of 2 and a white fill color to enhance visibility against the background image.
|
|
1509
|
+
.Example of a meme created with the Meme diagram type, featuring an image of a cat with overlaid text at the top and bottom. The text is styled with a stroke width of 2 and a white fill color to enhance visibility against the background image.
|
|
1222
1510
|
meme::{pic_2_src}[Markdown? // Really?, Did you understand // a single word written here?, stroke-width=2, fill-color=white]
|
|
1223
1511
|
|
|
1224
1512
|
|
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
|