sirena 0.1.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 +7 -0
- data/.github/workflows/build_deploy.yml +59 -0
- data/.github/workflows/links.yml +85 -0
- data/.github/workflows/rake.yml +15 -0
- data/.github/workflows/release.yml +27 -0
- data/.gitignore +68 -0
- data/.rspec +3 -0
- data/.rubocop.yml +14 -0
- data/.rubocop_todo.yml +70 -0
- data/ARCHITECTURE.md +744 -0
- data/Gemfile +12 -0
- data/LICENSE +25 -0
- data/README.adoc +357 -0
- data/Rakefile +11 -0
- data/docs/.gitignore +1 -0
- data/docs/Gemfile +13 -0
- data/docs/_config.yml +182 -0
- data/docs/_diagram_types/architecture-diagram.adoc +314 -0
- data/docs/_diagram_types/block-diagram.adoc +345 -0
- data/docs/_diagram_types/c4-diagram.adoc +559 -0
- data/docs/_diagram_types/class-diagram.adoc +816 -0
- data/docs/_diagram_types/er-diagram.adoc +719 -0
- data/docs/_diagram_types/error-diagram.adoc +114 -0
- data/docs/_diagram_types/examples/flowchart-examples.adoc +29 -0
- data/docs/_diagram_types/flowchart.adoc +488 -0
- data/docs/_diagram_types/gantt-chart.adoc +502 -0
- data/docs/_diagram_types/git-graph.adoc +600 -0
- data/docs/_diagram_types/index.adoc +192 -0
- data/docs/_diagram_types/info-diagram.adoc +103 -0
- data/docs/_diagram_types/kanban-diagram.adoc +262 -0
- data/docs/_diagram_types/mindmap.adoc +603 -0
- data/docs/_diagram_types/packet-diagram.adoc +378 -0
- data/docs/_diagram_types/pie-chart.adoc +335 -0
- data/docs/_diagram_types/quadrant-chart.adoc +406 -0
- data/docs/_diagram_types/radar-chart.adoc +528 -0
- data/docs/_diagram_types/requirement-diagram.adoc +416 -0
- data/docs/_diagram_types/sankey-diagram.adoc +357 -0
- data/docs/_diagram_types/sequence-diagram.adoc +664 -0
- data/docs/_diagram_types/state-diagram.adoc +658 -0
- data/docs/_diagram_types/timeline.adoc +352 -0
- data/docs/_diagram_types/treemap-diagram.adoc +462 -0
- data/docs/_diagram_types/user-journey.adoc +602 -0
- data/docs/_features/index.adoc +129 -0
- data/docs/_guides/cli-reference.adoc +203 -0
- data/docs/_guides/index.adoc +56 -0
- data/docs/_guides/installation.adoc +100 -0
- data/docs/_guides/quick-start.adoc +132 -0
- data/docs/_pages/comparison.adoc +441 -0
- data/docs/_pages/compatibility.adoc +300 -0
- data/docs/_pages/index.adoc +39 -0
- data/docs/_references/index.adoc +103 -0
- data/docs/_tutorials/index.adoc +57 -0
- data/docs/index.adoc +166 -0
- data/docs/lychee.toml +54 -0
- data/examples/.gitignore +10 -0
- data/examples/README.adoc +196 -0
- data/examples/README.md +64 -0
- data/examples/architecture/01-basic-services.mmd +9 -0
- data/examples/architecture/01-basic-services.svg +37 -0
- data/examples/architecture/02-service-groups.mmd +16 -0
- data/examples/architecture/02-service-groups.svg +55 -0
- data/examples/architecture/README.adoc +79 -0
- data/examples/block/01-basic-blocks.mmd +13 -0
- data/examples/block/01-basic-blocks.svg +44 -0
- data/examples/block/02-block-shapes.mmd +13 -0
- data/examples/block/02-block-shapes.svg +47 -0
- data/examples/block/README.adoc +85 -0
- data/examples/c4/01-context-diagram.mmd +10 -0
- data/examples/c4/01-context-diagram.svg +45 -0
- data/examples/c4/02-container-diagram.mmd +24 -0
- data/examples/c4/02-container-diagram.svg +105 -0
- data/examples/c4/README.adoc +92 -0
- data/examples/class_diagram/01-basic-classes.mmd +61 -0
- data/examples/class_diagram/01-basic-classes.svg +117 -0
- data/examples/class_diagram/02-relationships.mmd +61 -0
- data/examples/class_diagram/02-relationships.svg +129 -0
- data/examples/class_diagram/README.adoc +93 -0
- data/examples/er_diagram/01-basic-entities.mmd +64 -0
- data/examples/er_diagram/01-basic-entities.svg +5 -0
- data/examples/er_diagram/02-cardinality.mmd +57 -0
- data/examples/er_diagram/02-cardinality.svg +125 -0
- data/examples/er_diagram/README.adoc +88 -0
- data/examples/error/01-basic-error.mmd +1 -0
- data/examples/error/01-basic-error.svg +13 -0
- data/examples/error/02-error-display.mmd +1 -0
- data/examples/error/02-error-display.svg +13 -0
- data/examples/error/README.adoc +71 -0
- data/examples/error_message_example.svg +13 -0
- data/examples/flowchart/00-original.mmd +13 -0
- data/examples/flowchart/00-original.svg +5 -0
- data/examples/flowchart/01-basic-flow.mmd +7 -0
- data/examples/flowchart/01-basic-flow.svg +52 -0
- data/examples/flowchart/01-basic-flow.yml +13 -0
- data/examples/flowchart/02*.svg +87 -0
- data/examples/flowchart/02-node-shapes.mmd +9 -0
- data/examples/flowchart/02-node-shapes.svg +33 -0
- data/examples/flowchart/03-edge-types.mmd +7 -0
- data/examples/flowchart/03-edge-types.svg +53 -0
- data/examples/flowchart/04-subgraphs.mmd +9 -0
- data/examples/flowchart/04-subgraphs.svg +33 -0
- data/examples/flowchart/05-styling.mmd +9 -0
- data/examples/flowchart/05-styling.svg +33 -0
- data/examples/flowchart/06-complex-flow.mmd +8 -0
- data/examples/flowchart/06-complex-flow.svg +59 -0
- data/examples/flowchart/README.adoc +167 -0
- data/examples/gantt/01-simple-timeline.* +14 -0
- data/examples/gantt/01-simple-timeline.mmd +6 -0
- data/examples/gantt/01-simple-timeline.svg +26 -0
- data/examples/gantt/02-task-dependencies.mmd +6 -0
- data/examples/gantt/02-task-dependencies.svg +26 -0
- data/examples/gantt/README.adoc +86 -0
- data/examples/git_graph/01-linear-history.mmd +12 -0
- data/examples/git_graph/01-linear-history.svg +26 -0
- data/examples/git_graph/02-branching.mmd +12 -0
- data/examples/git_graph/02-branching.svg +26 -0
- data/examples/git_graph/README.adoc +73 -0
- data/examples/info/02-showinfo.mmd +1 -0
- data/examples/info/02-showinfo.svg +10 -0
- data/examples/info/README.adoc +58 -0
- data/examples/info_showinfo_example.svg +10 -0
- data/examples/kanban/01-simple-board.mmd +8 -0
- data/examples/kanban/01-simple-board.svg +43 -0
- data/examples/kanban/02-workflow.mmd +8 -0
- data/examples/kanban/02-workflow.svg +43 -0
- data/examples/kanban/README.adoc +79 -0
- data/examples/mindmap/01-simple-tree.mmd +19 -0
- data/examples/mindmap/01-simple-tree.svg +61 -0
- data/examples/mindmap/02-knowledge-map.mmd +19 -0
- data/examples/mindmap/02-knowledge-map.svg +61 -0
- data/examples/mindmap/README.adoc +77 -0
- data/examples/packet/01-basic-packet.* +17 -0
- data/examples/packet/01-basic-packet.mmd +4 -0
- data/examples/packet/01-basic-packet.svg +82 -0
- data/examples/packet/README.adoc +58 -0
- data/examples/pie/01-simple-chart.mmd +5 -0
- data/examples/pie/01-simple-chart.svg +17 -0
- data/examples/pie/02-labeled-slices.mmd +6 -0
- data/examples/pie/02-labeled-slices.svg +19 -0
- data/examples/pie/README.adoc +75 -0
- data/examples/quadrant/01-basic-quadrant.mmd +13 -0
- data/examples/quadrant/01-basic-quadrant.svg +33 -0
- data/examples/quadrant/02-positioned-items.mmd +14 -0
- data/examples/quadrant/02-positioned-items.svg +35 -0
- data/examples/quadrant/README.adoc +84 -0
- data/examples/radar/01-simple-radar.* +5 -0
- data/examples/radar/01-simple-radar.mmd +3 -0
- data/examples/radar/01-simple-radar.svg +25 -0
- data/examples/radar/02-multiple-curves.mmd +4 -0
- data/examples/radar/02-multiple-curves.svg +43 -0
- data/examples/radar/README.adoc +75 -0
- data/examples/requirement/01-basic-requirements.mmd +23 -0
- data/examples/requirement/01-basic-requirements.svg +49 -0
- data/examples/requirement/02-risk-levels.mmd +23 -0
- data/examples/requirement/02-risk-levels.svg +49 -0
- data/examples/requirement/README.adoc +85 -0
- data/examples/sankey/01-simple-flow.mmd +7 -0
- data/examples/sankey/01-simple-flow.svg +34 -0
- data/examples/sankey/02-multi-stage.mmd +11 -0
- data/examples/sankey/02-multi-stage.svg +44 -0
- data/examples/sankey/README.adoc +74 -0
- data/examples/sequence/01-basic-sequence.mmd +27 -0
- data/examples/sequence/01-basic-sequence.svg +5 -0
- data/examples/sequence/02-activations.mmd +17 -0
- data/examples/sequence/02-activations.svg +78 -0
- data/examples/sequence/README.adoc +86 -0
- data/examples/state_diagram/01-simple-states.mmd +29 -0
- data/examples/state_diagram/01-simple-states.svg +5 -0
- data/examples/state_diagram/02-composite.mmd +19 -0
- data/examples/state_diagram/02-composite.svg +81 -0
- data/examples/state_diagram/README.adoc +90 -0
- data/examples/timeline/01-simple-timeline.mmd +11 -0
- data/examples/timeline/01-simple-timeline.svg +36 -0
- data/examples/timeline/02-periods.mmd +15 -0
- data/examples/timeline/02-periods.svg +47 -0
- data/examples/timeline/README.adoc +78 -0
- data/examples/treemap/01-basic-treemap.mmd +12 -0
- data/examples/treemap/01-basic-treemap.svg +59 -0
- data/examples/treemap/README.adoc +59 -0
- data/examples/user_journey/01-simple-journey.mmd +23 -0
- data/examples/user_journey/01-simple-journey.svg +5 -0
- data/examples/user_journey/02-multi-actor.mmd +18 -0
- data/examples/user_journey/02-multi-actor.svg +129 -0
- data/examples/user_journey/README.adoc +81 -0
- data/examples/xychart/01-line-chart.mmd +5 -0
- data/examples/xychart/01-line-chart.svg +43 -0
- data/examples/xychart/02-bar-chart.mmd +7 -0
- data/examples/xychart/02-bar-chart.svg +48 -0
- data/examples/xychart/README.adoc +80 -0
- data/exe/sirena +7 -0
- data/lib/sirena/cli.rb +138 -0
- data/lib/sirena/commands/batch.rb +117 -0
- data/lib/sirena/commands/render.rb +80 -0
- data/lib/sirena/commands/types.rb +29 -0
- data/lib/sirena/commands/version.rb +24 -0
- data/lib/sirena/diagram/architecture.rb +46 -0
- data/lib/sirena/diagram/base.rb +61 -0
- data/lib/sirena/diagram/block.rb +81 -0
- data/lib/sirena/diagram/c4.rb +328 -0
- data/lib/sirena/diagram/class_diagram.rb +385 -0
- data/lib/sirena/diagram/er_diagram.rb +238 -0
- data/lib/sirena/diagram/error.rb +38 -0
- data/lib/sirena/diagram/flowchart.rb +160 -0
- data/lib/sirena/diagram/gantt.rb +71 -0
- data/lib/sirena/diagram/git_graph.rb +36 -0
- data/lib/sirena/diagram/info.rb +38 -0
- data/lib/sirena/diagram/kanban.rb +178 -0
- data/lib/sirena/diagram/mindmap.rb +54 -0
- data/lib/sirena/diagram/packet.rb +79 -0
- data/lib/sirena/diagram/pie.rb +115 -0
- data/lib/sirena/diagram/quadrant.rb +138 -0
- data/lib/sirena/diagram/radar.rb +52 -0
- data/lib/sirena/diagram/requirement.rb +133 -0
- data/lib/sirena/diagram/sankey.rb +217 -0
- data/lib/sirena/diagram/sequence.rb +242 -0
- data/lib/sirena/diagram/state_diagram.rb +237 -0
- data/lib/sirena/diagram/timeline.rb +171 -0
- data/lib/sirena/diagram/treemap.rb +84 -0
- data/lib/sirena/diagram/user_journey.rb +149 -0
- data/lib/sirena/diagram/xy_chart.rb +76 -0
- data/lib/sirena/diagram.rb +8 -0
- data/lib/sirena/diagram_registry.rb +101 -0
- data/lib/sirena/engine.rb +292 -0
- data/lib/sirena/parser/architecture.rb +41 -0
- data/lib/sirena/parser/base.rb +41 -0
- data/lib/sirena/parser/block.rb +72 -0
- data/lib/sirena/parser/c4.rb +53 -0
- data/lib/sirena/parser/class_diagram.rb +63 -0
- data/lib/sirena/parser/er_diagram.rb +40 -0
- data/lib/sirena/parser/error.rb +49 -0
- data/lib/sirena/parser/flowchart.rb +71 -0
- data/lib/sirena/parser/gantt.rb +60 -0
- data/lib/sirena/parser/git_graph.rb +95 -0
- data/lib/sirena/parser/grammars/architecture.rb +145 -0
- data/lib/sirena/parser/grammars/block.rb +190 -0
- data/lib/sirena/parser/grammars/c4.rb +226 -0
- data/lib/sirena/parser/grammars/class_diagram.rb +284 -0
- data/lib/sirena/parser/grammars/common.rb +84 -0
- data/lib/sirena/parser/grammars/er_diagram.rb +114 -0
- data/lib/sirena/parser/grammars/error.rb +40 -0
- data/lib/sirena/parser/grammars/flowchart.rb +298 -0
- data/lib/sirena/parser/grammars/gantt.rb +252 -0
- data/lib/sirena/parser/grammars/git_graph.rb +167 -0
- data/lib/sirena/parser/grammars/info.rb +58 -0
- data/lib/sirena/parser/grammars/kanban.rb +83 -0
- data/lib/sirena/parser/grammars/mindmap.rb +115 -0
- data/lib/sirena/parser/grammars/packet.rb +73 -0
- data/lib/sirena/parser/grammars/pie.rb +128 -0
- data/lib/sirena/parser/grammars/quadrant.rb +199 -0
- data/lib/sirena/parser/grammars/radar.rb +150 -0
- data/lib/sirena/parser/grammars/requirement.rb +188 -0
- data/lib/sirena/parser/grammars/sankey.rb +104 -0
- data/lib/sirena/parser/grammars/sequence.rb +247 -0
- data/lib/sirena/parser/grammars/state_diagram.rb +172 -0
- data/lib/sirena/parser/grammars/timeline.rb +142 -0
- data/lib/sirena/parser/grammars/treemap.rb +120 -0
- data/lib/sirena/parser/grammars/xy_chart.rb +120 -0
- data/lib/sirena/parser/info.rb +49 -0
- data/lib/sirena/parser/kanban.rb +97 -0
- data/lib/sirena/parser/mindmap.rb +106 -0
- data/lib/sirena/parser/packet.rb +76 -0
- data/lib/sirena/parser/pie.rb +49 -0
- data/lib/sirena/parser/quadrant.rb +57 -0
- data/lib/sirena/parser/radar.rb +104 -0
- data/lib/sirena/parser/requirement.rb +70 -0
- data/lib/sirena/parser/sankey.rb +64 -0
- data/lib/sirena/parser/sequence.rb +51 -0
- data/lib/sirena/parser/state_diagram.rb +69 -0
- data/lib/sirena/parser/timeline.rb +57 -0
- data/lib/sirena/parser/transforms/architecture.rb +97 -0
- data/lib/sirena/parser/transforms/block.rb +254 -0
- data/lib/sirena/parser/transforms/c4.rb +347 -0
- data/lib/sirena/parser/transforms/class_diagram.rb +352 -0
- data/lib/sirena/parser/transforms/er_diagram.rb +169 -0
- data/lib/sirena/parser/transforms/error.rb +58 -0
- data/lib/sirena/parser/transforms/flowchart.rb +293 -0
- data/lib/sirena/parser/transforms/gantt.rb +215 -0
- data/lib/sirena/parser/transforms/git_graph.rb +160 -0
- data/lib/sirena/parser/transforms/info.rb +58 -0
- data/lib/sirena/parser/transforms/kanban.rb +176 -0
- data/lib/sirena/parser/transforms/mindmap.rb +227 -0
- data/lib/sirena/parser/transforms/packet.rb +63 -0
- data/lib/sirena/parser/transforms/pie.rb +143 -0
- data/lib/sirena/parser/transforms/quadrant.rb +177 -0
- data/lib/sirena/parser/transforms/radar.rb +126 -0
- data/lib/sirena/parser/transforms/requirement.rb +272 -0
- data/lib/sirena/parser/transforms/sankey.rb +122 -0
- data/lib/sirena/parser/transforms/sequence.rb +342 -0
- data/lib/sirena/parser/transforms/state_diagram.rb +292 -0
- data/lib/sirena/parser/transforms/timeline.rb +177 -0
- data/lib/sirena/parser/transforms/treemap.rb +81 -0
- data/lib/sirena/parser/transforms/xy_chart.rb +132 -0
- data/lib/sirena/parser/treemap.rb +98 -0
- data/lib/sirena/parser/user_journey.rb +120 -0
- data/lib/sirena/parser/xy_chart.rb +114 -0
- data/lib/sirena/parser.rb +8 -0
- data/lib/sirena/renderer/architecture.rb +251 -0
- data/lib/sirena/renderer/base.rb +251 -0
- data/lib/sirena/renderer/block.rb +286 -0
- data/lib/sirena/renderer/c4.rb +490 -0
- data/lib/sirena/renderer/class_diagram.rb +499 -0
- data/lib/sirena/renderer/er_diagram.rb +417 -0
- data/lib/sirena/renderer/error.rb +131 -0
- data/lib/sirena/renderer/flowchart.rb +301 -0
- data/lib/sirena/renderer/gantt.rb +331 -0
- data/lib/sirena/renderer/git_graph.rb +368 -0
- data/lib/sirena/renderer/info.rb +93 -0
- data/lib/sirena/renderer/kanban.rb +295 -0
- data/lib/sirena/renderer/mindmap.rb +396 -0
- data/lib/sirena/renderer/packet.rb +239 -0
- data/lib/sirena/renderer/pie.rb +235 -0
- data/lib/sirena/renderer/quadrant.rb +292 -0
- data/lib/sirena/renderer/radar.rb +323 -0
- data/lib/sirena/renderer/requirement.rb +371 -0
- data/lib/sirena/renderer/sankey.rb +255 -0
- data/lib/sirena/renderer/sequence.rb +424 -0
- data/lib/sirena/renderer/state_diagram.rb +328 -0
- data/lib/sirena/renderer/timeline.rb +304 -0
- data/lib/sirena/renderer/treemap.rb +152 -0
- data/lib/sirena/renderer/user_journey.rb +331 -0
- data/lib/sirena/renderer/xy_chart.rb +452 -0
- data/lib/sirena/renderer.rb +8 -0
- data/lib/sirena/svg/circle.rb +41 -0
- data/lib/sirena/svg/document.rb +103 -0
- data/lib/sirena/svg/element.rb +65 -0
- data/lib/sirena/svg/ellipse.rb +33 -0
- data/lib/sirena/svg/group.rb +71 -0
- data/lib/sirena/svg/line.rb +49 -0
- data/lib/sirena/svg/path.rb +76 -0
- data/lib/sirena/svg/polygon.rb +43 -0
- data/lib/sirena/svg/polyline.rb +35 -0
- data/lib/sirena/svg/rect.rb +57 -0
- data/lib/sirena/svg/style.rb +44 -0
- data/lib/sirena/svg/text.rb +72 -0
- data/lib/sirena/svg.rb +19 -0
- data/lib/sirena/text_measurement.rb +71 -0
- data/lib/sirena/theme/builtin/dark.yml +70 -0
- data/lib/sirena/theme/builtin/default.yml +80 -0
- data/lib/sirena/theme/builtin/high_contrast.yml +70 -0
- data/lib/sirena/theme/builtin/light.yml +70 -0
- data/lib/sirena/theme/color_palette.rb +48 -0
- data/lib/sirena/theme/effect_styles.rb +28 -0
- data/lib/sirena/theme/registry.rb +41 -0
- data/lib/sirena/theme/shape_styles.rb +28 -0
- data/lib/sirena/theme/spacing_config.rb +24 -0
- data/lib/sirena/theme/typography.rb +30 -0
- data/lib/sirena/theme.rb +69 -0
- data/lib/sirena/transform/architecture.rb +273 -0
- data/lib/sirena/transform/base.rb +199 -0
- data/lib/sirena/transform/block.rb +215 -0
- data/lib/sirena/transform/c4.rb +288 -0
- data/lib/sirena/transform/class_diagram.rb +296 -0
- data/lib/sirena/transform/er_diagram.rb +204 -0
- data/lib/sirena/transform/error.rb +39 -0
- data/lib/sirena/transform/flowchart.rb +161 -0
- data/lib/sirena/transform/gantt.rb +253 -0
- data/lib/sirena/transform/git_graph.rb +283 -0
- data/lib/sirena/transform/info.rb +39 -0
- data/lib/sirena/transform/kanban.rb +180 -0
- data/lib/sirena/transform/mindmap.rb +251 -0
- data/lib/sirena/transform/packet.rb +185 -0
- data/lib/sirena/transform/pie.rb +62 -0
- data/lib/sirena/transform/quadrant.rb +167 -0
- data/lib/sirena/transform/radar.rb +227 -0
- data/lib/sirena/transform/requirement.rb +233 -0
- data/lib/sirena/transform/sankey.rb +212 -0
- data/lib/sirena/transform/sequence.rb +143 -0
- data/lib/sirena/transform/state_diagram.rb +228 -0
- data/lib/sirena/transform/timeline.rb +139 -0
- data/lib/sirena/transform/treemap.rb +120 -0
- data/lib/sirena/transform/user_journey.rb +207 -0
- data/lib/sirena/transform/xy_chart.rb +273 -0
- data/lib/sirena/transform.rb +8 -0
- data/lib/sirena/version.rb +5 -0
- data/lib/sirena.rb +328 -0
- data/lib/tasks/benchmark.rake +532 -0
- data/lib/tasks/examples.rake +468 -0
- data/lib/tasks/generate_mermaid_fixtures.rake +363 -0
- data/lib/tasks/mermaid_fixtures.rake +46 -0
- data/scripts/extract_mermaid_tests.rb +493 -0
- data/scripts/rename_to_sirena.rb +73 -0
- data/sirena.gemspec +47 -0
- metadata +529 -0
|
@@ -0,0 +1,43 @@
|
|
|
1
|
+
<svg
|
|
2
|
+
width="800.0"
|
|
3
|
+
height="379.0"
|
|
4
|
+
viewBox="0 0 800.0 379.0"
|
|
5
|
+
version="1.2"
|
|
6
|
+
xmlns="http://www.w3.org/2000/svg"
|
|
7
|
+
>
|
|
8
|
+
<rect fill="#ffffff" stroke="#d1d5db" stroke-width="1" x="40.0" y="40.0" width="200.0" height="299.0" rx="8.0" ry="8.0"/>
|
|
9
|
+
<rect fill="#007bff" x="40.0" y="40.0" width="200.0" height="50.0" rx="8.0" ry="8.0"/>
|
|
10
|
+
<text fill="#ffffff" x="140.0" y="70.0" text-anchor="middle" font-family="Arial, Helvetica, sans-serif" font-size="14" font-weight="bold">Todo</text>
|
|
11
|
+
<rect fill="#ffffff" opacity="0.3" x="215.0" y="55.0" width="20.0" height="20.0" rx="10.0" ry="10.0"/>
|
|
12
|
+
<text fill="#ffffff" x="225.0" y="69.0" text-anchor="middle" font-size="11" font-weight="bold">2</text>
|
|
13
|
+
<rect fill="#ffffff" stroke="#d1d5db" stroke-width="1" x="300.0" y="40.0" width="200.0" height="204.0" rx="8.0" ry="8.0"/>
|
|
14
|
+
<rect fill="#007bff" x="300.0" y="40.0" width="200.0" height="50.0" rx="8.0" ry="8.0"/>
|
|
15
|
+
<text fill="#ffffff" x="400.0" y="70.0" text-anchor="middle" font-family="Arial, Helvetica, sans-serif" font-size="14" font-weight="bold">In Progress</text>
|
|
16
|
+
<rect fill="#ffffff" opacity="0.3" x="475.0" y="55.0" width="20.0" height="20.0" rx="10.0" ry="10.0"/>
|
|
17
|
+
<text fill="#ffffff" x="485.0" y="69.0" text-anchor="middle" font-size="11" font-weight="bold">1</text>
|
|
18
|
+
<rect fill="#ffffff" stroke="#d1d5db" stroke-width="1" x="560.0" y="40.0" width="200.0" height="150.0" rx="8.0" ry="8.0"/>
|
|
19
|
+
<rect fill="#007bff" x="560.0" y="40.0" width="200.0" height="50.0" rx="8.0" ry="8.0"/>
|
|
20
|
+
<text fill="#ffffff" x="660.0" y="70.0" text-anchor="middle" font-family="Arial, Helvetica, sans-serif" font-size="14" font-weight="bold">Done</text>
|
|
21
|
+
<rect fill="#ffffff" opacity="0.3" x="735.0" y="55.0" width="20.0" height="20.0" rx="10.0" ry="10.0"/>
|
|
22
|
+
<text fill="#ffffff" x="745.0" y="69.0" text-anchor="middle" font-size="11" font-weight="bold">1</text>
|
|
23
|
+
<rect fill="#ffffff" stroke="#d1d5db" stroke-width="1" x="50.0" y="100.0" width="180.0" height="116.0" rx="6.0" ry="6.0"/>
|
|
24
|
+
<text fill="#1f2937" x="60.0" y="125.0" font-family="Arial, Helvetica, sans-serif" font-size="13">Create Documentation</text>
|
|
25
|
+
<text fill="#6c757d" x="60.0" y="150.0" font-family="Arial, Helvetica, sans-serif" font-size="10">Ticket:</text>
|
|
26
|
+
<text fill="#1f2937" x="120.0" y="150.0" font-family="Arial, Helvetica, sans-serif" font-size="10" font-weight="bold">DOC-001</text>
|
|
27
|
+
<text fill="#6c757d" x="60.0" y="168.0" font-family="Arial, Helvetica, sans-serif" font-size="10">Priority:</text>
|
|
28
|
+
<text fill="#1f2937" x="120.0" y="168.0" font-family="Arial, Helvetica, sans-serif" font-size="10" font-weight="bold">High</text>
|
|
29
|
+
<rect fill="#ffffff" stroke="#d1d5db" stroke-width="1" x="50.0" y="231.0" width="180.0" height="98.0" rx="6.0" ry="6.0"/>
|
|
30
|
+
<text fill="#1f2937" x="60.0" y="256.0" font-family="Arial, Helvetica, sans-serif" font-size="13">Write Tests</text>
|
|
31
|
+
<text fill="#6c757d" x="60.0" y="281.0" font-family="Arial, Helvetica, sans-serif" font-size="10">Assigned:</text>
|
|
32
|
+
<text fill="#1f2937" x="120.0" y="281.0" font-family="Arial, Helvetica, sans-serif" font-size="10" font-weight="bold">dev1</text>
|
|
33
|
+
<rect fill="#ffffff" stroke="#d1d5db" stroke-width="1" x="310.0" y="100.0" width="180.0" height="134.0" rx="6.0" ry="6.0"/>
|
|
34
|
+
<text fill="#1f2937" x="320.0" y="125.0" font-family="Arial, Helvetica, sans-serif" font-size="13">Implement Feature X</text>
|
|
35
|
+
<text fill="#6c757d" x="320.0" y="150.0" font-family="Arial, Helvetica, sans-serif" font-size="10">Assigned:</text>
|
|
36
|
+
<text fill="#1f2937" x="380.0" y="150.0" font-family="Arial, Helvetica, sans-serif" font-size="10" font-weight="bold">dev2</text>
|
|
37
|
+
<text fill="#6c757d" x="320.0" y="168.0" font-family="Arial, Helvetica, sans-serif" font-size="10">Ticket:</text>
|
|
38
|
+
<text fill="#1f2937" x="380.0" y="168.0" font-family="Arial, Helvetica, sans-serif" font-size="10" font-weight="bold">FEAT-023</text>
|
|
39
|
+
<text fill="#6c757d" x="320.0" y="186.0" font-family="Arial, Helvetica, sans-serif" font-size="10">Priority:</text>
|
|
40
|
+
<text fill="#1f2937" x="380.0" y="186.0" font-family="Arial, Helvetica, sans-serif" font-size="10" font-weight="bold">Critical</text>
|
|
41
|
+
<rect fill="#ffffff" stroke="#d1d5db" stroke-width="1" x="570.0" y="100.0" width="180.0" height="80.0" rx="6.0" ry="6.0"/>
|
|
42
|
+
<text fill="#1f2937" x="580.0" y="125.0" font-family="Arial, Helvetica, sans-serif" font-size="13">Release v1.0</text>
|
|
43
|
+
</svg>
|
|
@@ -0,0 +1,79 @@
|
|
|
1
|
+
= Kanban Board Examples
|
|
2
|
+
|
|
3
|
+
== Purpose
|
|
4
|
+
|
|
5
|
+
Kanban boards visualize workflow status, showing tasks moving through different stages from backlog to completion.
|
|
6
|
+
|
|
7
|
+
== When to Use
|
|
8
|
+
|
|
9
|
+
* Agile project management
|
|
10
|
+
* Workflow visualization
|
|
11
|
+
* Task tracking and status monitoring
|
|
12
|
+
* Team collaboration
|
|
13
|
+
* Process optimization
|
|
14
|
+
|
|
15
|
+
== Syntax Overview
|
|
16
|
+
|
|
17
|
+
[source,mermaid]
|
|
18
|
+
----
|
|
19
|
+
kanban
|
|
20
|
+
Todo
|
|
21
|
+
Task 1
|
|
22
|
+
Task 2
|
|
23
|
+
In Progress
|
|
24
|
+
Task 3
|
|
25
|
+
Done
|
|
26
|
+
Task 4
|
|
27
|
+
----
|
|
28
|
+
|
|
29
|
+
== Examples
|
|
30
|
+
|
|
31
|
+
=== 01: Simple Board
|
|
32
|
+
|
|
33
|
+
Demonstrates basic kanban board with three columns.
|
|
34
|
+
|
|
35
|
+
**File**: link:01-simple-board.mmd[01-simple-board.mmd]
|
|
36
|
+
|
|
37
|
+
[source,mermaid]
|
|
38
|
+
----
|
|
39
|
+
include::01-simple-board.mmd[]
|
|
40
|
+
----
|
|
41
|
+
|
|
42
|
+
image::01-simple-board.svg[]
|
|
43
|
+
|
|
44
|
+
=== 02: Workflow
|
|
45
|
+
|
|
46
|
+
Showcases complete workflow with multiple stages and tasks.
|
|
47
|
+
|
|
48
|
+
**File**: link:02-workflow.mmd[02-workflow.mmd]
|
|
49
|
+
|
|
50
|
+
[source,mermaid]
|
|
51
|
+
----
|
|
52
|
+
include::02-workflow.mmd[]
|
|
53
|
+
----
|
|
54
|
+
|
|
55
|
+
image::02-workflow.svg[]
|
|
56
|
+
|
|
57
|
+
== Features Demonstrated
|
|
58
|
+
|
|
59
|
+
[%header,cols="1,1"]
|
|
60
|
+
|===
|
|
61
|
+
| Feature | Example
|
|
62
|
+
|
|
63
|
+
| Basic board layout
|
|
64
|
+
| 01, 02
|
|
65
|
+
|
|
66
|
+
| Multiple columns
|
|
67
|
+
| 01, 02
|
|
68
|
+
|
|
69
|
+
| Task cards
|
|
70
|
+
| 01, 02
|
|
71
|
+
|
|
72
|
+
| Workflow stages
|
|
73
|
+
| 02
|
|
74
|
+
|===
|
|
75
|
+
|
|
76
|
+
== Additional Resources
|
|
77
|
+
|
|
78
|
+
* link:../../README.adoc[Main Documentation]
|
|
79
|
+
* https://mermaid.js.org/syntax/kanban.html[Mermaid Kanban Documentation]
|
|
@@ -0,0 +1,61 @@
|
|
|
1
|
+
<svg
|
|
2
|
+
width="2508.0"
|
|
3
|
+
height="520.0"
|
|
4
|
+
viewBox="0 0 2508.0 520.0"
|
|
5
|
+
version="1.2"
|
|
6
|
+
xmlns="http://www.w3.org/2000/svg"
|
|
7
|
+
>
|
|
8
|
+
<path fill="none" stroke="#007bff" stroke-width="2" d="M 1254 80 C 1254 130, 346 130, 346 180"/>
|
|
9
|
+
<path fill="none" stroke="#6c757d" stroke-width="2" d="M 346 200 C 346 250, 118 250, 118 300"/>
|
|
10
|
+
<path fill="none" stroke="#6c757d" stroke-width="2" d="M 346 200 C 346 250, 346 250, 346 300"/>
|
|
11
|
+
<path fill="none" stroke="#6c757d" stroke-width="2" d="M 346 200 C 346 250, 574 250, 574 300"/>
|
|
12
|
+
<path fill="none" stroke="#007bff" stroke-width="2" d="M 1254 80 C 1254 130, 1132 130, 1132 180"/>
|
|
13
|
+
<path fill="none" stroke="#6c757d" stroke-width="2" d="M 1132 200 C 1132 250, 912 250, 912 300"/>
|
|
14
|
+
<path fill="none" stroke="#28a745" stroke-width="2" d="M 912 320 C 912 370, 802 370, 802 420"/>
|
|
15
|
+
<path fill="none" stroke="#28a745" stroke-width="2" d="M 912 320 C 912 370, 1022 370, 1022 420"/>
|
|
16
|
+
<path fill="none" stroke="#6c757d" stroke-width="2" d="M 1132 200 C 1132 250, 1352 250, 1352 300"/>
|
|
17
|
+
<path fill="none" stroke="#28a745" stroke-width="2" d="M 1352 320 C 1352 370, 1242 370, 1242 420"/>
|
|
18
|
+
<path fill="none" stroke="#28a745" stroke-width="2" d="M 1352 320 C 1352 370, 1462 370, 1462 420"/>
|
|
19
|
+
<path fill="none" stroke="#007bff" stroke-width="2" d="M 1254 80 C 1254 130, 1820 130, 1820 180"/>
|
|
20
|
+
<path fill="none" stroke="#6c757d" stroke-width="2" d="M 1820 200 C 1820 250, 1682 250, 1682 300"/>
|
|
21
|
+
<path fill="none" stroke="#6c757d" stroke-width="2" d="M 1820 200 C 1820 250, 1930 250, 1930 300"/>
|
|
22
|
+
<path fill="none" stroke="#007bff" stroke-width="2" d="M 1254 80 C 1254 130, 2288 130, 2288 180"/>
|
|
23
|
+
<path fill="none" stroke="#6c757d" stroke-width="2" d="M 2288 200 C 2288 250, 2178 250, 2178 300"/>
|
|
24
|
+
<path fill="none" stroke="#6c757d" stroke-width="2" d="M 2288 200 C 2288 250, 2398 250, 2398 300"/>
|
|
25
|
+
<circle fill="#e6f2ff" stroke="#007bff" stroke-width="2" cx="1254.0" cy="168.0" r="108.0"/>
|
|
26
|
+
<text fill="#000000" x="1254.0" y="173.0" text-anchor="middle" font-family="Arial, Helvetica, sans-serif" font-size="12">Software Development</text>
|
|
27
|
+
<rect fill="#f0f1f2" stroke="#6c757d" stroke-width="2" x="296.0" y="180.0" width="100.0" height="40.0" rx="5.0" ry="5.0"/>
|
|
28
|
+
<text fill="#000000" x="346.0" y="205.0" text-anchor="middle" font-family="Arial, Helvetica, sans-serif" font-size="12">Planning</text>
|
|
29
|
+
<rect fill="#eaf6ec" stroke="#28a745" stroke-width="2" x="60.0" y="300.0" width="116.0" height="40.0" rx="5.0" ry="5.0"/>
|
|
30
|
+
<text fill="#000000" x="118.0" y="325.0" text-anchor="middle" font-family="Arial, Helvetica, sans-serif" font-size="12">Requirements</text>
|
|
31
|
+
<rect fill="#eaf6ec" stroke="#28a745" stroke-width="2" x="296.0" y="300.0" width="100.0" height="40.0" rx="5.0" ry="5.0"/>
|
|
32
|
+
<text fill="#000000" x="346.0" y="325.0" text-anchor="middle" font-family="Arial, Helvetica, sans-serif" font-size="12">Design</text>
|
|
33
|
+
<rect fill="#eaf6ec" stroke="#28a745" stroke-width="2" x="516.0" y="300.0" width="116.0" height="40.0" rx="5.0" ry="5.0"/>
|
|
34
|
+
<text fill="#000000" x="574.0" y="325.0" text-anchor="middle" font-family="Arial, Helvetica, sans-serif" font-size="12">Architecture</text>
|
|
35
|
+
<rect fill="#f0f1f2" stroke="#6c757d" stroke-width="2" x="1078.0" y="180.0" width="108.0" height="40.0" rx="5.0" ry="5.0"/>
|
|
36
|
+
<text fill="#000000" x="1132.0" y="205.0" text-anchor="middle" font-family="Arial, Helvetica, sans-serif" font-size="12">Development</text>
|
|
37
|
+
<rect fill="#eaf6ec" stroke="#28a745" stroke-width="2" x="862.0" y="300.0" width="100.0" height="40.0" rx="5.0" ry="5.0"/>
|
|
38
|
+
<text fill="#000000" x="912.0" y="325.0" text-anchor="middle" font-family="Arial, Helvetica, sans-serif" font-size="12">Frontend</text>
|
|
39
|
+
<rect fill="#fdeee7" stroke="#ea580c" stroke-width="2" x="752.0" y="420.0" width="100.0" height="40.0" rx="5.0" ry="5.0"/>
|
|
40
|
+
<text fill="#000000" x="802.0" y="445.0" text-anchor="middle" font-family="Arial, Helvetica, sans-serif" font-size="12">React</text>
|
|
41
|
+
<rect fill="#fdeee7" stroke="#ea580c" stroke-width="2" x="972.0" y="420.0" width="100.0" height="40.0" rx="5.0" ry="5.0"/>
|
|
42
|
+
<text fill="#000000" x="1022.0" y="445.0" text-anchor="middle" font-family="Arial, Helvetica, sans-serif" font-size="12">Vue</text>
|
|
43
|
+
<rect fill="#eaf6ec" stroke="#28a745" stroke-width="2" x="1302.0" y="300.0" width="100.0" height="40.0" rx="5.0" ry="5.0"/>
|
|
44
|
+
<text fill="#000000" x="1352.0" y="325.0" text-anchor="middle" font-family="Arial, Helvetica, sans-serif" font-size="12">Backend</text>
|
|
45
|
+
<rect fill="#fdeee7" stroke="#ea580c" stroke-width="2" x="1192.0" y="420.0" width="100.0" height="40.0" rx="5.0" ry="5.0"/>
|
|
46
|
+
<text fill="#000000" x="1242.0" y="445.0" text-anchor="middle" font-family="Arial, Helvetica, sans-serif" font-size="12">Ruby</text>
|
|
47
|
+
<rect fill="#fdeee7" stroke="#ea580c" stroke-width="2" x="1412.0" y="420.0" width="100.0" height="40.0" rx="5.0" ry="5.0"/>
|
|
48
|
+
<text fill="#000000" x="1462.0" y="445.0" text-anchor="middle" font-family="Arial, Helvetica, sans-serif" font-size="12">Python</text>
|
|
49
|
+
<rect fill="#f0f1f2" stroke="#6c757d" stroke-width="2" x="1770.0" y="180.0" width="100.0" height="40.0" rx="5.0" ry="5.0"/>
|
|
50
|
+
<text fill="#000000" x="1820.0" y="205.0" text-anchor="middle" font-family="Arial, Helvetica, sans-serif" font-size="12">Testing</text>
|
|
51
|
+
<rect fill="#eaf6ec" stroke="#28a745" stroke-width="2" x="1632.0" y="300.0" width="100.0" height="40.0" rx="5.0" ry="5.0"/>
|
|
52
|
+
<text fill="#000000" x="1682.0" y="325.0" text-anchor="middle" font-family="Arial, Helvetica, sans-serif" font-size="12">Unit Tests</text>
|
|
53
|
+
<rect fill="#eaf6ec" stroke="#28a745" stroke-width="2" x="1852.0" y="300.0" width="156.0" height="40.0" rx="5.0" ry="5.0"/>
|
|
54
|
+
<text fill="#000000" x="1930.0" y="325.0" text-anchor="middle" font-family="Arial, Helvetica, sans-serif" font-size="12">Integration Tests</text>
|
|
55
|
+
<rect fill="#f0f1f2" stroke="#6c757d" stroke-width="2" x="2238.0" y="180.0" width="100.0" height="40.0" rx="5.0" ry="5.0"/>
|
|
56
|
+
<text fill="#000000" x="2288.0" y="205.0" text-anchor="middle" font-family="Arial, Helvetica, sans-serif" font-size="12">Deployment</text>
|
|
57
|
+
<rect fill="#eaf6ec" stroke="#28a745" stroke-width="2" x="2128.0" y="300.0" width="100.0" height="40.0" rx="5.0" ry="5.0"/>
|
|
58
|
+
<text fill="#000000" x="2178.0" y="325.0" text-anchor="middle" font-family="Arial, Helvetica, sans-serif" font-size="12">CI/CD</text>
|
|
59
|
+
<rect fill="#eaf6ec" stroke="#28a745" stroke-width="2" x="2348.0" y="300.0" width="100.0" height="40.0" rx="5.0" ry="5.0"/>
|
|
60
|
+
<text fill="#000000" x="2398.0" y="325.0" text-anchor="middle" font-family="Arial, Helvetica, sans-serif" font-size="12">Monitoring</text>
|
|
61
|
+
</svg>
|
|
@@ -0,0 +1,61 @@
|
|
|
1
|
+
<svg
|
|
2
|
+
width="2508.0"
|
|
3
|
+
height="520.0"
|
|
4
|
+
viewBox="0 0 2508.0 520.0"
|
|
5
|
+
version="1.2"
|
|
6
|
+
xmlns="http://www.w3.org/2000/svg"
|
|
7
|
+
>
|
|
8
|
+
<path fill="none" stroke="#007bff" stroke-width="2" d="M 1254 80 C 1254 130, 346 130, 346 180"/>
|
|
9
|
+
<path fill="none" stroke="#6c757d" stroke-width="2" d="M 346 200 C 346 250, 118 250, 118 300"/>
|
|
10
|
+
<path fill="none" stroke="#6c757d" stroke-width="2" d="M 346 200 C 346 250, 346 250, 346 300"/>
|
|
11
|
+
<path fill="none" stroke="#6c757d" stroke-width="2" d="M 346 200 C 346 250, 574 250, 574 300"/>
|
|
12
|
+
<path fill="none" stroke="#007bff" stroke-width="2" d="M 1254 80 C 1254 130, 1132 130, 1132 180"/>
|
|
13
|
+
<path fill="none" stroke="#6c757d" stroke-width="2" d="M 1132 200 C 1132 250, 912 250, 912 300"/>
|
|
14
|
+
<path fill="none" stroke="#28a745" stroke-width="2" d="M 912 320 C 912 370, 802 370, 802 420"/>
|
|
15
|
+
<path fill="none" stroke="#28a745" stroke-width="2" d="M 912 320 C 912 370, 1022 370, 1022 420"/>
|
|
16
|
+
<path fill="none" stroke="#6c757d" stroke-width="2" d="M 1132 200 C 1132 250, 1352 250, 1352 300"/>
|
|
17
|
+
<path fill="none" stroke="#28a745" stroke-width="2" d="M 1352 320 C 1352 370, 1242 370, 1242 420"/>
|
|
18
|
+
<path fill="none" stroke="#28a745" stroke-width="2" d="M 1352 320 C 1352 370, 1462 370, 1462 420"/>
|
|
19
|
+
<path fill="none" stroke="#007bff" stroke-width="2" d="M 1254 80 C 1254 130, 1820 130, 1820 180"/>
|
|
20
|
+
<path fill="none" stroke="#6c757d" stroke-width="2" d="M 1820 200 C 1820 250, 1682 250, 1682 300"/>
|
|
21
|
+
<path fill="none" stroke="#6c757d" stroke-width="2" d="M 1820 200 C 1820 250, 1930 250, 1930 300"/>
|
|
22
|
+
<path fill="none" stroke="#007bff" stroke-width="2" d="M 1254 80 C 1254 130, 2288 130, 2288 180"/>
|
|
23
|
+
<path fill="none" stroke="#6c757d" stroke-width="2" d="M 2288 200 C 2288 250, 2178 250, 2178 300"/>
|
|
24
|
+
<path fill="none" stroke="#6c757d" stroke-width="2" d="M 2288 200 C 2288 250, 2398 250, 2398 300"/>
|
|
25
|
+
<circle fill="#e6f2ff" stroke="#007bff" stroke-width="2" cx="1254.0" cy="168.0" r="108.0"/>
|
|
26
|
+
<text fill="#000000" x="1254.0" y="173.0" text-anchor="middle" font-family="Arial, Helvetica, sans-serif" font-size="12">Software Development</text>
|
|
27
|
+
<rect fill="#f0f1f2" stroke="#6c757d" stroke-width="2" x="296.0" y="180.0" width="100.0" height="40.0" rx="5.0" ry="5.0"/>
|
|
28
|
+
<text fill="#000000" x="346.0" y="205.0" text-anchor="middle" font-family="Arial, Helvetica, sans-serif" font-size="12">Planning</text>
|
|
29
|
+
<rect fill="#eaf6ec" stroke="#28a745" stroke-width="2" x="60.0" y="300.0" width="116.0" height="40.0" rx="5.0" ry="5.0"/>
|
|
30
|
+
<text fill="#000000" x="118.0" y="325.0" text-anchor="middle" font-family="Arial, Helvetica, sans-serif" font-size="12">Requirements</text>
|
|
31
|
+
<rect fill="#eaf6ec" stroke="#28a745" stroke-width="2" x="296.0" y="300.0" width="100.0" height="40.0" rx="5.0" ry="5.0"/>
|
|
32
|
+
<text fill="#000000" x="346.0" y="325.0" text-anchor="middle" font-family="Arial, Helvetica, sans-serif" font-size="12">Design</text>
|
|
33
|
+
<rect fill="#eaf6ec" stroke="#28a745" stroke-width="2" x="516.0" y="300.0" width="116.0" height="40.0" rx="5.0" ry="5.0"/>
|
|
34
|
+
<text fill="#000000" x="574.0" y="325.0" text-anchor="middle" font-family="Arial, Helvetica, sans-serif" font-size="12">Architecture</text>
|
|
35
|
+
<rect fill="#f0f1f2" stroke="#6c757d" stroke-width="2" x="1078.0" y="180.0" width="108.0" height="40.0" rx="5.0" ry="5.0"/>
|
|
36
|
+
<text fill="#000000" x="1132.0" y="205.0" text-anchor="middle" font-family="Arial, Helvetica, sans-serif" font-size="12">Development</text>
|
|
37
|
+
<rect fill="#eaf6ec" stroke="#28a745" stroke-width="2" x="862.0" y="300.0" width="100.0" height="40.0" rx="5.0" ry="5.0"/>
|
|
38
|
+
<text fill="#000000" x="912.0" y="325.0" text-anchor="middle" font-family="Arial, Helvetica, sans-serif" font-size="12">Frontend</text>
|
|
39
|
+
<rect fill="#fdeee7" stroke="#ea580c" stroke-width="2" x="752.0" y="420.0" width="100.0" height="40.0" rx="5.0" ry="5.0"/>
|
|
40
|
+
<text fill="#000000" x="802.0" y="445.0" text-anchor="middle" font-family="Arial, Helvetica, sans-serif" font-size="12">React</text>
|
|
41
|
+
<rect fill="#fdeee7" stroke="#ea580c" stroke-width="2" x="972.0" y="420.0" width="100.0" height="40.0" rx="5.0" ry="5.0"/>
|
|
42
|
+
<text fill="#000000" x="1022.0" y="445.0" text-anchor="middle" font-family="Arial, Helvetica, sans-serif" font-size="12">Vue</text>
|
|
43
|
+
<rect fill="#eaf6ec" stroke="#28a745" stroke-width="2" x="1302.0" y="300.0" width="100.0" height="40.0" rx="5.0" ry="5.0"/>
|
|
44
|
+
<text fill="#000000" x="1352.0" y="325.0" text-anchor="middle" font-family="Arial, Helvetica, sans-serif" font-size="12">Backend</text>
|
|
45
|
+
<rect fill="#fdeee7" stroke="#ea580c" stroke-width="2" x="1192.0" y="420.0" width="100.0" height="40.0" rx="5.0" ry="5.0"/>
|
|
46
|
+
<text fill="#000000" x="1242.0" y="445.0" text-anchor="middle" font-family="Arial, Helvetica, sans-serif" font-size="12">Ruby</text>
|
|
47
|
+
<rect fill="#fdeee7" stroke="#ea580c" stroke-width="2" x="1412.0" y="420.0" width="100.0" height="40.0" rx="5.0" ry="5.0"/>
|
|
48
|
+
<text fill="#000000" x="1462.0" y="445.0" text-anchor="middle" font-family="Arial, Helvetica, sans-serif" font-size="12">Python</text>
|
|
49
|
+
<rect fill="#f0f1f2" stroke="#6c757d" stroke-width="2" x="1770.0" y="180.0" width="100.0" height="40.0" rx="5.0" ry="5.0"/>
|
|
50
|
+
<text fill="#000000" x="1820.0" y="205.0" text-anchor="middle" font-family="Arial, Helvetica, sans-serif" font-size="12">Testing</text>
|
|
51
|
+
<rect fill="#eaf6ec" stroke="#28a745" stroke-width="2" x="1632.0" y="300.0" width="100.0" height="40.0" rx="5.0" ry="5.0"/>
|
|
52
|
+
<text fill="#000000" x="1682.0" y="325.0" text-anchor="middle" font-family="Arial, Helvetica, sans-serif" font-size="12">Unit Tests</text>
|
|
53
|
+
<rect fill="#eaf6ec" stroke="#28a745" stroke-width="2" x="1852.0" y="300.0" width="156.0" height="40.0" rx="5.0" ry="5.0"/>
|
|
54
|
+
<text fill="#000000" x="1930.0" y="325.0" text-anchor="middle" font-family="Arial, Helvetica, sans-serif" font-size="12">Integration Tests</text>
|
|
55
|
+
<rect fill="#f0f1f2" stroke="#6c757d" stroke-width="2" x="2238.0" y="180.0" width="100.0" height="40.0" rx="5.0" ry="5.0"/>
|
|
56
|
+
<text fill="#000000" x="2288.0" y="205.0" text-anchor="middle" font-family="Arial, Helvetica, sans-serif" font-size="12">Deployment</text>
|
|
57
|
+
<rect fill="#eaf6ec" stroke="#28a745" stroke-width="2" x="2128.0" y="300.0" width="100.0" height="40.0" rx="5.0" ry="5.0"/>
|
|
58
|
+
<text fill="#000000" x="2178.0" y="325.0" text-anchor="middle" font-family="Arial, Helvetica, sans-serif" font-size="12">CI/CD</text>
|
|
59
|
+
<rect fill="#eaf6ec" stroke="#28a745" stroke-width="2" x="2348.0" y="300.0" width="100.0" height="40.0" rx="5.0" ry="5.0"/>
|
|
60
|
+
<text fill="#000000" x="2398.0" y="325.0" text-anchor="middle" font-family="Arial, Helvetica, sans-serif" font-size="12">Monitoring</text>
|
|
61
|
+
</svg>
|
|
@@ -0,0 +1,77 @@
|
|
|
1
|
+
= Mindmap Examples
|
|
2
|
+
|
|
3
|
+
== Purpose
|
|
4
|
+
|
|
5
|
+
Mindmap diagrams visualize hierarchical information, showing central concepts and their related subtopics in a tree-like structure.
|
|
6
|
+
|
|
7
|
+
== When to Use
|
|
8
|
+
|
|
9
|
+
* Brainstorming sessions
|
|
10
|
+
* Knowledge organization
|
|
11
|
+
* Concept mapping
|
|
12
|
+
* Note-taking and study aids
|
|
13
|
+
* Idea exploration and planning
|
|
14
|
+
|
|
15
|
+
== Syntax Overview
|
|
16
|
+
|
|
17
|
+
[source,mermaid]
|
|
18
|
+
----
|
|
19
|
+
mindmap
|
|
20
|
+
root((Central Idea))
|
|
21
|
+
Topic 1
|
|
22
|
+
Subtopic 1.1
|
|
23
|
+
Subtopic 1.2
|
|
24
|
+
Topic 2
|
|
25
|
+
----
|
|
26
|
+
|
|
27
|
+
== Examples
|
|
28
|
+
|
|
29
|
+
=== 01: Simple Tree
|
|
30
|
+
|
|
31
|
+
Demonstrates basic mindmap with central node and branches.
|
|
32
|
+
|
|
33
|
+
**File**: link:01-simple-tree.mmd[01-simple-tree.mmd]
|
|
34
|
+
|
|
35
|
+
[source,mermaid]
|
|
36
|
+
----
|
|
37
|
+
include::01-simple-tree.mmd[]
|
|
38
|
+
----
|
|
39
|
+
|
|
40
|
+
image::01-simple-tree.svg[]
|
|
41
|
+
|
|
42
|
+
=== 02: Knowledge Map
|
|
43
|
+
|
|
44
|
+
Showcases complex mindmap with multiple levels and branches.
|
|
45
|
+
|
|
46
|
+
**File**: link:02-knowledge-map.mmd[02-knowledge-map.mmd]
|
|
47
|
+
|
|
48
|
+
[source,mermaid]
|
|
49
|
+
----
|
|
50
|
+
include::02-knowledge-map.mmd[]
|
|
51
|
+
----
|
|
52
|
+
|
|
53
|
+
image::02-knowledge-map.svg[]
|
|
54
|
+
|
|
55
|
+
== Features Demonstrated
|
|
56
|
+
|
|
57
|
+
[%header,cols="1,1"]
|
|
58
|
+
|===
|
|
59
|
+
| Feature | Example
|
|
60
|
+
|
|
61
|
+
| Central node
|
|
62
|
+
| 01, 02
|
|
63
|
+
|
|
64
|
+
| Hierarchical structure
|
|
65
|
+
| 01, 02
|
|
66
|
+
|
|
67
|
+
| Multiple levels
|
|
68
|
+
| 02
|
|
69
|
+
|
|
70
|
+
| Branch visualization
|
|
71
|
+
| 01, 02
|
|
72
|
+
|===
|
|
73
|
+
|
|
74
|
+
== Additional Resources
|
|
75
|
+
|
|
76
|
+
* link:../../README.adoc[Main Documentation]
|
|
77
|
+
* https://mermaid.js.org/syntax/mindmap.html[Mermaid Mindmap Documentation]
|
|
@@ -0,0 +1,17 @@
|
|
|
1
|
+
packet-beta
|
|
2
|
+
title TCP Header
|
|
3
|
+
0-15: "Source Port"
|
|
4
|
+
16-31: "Destination Port"
|
|
5
|
+
32-63: "Sequence Number"
|
|
6
|
+
64-95: "Acknowledgment Number"
|
|
7
|
+
96-99: "Data Offset"
|
|
8
|
+
100-105: "Reserved"
|
|
9
|
+
106: "URG"
|
|
10
|
+
107: "ACK"
|
|
11
|
+
108: "PSH"
|
|
12
|
+
109: "RST"
|
|
13
|
+
110: "SYN"
|
|
14
|
+
111: "FIN"
|
|
15
|
+
112-127: "Window Size"
|
|
16
|
+
128-143: "Checksum"
|
|
17
|
+
144-159: "Urgent Pointer"
|
|
@@ -0,0 +1,82 @@
|
|
|
1
|
+
<svg
|
|
2
|
+
width="1040.0"
|
|
3
|
+
height="210.0"
|
|
4
|
+
viewBox="0 0 1040.0 210.0"
|
|
5
|
+
version="1.2"
|
|
6
|
+
xmlns="http://www.w3.org/2000/svg"
|
|
7
|
+
>
|
|
8
|
+
<text fill="#000000" x="520.0" y="60.0" text-anchor="middle" font-family="Arial, Helvetica, sans-serif" font-size="16.0" font-weight="bold" dominant-baseline="middle">TCP Header</text>
|
|
9
|
+
<text fill="#000000" x="55.0" y="115.0" text-anchor="middle" font-family="Arial, Helvetica, sans-serif" font-size="12.0" dominant-baseline="middle">0</text>
|
|
10
|
+
<text fill="#000000" x="85.0" y="115.0" text-anchor="middle" font-family="Arial, Helvetica, sans-serif" font-size="12.0" dominant-baseline="middle">1</text>
|
|
11
|
+
<text fill="#000000" x="115.0" y="115.0" text-anchor="middle" font-family="Arial, Helvetica, sans-serif" font-size="12.0" dominant-baseline="middle">2</text>
|
|
12
|
+
<text fill="#000000" x="145.0" y="115.0" text-anchor="middle" font-family="Arial, Helvetica, sans-serif" font-size="12.0" dominant-baseline="middle">3</text>
|
|
13
|
+
<text fill="#000000" x="175.0" y="115.0" text-anchor="middle" font-family="Arial, Helvetica, sans-serif" font-size="12.0" dominant-baseline="middle">4</text>
|
|
14
|
+
<text fill="#000000" x="205.0" y="115.0" text-anchor="middle" font-family="Arial, Helvetica, sans-serif" font-size="12.0" dominant-baseline="middle">5</text>
|
|
15
|
+
<text fill="#000000" x="235.0" y="115.0" text-anchor="middle" font-family="Arial, Helvetica, sans-serif" font-size="12.0" dominant-baseline="middle">6</text>
|
|
16
|
+
<text fill="#000000" x="265.0" y="115.0" text-anchor="middle" font-family="Arial, Helvetica, sans-serif" font-size="12.0" dominant-baseline="middle">7</text>
|
|
17
|
+
<text fill="#000000" x="295.0" y="115.0" text-anchor="middle" font-family="Arial, Helvetica, sans-serif" font-size="12.0" dominant-baseline="middle">8</text>
|
|
18
|
+
<text fill="#000000" x="325.0" y="115.0" text-anchor="middle" font-family="Arial, Helvetica, sans-serif" font-size="12.0" dominant-baseline="middle">9</text>
|
|
19
|
+
<text fill="#000000" x="355.0" y="115.0" text-anchor="middle" font-family="Arial, Helvetica, sans-serif" font-size="12.0" dominant-baseline="middle">10</text>
|
|
20
|
+
<text fill="#000000" x="385.0" y="115.0" text-anchor="middle" font-family="Arial, Helvetica, sans-serif" font-size="12.0" dominant-baseline="middle">11</text>
|
|
21
|
+
<text fill="#000000" x="415.0" y="115.0" text-anchor="middle" font-family="Arial, Helvetica, sans-serif" font-size="12.0" dominant-baseline="middle">12</text>
|
|
22
|
+
<text fill="#000000" x="445.0" y="115.0" text-anchor="middle" font-family="Arial, Helvetica, sans-serif" font-size="12.0" dominant-baseline="middle">13</text>
|
|
23
|
+
<text fill="#000000" x="475.0" y="115.0" text-anchor="middle" font-family="Arial, Helvetica, sans-serif" font-size="12.0" dominant-baseline="middle">14</text>
|
|
24
|
+
<text fill="#000000" x="505.0" y="115.0" text-anchor="middle" font-family="Arial, Helvetica, sans-serif" font-size="12.0" dominant-baseline="middle">15</text>
|
|
25
|
+
<text fill="#000000" x="535.0" y="115.0" text-anchor="middle" font-family="Arial, Helvetica, sans-serif" font-size="12.0" dominant-baseline="middle">16</text>
|
|
26
|
+
<text fill="#000000" x="565.0" y="115.0" text-anchor="middle" font-family="Arial, Helvetica, sans-serif" font-size="12.0" dominant-baseline="middle">17</text>
|
|
27
|
+
<text fill="#000000" x="595.0" y="115.0" text-anchor="middle" font-family="Arial, Helvetica, sans-serif" font-size="12.0" dominant-baseline="middle">18</text>
|
|
28
|
+
<text fill="#000000" x="625.0" y="115.0" text-anchor="middle" font-family="Arial, Helvetica, sans-serif" font-size="12.0" dominant-baseline="middle">19</text>
|
|
29
|
+
<text fill="#000000" x="655.0" y="115.0" text-anchor="middle" font-family="Arial, Helvetica, sans-serif" font-size="12.0" dominant-baseline="middle">20</text>
|
|
30
|
+
<text fill="#000000" x="685.0" y="115.0" text-anchor="middle" font-family="Arial, Helvetica, sans-serif" font-size="12.0" dominant-baseline="middle">21</text>
|
|
31
|
+
<text fill="#000000" x="715.0" y="115.0" text-anchor="middle" font-family="Arial, Helvetica, sans-serif" font-size="12.0" dominant-baseline="middle">22</text>
|
|
32
|
+
<text fill="#000000" x="745.0" y="115.0" text-anchor="middle" font-family="Arial, Helvetica, sans-serif" font-size="12.0" dominant-baseline="middle">23</text>
|
|
33
|
+
<text fill="#000000" x="775.0" y="115.0" text-anchor="middle" font-family="Arial, Helvetica, sans-serif" font-size="12.0" dominant-baseline="middle">24</text>
|
|
34
|
+
<text fill="#000000" x="805.0" y="115.0" text-anchor="middle" font-family="Arial, Helvetica, sans-serif" font-size="12.0" dominant-baseline="middle">25</text>
|
|
35
|
+
<text fill="#000000" x="835.0" y="115.0" text-anchor="middle" font-family="Arial, Helvetica, sans-serif" font-size="12.0" dominant-baseline="middle">26</text>
|
|
36
|
+
<text fill="#000000" x="865.0" y="115.0" text-anchor="middle" font-family="Arial, Helvetica, sans-serif" font-size="12.0" dominant-baseline="middle">27</text>
|
|
37
|
+
<text fill="#000000" x="895.0" y="115.0" text-anchor="middle" font-family="Arial, Helvetica, sans-serif" font-size="12.0" dominant-baseline="middle">28</text>
|
|
38
|
+
<text fill="#000000" x="925.0" y="115.0" text-anchor="middle" font-family="Arial, Helvetica, sans-serif" font-size="12.0" dominant-baseline="middle">29</text>
|
|
39
|
+
<text fill="#000000" x="955.0" y="115.0" text-anchor="middle" font-family="Arial, Helvetica, sans-serif" font-size="12.0" dominant-baseline="middle">30</text>
|
|
40
|
+
<text fill="#000000" x="985.0" y="115.0" text-anchor="middle" font-family="Arial, Helvetica, sans-serif" font-size="12.0" dominant-baseline="middle">31</text>
|
|
41
|
+
<line stroke="#cccccc" stroke-width="1" x1="40.0" y1="130.0" x2="40.0" y2="170.0"/>
|
|
42
|
+
<line stroke="#cccccc" stroke-width="1" x1="70.0" y1="130.0" x2="70.0" y2="170.0"/>
|
|
43
|
+
<line stroke="#cccccc" stroke-width="1" x1="100.0" y1="130.0" x2="100.0" y2="170.0"/>
|
|
44
|
+
<line stroke="#cccccc" stroke-width="1" x1="130.0" y1="130.0" x2="130.0" y2="170.0"/>
|
|
45
|
+
<line stroke="#cccccc" stroke-width="1" x1="160.0" y1="130.0" x2="160.0" y2="170.0"/>
|
|
46
|
+
<line stroke="#cccccc" stroke-width="1" x1="190.0" y1="130.0" x2="190.0" y2="170.0"/>
|
|
47
|
+
<line stroke="#cccccc" stroke-width="1" x1="220.0" y1="130.0" x2="220.0" y2="170.0"/>
|
|
48
|
+
<line stroke="#cccccc" stroke-width="1" x1="250.0" y1="130.0" x2="250.0" y2="170.0"/>
|
|
49
|
+
<line stroke="#cccccc" stroke-width="1" x1="280.0" y1="130.0" x2="280.0" y2="170.0"/>
|
|
50
|
+
<line stroke="#cccccc" stroke-width="1" x1="310.0" y1="130.0" x2="310.0" y2="170.0"/>
|
|
51
|
+
<line stroke="#cccccc" stroke-width="1" x1="340.0" y1="130.0" x2="340.0" y2="170.0"/>
|
|
52
|
+
<line stroke="#cccccc" stroke-width="1" x1="370.0" y1="130.0" x2="370.0" y2="170.0"/>
|
|
53
|
+
<line stroke="#cccccc" stroke-width="1" x1="400.0" y1="130.0" x2="400.0" y2="170.0"/>
|
|
54
|
+
<line stroke="#cccccc" stroke-width="1" x1="430.0" y1="130.0" x2="430.0" y2="170.0"/>
|
|
55
|
+
<line stroke="#cccccc" stroke-width="1" x1="460.0" y1="130.0" x2="460.0" y2="170.0"/>
|
|
56
|
+
<line stroke="#cccccc" stroke-width="1" x1="490.0" y1="130.0" x2="490.0" y2="170.0"/>
|
|
57
|
+
<line stroke="#cccccc" stroke-width="1" x1="520.0" y1="130.0" x2="520.0" y2="170.0"/>
|
|
58
|
+
<line stroke="#cccccc" stroke-width="1" x1="550.0" y1="130.0" x2="550.0" y2="170.0"/>
|
|
59
|
+
<line stroke="#cccccc" stroke-width="1" x1="580.0" y1="130.0" x2="580.0" y2="170.0"/>
|
|
60
|
+
<line stroke="#cccccc" stroke-width="1" x1="610.0" y1="130.0" x2="610.0" y2="170.0"/>
|
|
61
|
+
<line stroke="#cccccc" stroke-width="1" x1="640.0" y1="130.0" x2="640.0" y2="170.0"/>
|
|
62
|
+
<line stroke="#cccccc" stroke-width="1" x1="670.0" y1="130.0" x2="670.0" y2="170.0"/>
|
|
63
|
+
<line stroke="#cccccc" stroke-width="1" x1="700.0" y1="130.0" x2="700.0" y2="170.0"/>
|
|
64
|
+
<line stroke="#cccccc" stroke-width="1" x1="730.0" y1="130.0" x2="730.0" y2="170.0"/>
|
|
65
|
+
<line stroke="#cccccc" stroke-width="1" x1="760.0" y1="130.0" x2="760.0" y2="170.0"/>
|
|
66
|
+
<line stroke="#cccccc" stroke-width="1" x1="790.0" y1="130.0" x2="790.0" y2="170.0"/>
|
|
67
|
+
<line stroke="#cccccc" stroke-width="1" x1="820.0" y1="130.0" x2="820.0" y2="170.0"/>
|
|
68
|
+
<line stroke="#cccccc" stroke-width="1" x1="850.0" y1="130.0" x2="850.0" y2="170.0"/>
|
|
69
|
+
<line stroke="#cccccc" stroke-width="1" x1="880.0" y1="130.0" x2="880.0" y2="170.0"/>
|
|
70
|
+
<line stroke="#cccccc" stroke-width="1" x1="910.0" y1="130.0" x2="910.0" y2="170.0"/>
|
|
71
|
+
<line stroke="#cccccc" stroke-width="1" x1="940.0" y1="130.0" x2="940.0" y2="170.0"/>
|
|
72
|
+
<line stroke="#cccccc" stroke-width="1" x1="970.0" y1="130.0" x2="970.0" y2="170.0"/>
|
|
73
|
+
<line stroke="#cccccc" stroke-width="1" x1="1000.0" y1="130.0" x2="1000.0" y2="170.0"/>
|
|
74
|
+
<line stroke="#cccccc" stroke-width="1" x1="40.0" y1="130.0" x2="1000.0" y2="130.0"/>
|
|
75
|
+
<line stroke="#cccccc" stroke-width="1" x1="40.0" y1="170.0" x2="1000.0" y2="170.0"/>
|
|
76
|
+
<rect fill="#e0f2fe" stroke="#0284c7" stroke-width="1.5" x="40.0" y="130.0" width="480.0" height="40.0"/>
|
|
77
|
+
<text fill="#000000" x="280.0" y="150.0" text-anchor="middle" font-family="Arial, Helvetica, sans-serif" font-size="14.0" dominant-baseline="middle">Source Port</text>
|
|
78
|
+
<text fill="#000000" x="280.0" y="166.0" text-anchor="middle" font-family="Arial, Helvetica, sans-serif" font-size="12.0" dominant-baseline="middle">0-15</text>
|
|
79
|
+
<rect fill="#e0f2fe" stroke="#0284c7" stroke-width="1.5" x="520.0" y="130.0" width="480.0" height="40.0"/>
|
|
80
|
+
<text fill="#000000" x="760.0" y="150.0" text-anchor="middle" font-family="Arial, Helvetica, sans-serif" font-size="14.0" dominant-baseline="middle">Destination Port</text>
|
|
81
|
+
<text fill="#000000" x="760.0" y="166.0" text-anchor="middle" font-family="Arial, Helvetica, sans-serif" font-size="12.0" dominant-baseline="middle">16-31</text>
|
|
82
|
+
</svg>
|
|
@@ -0,0 +1,58 @@
|
|
|
1
|
+
= Packet Diagram Examples
|
|
2
|
+
|
|
3
|
+
== Purpose
|
|
4
|
+
|
|
5
|
+
Packet diagrams visualize network packet structures, showing data fields, headers, and protocol layouts.
|
|
6
|
+
|
|
7
|
+
== When to Use
|
|
8
|
+
|
|
9
|
+
* Network protocol documentation
|
|
10
|
+
* Packet format specification
|
|
11
|
+
* Protocol analysis
|
|
12
|
+
* Network debugging documentation
|
|
13
|
+
* Communication protocol design
|
|
14
|
+
|
|
15
|
+
== Syntax Overview
|
|
16
|
+
|
|
17
|
+
[source,mermaid]
|
|
18
|
+
----
|
|
19
|
+
packet-beta
|
|
20
|
+
0-15: "Source Port"
|
|
21
|
+
16-31: "Dest Port"
|
|
22
|
+
----
|
|
23
|
+
|
|
24
|
+
== Examples
|
|
25
|
+
|
|
26
|
+
=== 01: Basic Packet
|
|
27
|
+
|
|
28
|
+
Demonstrates basic packet structure with bit fields.
|
|
29
|
+
|
|
30
|
+
**File**: link:01-basic-packet.mmd[01-basic-packet.mmd]
|
|
31
|
+
|
|
32
|
+
[source,mermaid]
|
|
33
|
+
----
|
|
34
|
+
include::01-basic-packet.mmd[]
|
|
35
|
+
----
|
|
36
|
+
|
|
37
|
+
image::01-basic-packet.svg[]
|
|
38
|
+
|
|
39
|
+
== Features Demonstrated
|
|
40
|
+
|
|
41
|
+
[%header,cols="1,1"]
|
|
42
|
+
|===
|
|
43
|
+
| Feature | Example
|
|
44
|
+
|
|
45
|
+
| Bit field definition
|
|
46
|
+
| 01
|
|
47
|
+
|
|
48
|
+
| Field labeling
|
|
49
|
+
| 01
|
|
50
|
+
|
|
51
|
+
| Packet structure
|
|
52
|
+
| 01
|
|
53
|
+
|===
|
|
54
|
+
|
|
55
|
+
== Additional Resources
|
|
56
|
+
|
|
57
|
+
* link:../../README.adoc[Main Documentation]
|
|
58
|
+
* https://mermaid.js.org/syntax/packet.html[Mermaid Packet Documentation]
|
|
@@ -0,0 +1,17 @@
|
|
|
1
|
+
<svg
|
|
2
|
+
width="500.0"
|
|
3
|
+
height="460.0"
|
|
4
|
+
viewBox="0 0 500 460"
|
|
5
|
+
version="1.2"
|
|
6
|
+
xmlns="http://www.w3.org/2000/svg"
|
|
7
|
+
>
|
|
8
|
+
<text fill="#000000" x="250.0" y="40.0" text-anchor="middle" font-family="Arial, Helvetica, sans-serif" font-size="16.0" font-weight="bold">Market Share Distribution</text>
|
|
9
|
+
<path id="slice-0" fill="#4472C4" stroke="#000000" stroke-width="2" d="M 250 200 L 250.0 50.0 A 150 150 0 0 1 318.098574960932 333.6509786282552 Z"/>
|
|
10
|
+
<path id="slice-1" fill="#ED7D31" stroke="#000000" stroke-width="2" d="M 250 200 L 318.098574960932 333.6509786282552 A 150 150 0 0 1 105.19275417500893 239.12622594348454 Z"/>
|
|
11
|
+
<path id="slice-2" fill="#A5A5A5" stroke="#000000" stroke-width="2" d="M 250 200 L 105.19275417500893 239.12622594348454 A 150 150 0 0 1 158.06394195205354 81.47674814364643 Z"/>
|
|
12
|
+
<path id="slice-3" fill="#FFC000" stroke="#000000" stroke-width="2" d="M 250 200 L 158.06394195205354 81.47674814364643 A 150 150 0 0 1 249.99999999999997 50.0 Z"/>
|
|
13
|
+
<text fill="#000000" x="425.02658567158176" y="157.97983450593702" text-anchor="middle" font-family="Arial, Helvetica, sans-serif" font-size="12.0" dominant-baseline="middle">Product A</text>
|
|
14
|
+
<text fill="#000000" x="176.95964362008402" y="364.514760249331" text-anchor="middle" font-family="Arial, Helvetica, sans-serif" font-size="12.0" dominant-baseline="middle">Product B</text>
|
|
15
|
+
<text fill="#000000" x="79.34165733687422" y="142.7660059101661" text-anchor="middle" font-family="Arial, Helvetica, sans-serif" font-size="12.0" dominant-baseline="middle">Product C</text>
|
|
16
|
+
<text fill="#000000" x="191.69486472433294" y="29.70463541104192" text-anchor="middle" font-family="Arial, Helvetica, sans-serif" font-size="12.0" dominant-baseline="middle">Product D</text>
|
|
17
|
+
</svg>
|
|
@@ -0,0 +1,19 @@
|
|
|
1
|
+
<svg
|
|
2
|
+
width="500.0"
|
|
3
|
+
height="460.0"
|
|
4
|
+
viewBox="0 0 500 460"
|
|
5
|
+
version="1.2"
|
|
6
|
+
xmlns="http://www.w3.org/2000/svg"
|
|
7
|
+
>
|
|
8
|
+
<text fill="#000000" x="250.0" y="40.0" text-anchor="middle" font-family="Arial, Helvetica, sans-serif" font-size="16.0" font-weight="bold">Browser Market Share 2024</text>
|
|
9
|
+
<path id="slice-0" fill="#4472C4" stroke="#000000" stroke-width="2" d="M 250 200 L 250.0 50.0 A 150 150 0 1 1 128.6474508437579 288.167787843871 Z"/>
|
|
10
|
+
<path id="slice-1" fill="#ED7D31" stroke="#000000" stroke-width="2" d="M 250 200 L 128.6474508437579 288.167787843871 A 150 150 0 0 1 118.55399799342047 127.73694888474269 Z"/>
|
|
11
|
+
<path id="slice-2" fill="#A5A5A5" stroke="#000000" stroke-width="2" d="M 250 200 L 118.55399799342047 127.73694888474269 A 150 150 0 0 1 169.62598075315054 73.35081117469771 Z"/>
|
|
12
|
+
<path id="slice-3" fill="#FFC000" stroke="#000000" stroke-width="2" d="M 250 200 L 169.62598075315054 73.35081117469771 A 150 150 0 0 1 221.89280281214144 52.656912390696675 Z"/>
|
|
13
|
+
<path id="slice-4" fill="#5B9BD5" stroke="#000000" stroke-width="2" d="M 250 200 L 221.89280281214144 52.656912390696675 A 150 150 0 0 1 250.0000000000001 50.0 Z"/>
|
|
14
|
+
<text fill="#000000" x="410.3811743539062" y="281.7182899531184" text-anchor="middle" font-family="Arial, Helvetica, sans-serif" font-size="12.0" dominant-baseline="middle">Chrome</text>
|
|
15
|
+
<text fill="#000000" x="70.35518888291111" y="211.30229351527643" text-anchor="middle" font-family="Arial, Helvetica, sans-serif" font-size="12.0" dominant-baseline="middle">Safari</text>
|
|
16
|
+
<text fill="#000000" x="118.78564706414599" y="76.78152093283599" text-anchor="middle" font-family="Arial, Helvetica, sans-serif" font-size="12.0" dominant-baseline="middle">Firefox</text>
|
|
17
|
+
<text fill="#000000" x="183.73758051675816" y="32.64023254011468" text-anchor="middle" font-family="Arial, Helvetica, sans-serif" font-size="12.0" dominant-baseline="middle">Edge</text>
|
|
18
|
+
<text fill="#000000" x="233.0605036026675" y="20.798846371445592" text-anchor="middle" font-family="Arial, Helvetica, sans-serif" font-size="12.0" dominant-baseline="middle">Others</text>
|
|
19
|
+
</svg>
|