damonsk / onlinewardleymaps Goto Github PK
View Code? Open in Web Editor NEWOnlineWardleyMaps.com - Draw Wardley Maps in seconds using this free online tool
Home Page: https://onlinewardleymaps.com/
License: MIT License
OnlineWardleyMaps.com - Draw Wardley Maps in seconds using this free online tool
Home Page: https://onlinewardleymaps.com/
License: MIT License
The web tool is quite nice for authoring, and the human-readable markup is great to easily create them and modify without even a mouse.
But, I'd like to be able to manage these maps in a git repo, for example, to track changes over time. And perhaps would want to generate SVG or images from the markup. Perhaps even use this in an IDE/editor preview plugin (think PlantUML).
Is there already a CLI version of the tool that could work in this environment?
as per https://miro.medium.com/max/5496/1*4exsrh6Ju8wFr6DEHkUTQw.jpeg
'How the map is changing - competitive force'
Parent Issue - #51
Partly exists when a component is evolved.
as per https://miro.medium.com/max/5496/1*4exsrh6Ju8wFr6DEHkUTQw.jpeg
'A limitation to one component to another'
Parent Issue - #51
I'd like to add the inertia sign right after the label, rather than on the border of the next level. Does that make sense?
As per tweet - https://twitter.com/HansDeLeenheer/status/1219256783375650816
It would be really marvellous if multiple users could simultaneously interact with a map.
e.g. https://miro.medium.com/max/2112/1*x5eXd5ylQpQRDHkJ9anrJQ.jpeg
In our mapping we usually annotate components and inertia points, but Simon also annotates floating areas.
It needs to be possible to use the same annotation target from multiple anchors, for example to illustrate co-evolution of practice.
Ideally there would be an area to display the annotation expansions too.
It would be great to be able to leave the y co-ordinate unspecified and have the system place the y values automatically. I think it would be possible to do all the manual placement using either an "anchor" flag (this could be a specialisation of 'component'?) or in relative terms to other components (to indicate "above", "below" and "same level"). Potential syntax for this map http://onlinewardleymaps.com/#KrcjD8Z9VHpFhOxJaC
anchor A [.5]
component B [.3]
component C [.6]
component D [ .4]
component E [ .2]
A -> B
A -> C
B -> D
C -> D
D -> E
B = C
E ^ D
When I change the evolution value on a component, I expect to see the node move and the relationships redrawn around them
If I adjust an evolved X coord I see that the relationship lines are redrawn at the target position, but the component node stays exactly where it was previously.
This is likely connected to no state change being detected on the element itself. (A prop on the containing element will need to be updated for react to re-render the relevent markup)
There is currently no coverage in the app.
It might be an idea to add snapshot tests to the exisiting components.
I'm not a big fan of snapshot testing, but it will at least give a dev a smell if an update changes something unexpectedly.
May be a mistake on my part, but why does the path say "unsaved"?
Would be great if we could make a docs/maps folder and start populating it with some maps of the app anchored to different users.
Rather than typing component, it would be nice just to be able to do "c" etc.
title = t
component =c
evolve = e
inertia = i
As I am not be able to create wardleymaps publicly I would like to host onlinewardley maps on our K8s cluster.
Possibly only an irritation because I've coded a bunch of Clojure, but... The comma in [y, x]
is redundant. Allow [y x]
.
Ability to add Attitude to a map - Pioneers, Settlers, Town Planners.
https://miro.medium.com/max/5496/1*4exsrh6Ju8wFr6DEHkUTQw.jpeg
pioneers [topRight, topLeft, bottomLeft, bottomRight]
each part would be maturity, visiblity
pioneers [ [0.1, 0.2], [0.1, 0.4], ... , ... ]
A similar thing manifests in CSS if further inspiration is needed.
Parent #51
You allow changing the evolution axis labels.
Please allow changing the value chain axis labels.
Thanks!
when using
style handwritten
or
style wardley
and downloading maps, the style is lost.
I've had a couple of situations where I've picked up a component and something has happened meaning that it won't drop, and remains stuck to the pointer. The only way I've managed to get out of this state is to save and reload the map.
Would be better to have some general exception handling that returns the component to its pre-drag position if any exception occurs during drag or drop.
Repro:
component foo []
component foo [.8,]
As title - to prevent accidentally losing work, like I've just done.. :(
A good workflow in the app would be to create components in the text editor using component foo
, have them initially position themselve around [0.9, 0.1]
and then position them using drag and drop.
Simon Wardley suggests the following symbols on the map in his book:
https://miro.medium.com/max/5496/1*4exsrh6Ju8wFr6DEHkUTQw.jpeg
Please add them, so the newly built maps are more complete.
Another instance of jQuery being used that could do with being replaced with React equiv way of doing.
Line 40 in App.js - https://github.com/damonsk/onlinewardleymaps/blob/master/src/components/App.js#L40
Would it be possible to extend the grammar to render pipelines?
Perhaps the semantics could be similar to evolve
evolve Name (X Axis)
A pipeline could be defined as
pipeline Name [X Axis, X Axis]
After exporting a PNG of the following map. I used a graphics editor to overlay the pipelines. It would be so useful to script these instead:
title Evolution of Work
style wardley
anchor Business [0.95, 0.28]
component Human Capital [0.84, 0.23] label [-95, -10]
component Capital [0.85, 0.33] label [4, -9]
component Automation [0.29, 0.50] label [2, -10]
component Systematization [0.45, 0.24] label [-94, -16]
component Craft [0.67, 0.21] label [-41, -9]
component AI [0.07, 0.55] label [2, -10]
Business->Human Capital
Business->Capital
Human Capital->Craft
Craft->Systematization
Capital->Automation
Systematization->AI
Automation->AI
Would it be possible to extend the grammar to support submaps?
Clicking a submap component would navigate to the specified address of a lower level map.
submap Name [Y, X] VarName
var Name Value
The convention used in Atlas is a component with a solid fill:
Example script:
submap Order Pipeline [0.8, 0.6] OrderPipelineMap
var OrderPipelineMap "https://onlinewardleymaps.com/#clone:zYTNMRLQKvdbVFVNGi"
as per https://miro.medium.com/max/5496/1*4exsrh6Ju8wFr6DEHkUTQw.jpeg
'An attempt to alter map'
Parent Issue - #51
Similar to #40, the drag/drop has been missed in moving into React component.
Have you thought of using a grammar to describe the syntax? Would make coping with its evolution a lot cleaner.
I'm guessing you'd like to constrain it to be a regular language so that the syntax highlighting keeps working? Or is that a secondary consideration?
Migrate the project away from jQuery to React
App.js method loadFromRemoteStorage. This method currently used jQuery ajax to retrieve data for a given map. Replace with react equivalent way of retrieving data asynchronously.
When we create maps, we rarely create one, but usually a series of related maps that build on each other. Being software bods by background, we'd like to manage these in git, using branching or rebasing. Eventually we would look to build map generation into gitlab pipelines as well.
App.js method saveToRemoteStorage
his method currently used jQuery ajax to post data for a given map. Replace with react equivalent way of retrieving data asynchronously.
Drawing both lines of present and lines of the future makes the maps really cluttered. Could we ditch the lines of present when components evolve?
As per title - when the map changes, it would be good if it's autosaved.
Since flows can change when components evolve the annotations to flows should be sensitive to 'current' and 'future' conditions.
Example:
Team Z+'Facilitating'<Platform Team // Annotation shall only be visible to current flow Team Z+'X-as-a-Service'>Platform Team // Annotation shall only be visible to future flow Team Z+'X-as-a-Service'<>Platform Team // Annotation shall be visible to both flows
A small thing, but inertia bars should probably sit on the boundaries between stages of evolution.
Would be really handy to be able to add comments to source and to block comment sections out.
I'd prefer //
for line quotes and /* ... */
for block comments.
Would be fine to stick to line comments for now to keep things simple.
I often map future scenarios in which the introduction of a new component creates a future value chain. It would be great to be able to mark components as "future" and have any edges connecting them be marked as line of future.
https://twitter.com/RadekMaziarka/status/1213430676617416705
I have some problems with the flow with a label. The app draws flow but it doesn't draw text. Am I the only one who have this problem?
As seen in this map: https://twitter.com/joepindar/status/1213152950371147777
Being able to adjust label position is v useful - should be possible in the syntax not just in drag and drop.
Since all the maps should start with user needs, it may be a good idea to add a new variable "anchor" which would be somewhat different from the standard "component" and clearly show where everything starts.
As the title suggests.
As per https://miro.medium.com/max/5496/1*4exsrh6Ju8wFr6DEHkUTQw.jpeg
'An area of interest, something worth noting, e.g components designated to a team.'
Parent #51
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.