Wardley MAp canvas in SVG + Go

canvas.svg

main.go

package main

import (
	"os"

	svg "github.com/ajstarks/svgo"
)

func main() {
	width := 1200
	height := 830
	padLeft := 25
	padBottom := 25

	lg := []svg.Offcolor{
		{Offset: 0, Color: "rgb(196,196,196)", Opacity: 1.0},
		{Offset: 30, Color: "rgb(255,255,255)", Opacity: 1.0},
		{Offset: 70, Color: "rgb(255,255,255)", Opacity: 1.0},
		{Offset: 100, Color: "rgb(196,196,196)", Opacity: 1.0}}

	g := svg.New(os.Stdout)
	g.Start(width, height)
	g.Title("Wardley")
	g.Rect(0, 0, width, height, "fill:white")
	g.Def()
	g.LinearGradient("wardleyGradient", 0, 0, 100, 0, lg)
	g.Marker("arrow", 15, 0, 12, 12, `viewBox="0 -5 10 10"`)
	g.Path("M0,-5L10,0L0,5", "fill:red")
	g.MarkerEnd()

	g.Marker("graphArrow", 9, 0, 12, 12, `viewBox="0 -5 10 10"`)
	g.Path("M0,-5L10,0L0,5", "fill:black")
	g.MarkerEnd()
	g.DefEnd()

	g.Rect(padLeft, 0, width-padLeft, height-padBottom, "fill:url(#wardleyGradient)")
	g.TranslateRotate(0, height, 270)
	g.Group(`font-family=""Helvetica Neue",Helvetica,Arial,sans-serif" font-size="13px">`)
	g.Line(padBottom, padLeft, height, padLeft, `stroke="black"`, `stroke-width="1"`, `marker-end="url(#graphArrow)"`)
	g.Line(height, width/4+padLeft, padBottom, width/4+padLeft, `stroke="#b8b8b8"`, `stroke-dasharray="2,2"`)
	g.Line(height, width/2+padLeft, padBottom, width/2+padLeft, `stroke="#b8b8b8"`, `stroke-dasharray="2,2"`)
	g.Line(height, 3*width/4+padLeft, padBottom, 3*width/4+padLeft, `stroke="#b8b8b8"`, `stroke-dasharray="2,2"`)
	g.Text(padBottom+10, padLeft-10, "Invisible", `text-anchor="start"`)
	g.Text(height-padBottom-10, padLeft-10, "Visible", `text-anchor="end"`)
	g.Text(height/2+padBottom, padLeft-10, "Value Chain", `text-anchor="middle" font-weight="bold"`)
	g.Gend()
	g.Gend()

	g.Line(padLeft, height-padBottom, width-10, height-padBottom, `stroke="black"`, `stroke-width="1"`, `marker-end="url(#graphArrow)"`)
	g.Group(`font-family=""Helvetica Neue",Helvetica,Arial,sans-serif"`, `font-size="13px"`, `font-style="italic"`)
	g.Text(padLeft+10, 15, "Uncharted", `font-style="normal"`, `font-size="11px"`, `font-weight="bold"`)
	g.Text(width-20, 15, "Industrialised", `font-style="normal"`, `font-size="11px"`, `font-weight="bold"`, `text-anchor="end"`)

	g.Text(padLeft+5, height-padBottom/2, "Gensesis")
	g.Text(padLeft+5+width/4, height-padBottom/2, "Custom-Build")
	g.Text(padLeft+5+width/2, height-padBottom/2, "Product")
	g.Text(padLeft+5+width/2, height, "(+rental)")
	g.Text(padLeft+5+3*width/4, height-padBottom/2, "Commodity")
	g.Text(padLeft+5+3*width/4, height, "(+utility)")
	g.Text(width, height-padBottom/2+5, "Evolution", `text-anchor="end"`, `font-weight="bold"`, `font-style="normal"`)

	g.Gend()
	g.End()
}