Add OnlineWardleyMaps as service

.github/workflows/docs-ci.yml

@@ -110,7 +110,7 @@ jobs:
         run: curl -fL https://download.docker.com/linux/static/stable/x86_64/docker-20.10.21.tgz | tar xzO docker/docker > docker && sudo mv -f docker /usr/bin/docker && sudo chmod +x /usr/bin/docker
 
       - name: docker-compose up
-        run: docker-compose -f docs/modules/setup/examples/kroki-docker-compose.yml up -d
+        run: docker compose -f docs/modules/setup/examples/kroki-docker-compose.yml up -d
 
       - name: Wait until available
         run: |

README.adoc

@@ -8,7 +8,7 @@ image:https://github.com/yuzutech/kroki/workflows/CI/badge.svg?branch=master[Git
 image:https://img.shields.io/badge/zulip-join_chat-brightgreen.svg[Zulip chat, link=https://kroki.zulipchat.com/]
 endif::[]
 
-{uri-kroki}[Kroki] provides a unified API with support for BlockDiag (BlockDiag, SeqDiag, ActDiag, NwDiag, PacketDiag, RackDiag), BPMN, Bytefield, C4 (with PlantUML), D2, DBML, Diagrams.net (experimental), Ditaa, Erd, Excalidraw, GraphViz, Mermaid, Nomnoml, Pikchr, PlantUML, SvgBob, Symbolator, UMLet, Vega, Vega-Lite, WaveDrom and WireViz... and more to come!
+{uri-kroki}[Kroki] provides a unified API with support for BlockDiag (BlockDiag, SeqDiag, ActDiag, NwDiag, PacketDiag, RackDiag), BPMN, Bytefield, C4 (with PlantUML), D2, DBML, Diagrams.net (experimental), Wardley Maps (experimental), Ditaa, Erd, Excalidraw, GraphViz, Mermaid, Nomnoml, Pikchr, PlantUML, SvgBob, Symbolator, UMLet, Vega, Vega-Lite, WaveDrom and WireViz... and more to come!
 
 == Quickstart
 
@@ -105,6 +105,9 @@ A companion web server written in JavaScript (powered by _micro_) that provides
 diagrams.net::
 A companion web server written in JavaScript (powered by _micro_) that provides _diagrams.net_.
 
+onlinewardleymaps::
+A companion web server written in JavaScript (powered by _micro_) that provides _WardleyMaps_.
+
 == Build
 
 === Gateway Server
@@ -143,6 +146,9 @@ Excalidraw
 yuzutech/kroki-diagramsnet (experimental)::
 diagrams.net
 
+yuzutech/kroki-onlinewardleymaps (experimental)::
+OnlineWardleyMaps
+
 You can use `docker-compose` to run multiple containers:
 
 .docker-compose.yml
@@ -174,6 +180,10 @@ services:
     image: yuzutech/kroki-diagramsnet
     expose:
       - "8005"
+  onlinewardleymaps:
+    image: yuzutech/kroki-onlinewardleymaps
+    expose:
+      - "8007"
 ----
 
  $ docker-compose up -d

ci/tests/diagrams/teashop.owm

@@ -0,0 +1,28 @@
+title Tea Shop
+anchor Business [0.95, 0.63]
+anchor Public [0.95, 0.78]
+component Cup of Tea [0.79, 0.61] label [19, -4]
+component Cup [0.73, 0.78]
+component Tea [0.63, 0.81]
+component Hot Water [0.52, 0.80]
+component Water [0.38, 0.82]
+component Kettle [0.43, 0.35] label [-57, 4]
+evolve Kettle 0.62 label [16, 7]
+component Power [0.1, 0.7] label [-27, 20]
+evolve Power 0.89 label [-12, 21]
+Business->Cup of Tea
+Public->Cup of Tea
+Cup of Tea->Cup
+Cup of Tea->Tea
+Cup of Tea->Hot Water
+Hot Water->Water
+Hot Water->Kettle 
+Kettle->Power
+
+annotation 1 [[0.43,0.49],[0.08,0.79]] Standardising power allows Kettles to evolve faster
+annotation 2 [0.48, 0.85] Hot water is obvious and well known
+annotations [0.60, 0.02]
+
+note +a generic note appeared [0.23, 0.33]
+
+style wardley

ci/tests/docker-compose.yaml

@@ -5,11 +5,14 @@ services:
       - mermaid
       - bpmn
       - excalidraw
+      - diagramsnet
+      - onlinewardleymaps
     environment:
       - KROKI_MERMAID_HOST=mermaid
       - KROKI_BPMN_HOST=bpmn
       - KROKI_EXCALIDRAW_HOST=excalidraw
       - KROKI_DIAGRAMSNET_HOST=diagramsnet
+      - KROKI_ONLINEWARDLEYMAPS_HOST=onlinewardleymaps
     ports:
       - "8000:8000"
 
@@ -32,3 +35,8 @@ services:
     image: yuzutech/kroki-diagramsnet:smoketests
     expose:
       - "8005"
+
+  onlinewardleymaps:
+    image: yuzutech/kroki-onlinewardleymaps:smoketests
+    expose:
+      - "8007"

ci/tests/smoke.js

@@ -40,6 +40,7 @@ const tests = [
   { engine: 'diagramsnet', file: 'diagramsnet-ui.xml', options: {}, outputFormat: ['svg', 'png'] },
   { engine: 'diagramsnet', file: 'diagramsnet-venn.xml', options: {}, outputFormat: ['svg', 'png'] },
   { engine: 'diagramsnet', file: 'diagramsnet-infography.xml', options: { id: 'foo' }, outputFormat: ['svg', 'png'] },
+  { engine: 'wardleymap', file: 'teashop.owm', options: {}, outputFormat: ['svg', 'png'] },
   { engine: 'd2', file: 'connections.d2', options: {}, outputFormat: ['svg'] },
   { engine: 'd2', file: 'connections.d2', options: { layout: 'elk' }, outputFormat: ['svg'] },
   { engine: 'd2', file: 'connections.d2', options: { theme: '200' }, outputFormat: ['svg'] },

docker-bake-release.hcl

@@ -20,3 +20,7 @@ target "kroki-excalidraw" {
 target "kroki-diagramsnet" {
   tags = ["yuzutech/kroki-diagramsnet:${RELEASE_VERSION}", "yuzutech/kroki-diagramsnet:latest"]
 }
+
+target "kroki-onlinewardleymaps" {
+  tags = ["yuzutech/kroki-onlinewardleymaps:${RELEASE_VERSION}", "yuzutech/kroki-onlinewardleymaps:latest"]
+}

docker-bake.hcl

@@ -3,7 +3,7 @@ variable "TAG" {
 }
 
 group "companion-images" {
-  targets = ["kroki-mermaid", "kroki-bpmn", "kroki-excalidraw", "kroki-diagramsnet"]
+  targets = ["kroki-mermaid", "kroki-bpmn", "kroki-excalidraw", "kroki-diagramsnet", "kroki-onlinewardleymaps"]
 }
 
 target "oci-labels" {
@@ -68,3 +68,8 @@ target "kroki-diagramsnet" {
     "org.opencontainers.image.title" = "Kroki - diagrams.net"
   }
 }
+
+target "kroki-onlinewardleymaps" {
+  context = "onlinewardleymaps"
+  tags = ["yuzutech/kroki-onlinewardleymaps:${TAG}"]
+}

docs/antora.yml

@@ -11,6 +11,7 @@ asciidoc:
     d2-version: 0.6.3
     dbml-version: 1.0.27
     diagramsnet-version: 16.2.4
+    onlinewardleymaps-version: 44ce638d9a1bef6e629301a840280a904cbc20e4
     ditaa-version: 1.0.3
     erd-version: 0.2.1.0
     excalidraw-version: 0.17.3

docs/modules/ROOT/pages/architecture.adoc

@@ -18,6 +18,9 @@ A companion web server written in JavaScript (powered by _micro_) that provides
 Diagrams.net::
 A companion web server written in JavaScript (powered by _micro_) that provides https://www.diagrams.net/[_diagrams.net_] to render diagrams.
 
+Online Wardley Maps::
+A companion web server written in JavaScript (powered by _micro_) that provides https://onlinewardleymaps.com/[Online Wardley Maps] to render diagrams.
+
 == Gateway Server
 
 The `yuzutech/kroki` Docker image contains the following diagrams libraries out-of-the-box:
@@ -149,3 +152,14 @@ The `yuzutech/kroki-diagramsnet` Docker image contains the following diagrams li
 |https://www.diagrams.net/[diagrams.net]
 |{diagramsnet-version}
 |===
+
+=== Online Wardley Maps (experimental)
+
+The `yuzutech/kroki-onlinewardleymaps` Docker image contains the following diagrams libraries out-of-the-box:
+
+[options="header",cols="1,1m"]
+|===
+|Diagram Type | Version
+|https://onlinewardleymaps.com/[Online Wardley Maps]
+|{onlinewardleymaps-version}
+|===

docs/modules/ROOT/pages/diagram-types.adoc

@@ -41,6 +41,7 @@ Diagram::
 * HDL Component diagram
 * Excalidraw
 * https://www.diagrams.net/[diagrams.net] (experimental)
+* https://onlinewardleymaps.com[OnlineWardleyMaps.com] (experimental)
 * WireViz
 
 Visualization::

docs/modules/ROOT/pages/index.adoc

@@ -5,7 +5,7 @@
 === Convert plain text diagrams to images !
 
 Kroki provides a unified HTTP API with support for BlockDiag (BlockDiag, SeqDiag, ActDiag, NwDiag, PacketDiag, RackDiag),
-BPMN, Bytefield, C4 (with PlantUML), Diagrams.net (experimental), Ditaa, Erd, Excalidraw, GraphViz, Mermaid, Nomnoml, PlantUML, Structurizr, SvgBob,
+BPMN, Bytefield, C4 (with PlantUML), Diagrams.net (experimental), OnlineWardleyMaps (experimental), Ditaa, Erd, Excalidraw, GraphViz, Mermaid, Nomnoml, PlantUML, Structurizr, SvgBob,
 Symbolator, UMLet, Vega, Vega-Lite, WaveDrom and WireViz... and more to come!
 
 Kroki is available as a Self-Managed instance. +

docs/modules/setup/pages/install.adoc

@@ -5,6 +5,7 @@
 :uri-docker-kroki-bpmn-image: https://hub.docker.com/r/yuzutech/kroki-bpmn
 :uri-docker-kroki-excalidraw-image: https://hub.docker.com/r/yuzutech/kroki-excalidraw
 :uri-docker-kroki-diagramsnet-image: https://hub.docker.com/r/yuzutech/kroki-diagramsnet
+:uri-docker-kroki-onlinewardleymaps-image: https://hub.docker.com/r/yuzutech/kroki-onlinewardleymaps
 // URIs of diagram generation application sites by diagram name
 :uri-blockdiag: http://blockdiag.com/en/blockdiag/index.html
 :uri-seqdiag: http://blockdiag.com/en/seqdiag/index.html
@@ -16,6 +17,7 @@
 :uri-bpmn: https://bpmn.io/toolkit/bpmn-js/
 :uri-excalidraw: https://excalidraw.com/
 :uri-diagramsnet: https://diagrams.net/
+:uri-onlinewardleymaps: https://onlinewardleymaps.com/
 :uri-wireviz: https://github.com/formatc1702/WireViz
 
 This section covers installing Kroki locally.
@@ -148,3 +150,7 @@ Provides flowchart, sequence and Gantt diagrams for Kroki using the {uri-mermaid
 [#yuzutech-kroki-diagramsnet]
 {uri-docker-kroki-diagramsnet-image}[yuzutech/kroki-diagramsnet^]  (experimental)::
 Provides diagrams for Kroki using the {uri-diagramsnet}[diagrams.net^] library.
+
+[#yuzutech-kroki-onlinewardleymaps]
+{uri-docker-kroki-onlinewardleymaps-image}[yuzutech/kroki-onlinewardleymaps^] (experimental)::
+Provides Wardley maps for Kroki using the {uri-onlinewardleymaps}[Online Wardley Maps^] server.

onlinewardleymaps/.dockerignore

@@ -0,0 +1 @@
+node_modules/

onlinewardleymaps/.gitignore

@@ -0,0 +1 @@
+node_modules/

onlinewardleymaps/Dockerfile

@@ -0,0 +1,40 @@
+FROM node:18.18-alpine3.18 as base
+
+RUN addgroup -g 1001 kroki && adduser -D -G kroki -u 1001 kroki
+RUN apk add --quiet --no-cache --update git \
+    supervisor \
+    chromium \
+    font-noto-cjk
+
+WORKDIR /server
+RUN git clone https://github.com/damonsk/onlinewardleymaps.git ./ && \
+    git checkout 44ce638d9a1bef6e629301a840280a904cbc20e4
+
+WORKDIR /server/frontend
+RUN yarn install
+COPY assets/patch* assets/aws-exports.js ./
+RUN git apply patch1.diff && \
+    yarn build
+
+WORKDIR /service
+
+ENV KROKI_ONLINEWARDLEYMAPS_PAGE_URL="http://localhost:3000"
+# 15 seconds
+ENV KROKI_ONLINEWARDLEYMAPS_CONVERT_TIMEOUT=15000
+ENV PUPPETEER_EXECUTABLE_PATH=/usr/lib/chromium/chrome
+#ENV DEBUG="puppeteer:*"
+ENV LEVEL="info"
+
+COPY --chown=kroki:kroki package*.json ./
+RUN npm i --omit=dev
+COPY --chown=kroki:kroki src ./
+
+RUN mkdir -p /app && chown -R kroki:kroki /app
+COPY --chown=kroki:kroki assets/supervisord.conf /app/supervisord.conf
+
+WORKDIR /app
+USER kroki
+
+EXPOSE 8007
+
+ENTRYPOINT ["supervisord", "-c", "/app/supervisord.conf"]

onlinewardleymaps/README.md

@@ -0,0 +1,19 @@
+# Online Wardley Maps server
+
+Version: 44ce638d9a1bef6e629301a840280a904cbc20e4
+
+## Update
+
+Update the Version strings in the Dockerfile, Doc and Java files. Nothing more needed. You should find all places with find and replace.
+
+## Architecture
+
+The docker container runs 3 separate processes:
+- The Kroki companion server, which runs on port 8007 and is exposed
+- The Online Wardley Maps server, which runs on port 3000 and is not exposed
+- The supervisord is the entrypoint and starts the other two processes
+
+## Testing
+
+Use the following command to test the server, after starting the docker containers:
+http://localhost:8000/wardleymap/png/eNplUrFugzAQ3f0VtxciMIHAkqFdKnWJlEodIgYnuSSoro2wCcrf92wIkGQB-97z83t3tpWVCN8oYHvRNRPqcNENvLemUmgM7KJFkQYQLbKkvIObdi-rwwSt8pId9F-tFSoLH20N-uQVibEq_OG4BCn2KGEXUyFcPh9wzORVaxDJPJTHc-hTW_gRFhtHSLknRHPCCCa5B_kc_ELrYhO69NpJOhoM01UAZBCvWl7xziQTfIyQBbCaq210118V-wiTFCcpHo1aPY-8FCMjJuecgt0bHq6n_rG-0Q-laenLD_tnfGwRG1fh-qUwBGT9P1x7k4xmrbQVttIKYtj1jaJPUQa0jvLAjbYsYWuFOormWJH9M9Q-oJBSd2bonAGrYch_EsZdPpPmfgT9gGgEzlbn51YZ0PtrpVsDdAF0KCX8Kt2p2Wn_OrPIHY5ouozqCG8CzqiwoQfq96KuUTR4dFzez5peMjP2RqE7ci7xxv4BoXbvkw==

onlinewardleymaps/assets/aws-exports.js

@@ -0,0 +1,2 @@
+const awsmobile = {};
+export default awsmobile;

onlinewardleymaps/assets/patch1.diff

@@ -0,0 +1,37 @@
+diff --git a/frontend/.eslintrc.json b/frontend/.eslintrc.json
+index 276c243..6af6b99 100644
+--- a/frontend/.eslintrc.json
++++ b/frontend/.eslintrc.json
+@@ -23,7 +23,7 @@
+ 	"plugins": ["react", "jsx"],
+ 	"ignorePatterns": ["models", "src/ui-components"],
+ 	"rules": {
+-		"prettier/prettier": "error",
++		"prettier/prettier": "off",
+ 		"linebreak-style": ["error", "unix"],
+ 		"react/prop-types": 0,
+ 		"@next/next/no-img-element": 0
+diff --git a/frontend/src/components/map/MapView.js b/frontend/src/components/map/MapView.js
+index b502d31..c15a2f7 100644
+--- a/frontend/src/components/map/MapView.js
++++ b/frontend/src/components/map/MapView.js
+@@ -21,8 +21,11 @@ export default function MapView(props) {
+ 		dark: 'white',
+ 	};
+
++	const contentLoadedFlag = props.mapText ? 'contentLoaded' : 'noText';
++
+ 	return (
+ 		<>
++		<div className={contentLoadedFlag}>
+ 			{/* Wrapping div required to ensure that images aren't generated with a ton of whitespace */}
+ 			<div
+ 				ref={props.mapRef}
+@@ -63,6 +66,7 @@ export default function MapView(props) {
+ 					)}
+ 				</IconButton>
+ 			</div>
++		</div>
+ 		</>
+ 	);
+ }

onlinewardleymaps/assets/supervisord.conf

@@ -0,0 +1,18 @@
+[supervisord]
+nodaemon=true
+logfile=/dev/null
+logfile_maxbytes=0
+
+[program:onlinewardleymaps]
+command=yarn start -H 0.0.0.0 -p 3000
+directory=/server/frontend
+stdout_logfile=/dev/fd/1
+stdout_logfile_maxbytes=0
+redirect_stderr=true
+
+[program:kroki]
+command=node index.js
+directory=/service
+stdout_logfile=/dev/fd/1
+stdout_logfile_maxbytes=0
+redirect_stderr=true