- Notifications
You must be signed in to change notification settings - Fork4
Create your WardleyMaps as code/data and render it as SVG (onlinewardleymap and wtg language supported)
License
owulveryck/wardleyToGo
Folders and files
| Name | Name | Last commit message | Last commit date | |
|---|---|---|---|---|
Repository files navigation
A set of primitives to "code a map". In the context of the package "a map" represents a landscape.The landscape is made of "Components". Each component knows its own location on a map.Components can collaborate, meaning that they may be linked together. Therefore a map is also a graph.The entrypoint of this API is the 'Map' structure
wtg is a high level language to design and render Wardley Maps implemented with this SDK.
Check the online demo (wtg playground) and the doc athttps://owulveryck.github.io/wardleyToGo/
Credits: this demo is heavily inspired byGraphvizOnline. It uses:
- ACE-editor BSD-2
- svg-pan-zoom BSD-2
example:
title: sample map // title is optional/*************** value chain ****************/business - cup of teapublic - cup of teacup of tea - cupcup of tea -- teacup of tea --- hot waterhot water - waterhot water -- kettlekettle - power/*************** definitions ****************/// you can inline the evolutionbusiness: |....|....|...x.|.........|public: |....|....|....|.x...|// or create blockscup of tea: { evolution: |....|....|..x..|........| color: Green // you can set colors}cup: { type: buy evolution: |....|....|....|....x....|}tea: { type: buy evolution: |....|....|....|.....x....|}hot water: { evolution: |....|....|....|....x....| color: Blue}water: { type: outsource evolution: |....|....|....|.....x....|}// you can set the evolution with a >kettle: { type: build evolution: |...|...x.|..>.|.......|}power: { type: outsource evolution: |...|...|....x|.....>..|}stage1: genesis / conceptstage2: custom / emergingstage3: product / convergingstage4: commodity / acceptedyou will find tools to convert the file into SVG or dot format in the examples subdir or compiled version for various platforms in the repository
If you have Go installed, you can generate the map with
cat sample.wtg | go run main.go > wtg.svg
from theexamples/wtg2svg directory
The library comes with a parser to handle part of the OWM syntax.
Create a map from the owm example (seehttps://onlinewardleymaps.com/#h4hJOoRdO4hHSljIb9 to build one):
title Tea Shopanchor 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] label [19,-4] (dataProduct)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 [-73, 4] (build)evolve Kettle 0.62 label [22, 9] (buy)component Power [0.1, 0.7] label [-29, 30] (outsource)evolve Power 0.89 label [-12, 21]Business->Cup of TeaPublic->Cup of TeaCup of Tea-collaboration>CupCup of Tea-collaboration>TeaCup of Tea-collaboration>Hot WaterHot Water->WaterHot Water-facilitating>Kettle Kettle-xAsAService>Powerbuild Kettleannotation 1 [[0.43,0.49],[0.08,0.79]] Standardising power allows Kettles to evolve fasterannotation 2 [0.48, 0.85] Hot water is obvious and well knownannotations [0.60, 0.02]note +a generic note appeared [0.16, 0.36]style wardleystreamAlignedTeam stream aligned A [0.84, 0.18, 0.76, 0.95]enablingTeam team B [0.9, 0.30, 0.30, 0.40]platformTeam team C [0.18, 0.61, 0.02, 0.94]complicatedSubsystemTeam team D [0.92, 0.73, 0.45, 0.90]
First, create a component type
typedummyComponentstruct {idint64position image.Point}func (d*dummyComponent)GetPosition() image.Point {returnd.position }func (d*dummyComponent)String()string {returnstrconv.FormatInt(d.id,10) }func (d*dummyComponent)ID()int64 {returnd.id }
Then a collaboration structure (an edge)
typedummyCollaborationstruct{ simple.Edge }func (d*dummyCollaboration)GetType() wardleyToGo.EdgeType {return0 }func (d*dummyCollaboration)Draw(dst draw.Image,r image.Rectangle,src image.Image,sp image.Point) {coordsF:=utils.CalcCoords(d.F.(wardleyToGo.Component).GetPosition(),r)coordsT:=utils.CalcCoords(d.T.(wardleyToGo.Component).GetPosition(),r)drawing.Line(dst,coordsF.X,coordsF.Y,coordsT.X,coordsT.Y, color.Gray{Y:128}, [2]int{})}
And finally create the map
m:=wardleyToGo.NewMap(0)c0:=&dummyComponent{id:0,position:image.Pt(25,25)}c1:=&dummyComponent{id:1,position:image.Pt(50,50)}c2:=&dummyComponent{id:2,position:image.Pt(50,75)}c3:=&dummyComponent{id:3,position:image.Pt(75,75)}m.AddComponent(c0)m.AddComponent(c1)m.AddComponent(c2)m.AddComponent(c3)// c0 -> c1// c1 -> c2// c2 -> c3// c1 -> c3m.SetCollaboration(newCollaboration(c0,c1))m.SetCollaboration(newCollaboration(c1,c2))m.SetCollaboration(newCollaboration(c2,c3))m.SetCollaboration(newCollaboration(c1,c3))
the map fulfills thedrawer.Drawer interface. If the components fulfills the interface as well, they are displayend on an image.
funcmain() {p:=owm.NewParser(os.Stdin)m,err:=p.Parse()// the mapiferr!=nil {log.Fatal(err)}im:=image.NewRGBA(image.Rect(0,0,1400,1100))canvas:=image.Rect(100,100,1300,1000)createBackground(im,canvas)m.Draw(im,canvas,im, image.Point{})png.Encode(os.Stdout,im)}
see theexamples/pngoutput directory
About
Create your WardleyMaps as code/data and render it as SVG (onlinewardleymap and wtg language supported)