Download

What interests you most? Type its name in the big text window on the left. Or look at an example from the Gallery.

About Theory Maker

Theory Maker is a free, open-source project by (Steve Powell). The code for Theory Maker is here and for the web interface is here if you want it. It is under rapid development and run on a shoestring so please don't rely on it being there next week. I plan to keep it running for years, but who knows.

I also restart the server every day or so as I update the code, so make sure you save a copy of your text or save your diagram as a permanent link, so you don't lose your work.

I don't plan ever to charge for Theory Maker or to make money from it directly. It is a project for airing some ideas I have about Theories of Change to accompany a book I am writing.

Credits

Theory Maker is built on top of Graphviz using Shiny.

For the icons, flaticon.com and font-awesome.

Many people have helped me in developing the app, not limited to: Anamaria Golemac Powell, Esad Bratović, Simone Ginsburg, Randall Puljek-Shank, many colleagues on LinkedIn, …

Comments, suggestions, bug reports:

Please tweet me or write here.

Do us a favour and tweet about Theory Maker!

“Theories of change: great idea, but fiddly to draw and revise.”

“Try Theory Maker, the quick, free web app.”

Theory Maker - sketch out your Theory of Change

Theory Maker is a free web app for making any kind of causal diagram, i.e. a diagram which uses arrows to say what contributes to what. You make the diagrams just by typing the names of the elements (called variables) in a structured way into a (resizeable) window, and you get a live diagram as output which reflects what you type.

In particular, it is optimised for making theories of change, logframes, etc. - special kinds of pragmatic causal theory which are particularly popular at the moment in the world of monitoring and evaluation (M&E).

Theory Maker is most often used by M&E staff for quickly sketching out project theories and evaluation plans. But scientists, especially social scientists, and policy makers use it too.

Theory Maker is experimental, open-source, incomplete and in rapid development. Please don't rely on it for your urgent project proposal. But as you can immediately download any diagrams you make, you don't have much to lose, so go ahead and try it out. However, the rules which turn the text into diagrams may yet change from time to time, so a text which works now might produce a slightly different diagram in a month's time.

Please tweet me me your comments, problems and suggestions.

Plus, Theory Maker is based on a theory of Theories of Change. So when you diagram your theory using Theory Maker, the examples help you to make a real theory, expressed using variables and rules to link them up, not just a nice picture. I have just started to set out some of this theory in the examples provided here. There is a lot more to come.

What Theory Maker provides

Quick and easy …

Theory Maker tries to make it easy to make a diagram using only text typed according to simple rules. It is most useful for quick prototyping, discussions and presentations, not for all the details of project plans.

… theories of change

There are plenty of toolkits for making various kinds of network graphs and UML diagrams. Some are offline, some are online, for example plantuml. But Theory Maker is optimised for, as the name says, theories of change, logframes, etc.

… with boxes

One special Theory Maker feature is that you can also create boxes to group the variables of your diagram, for example to mark off different phases, regions or stakeholders. You can also nest the boxes inside one another, like Russian dolls. And you can show and hide the boxes with a click. This is particularly useful in the field of project monitoring and evaluation, in which we often want to group variables together to show non-causal groupings e.g. project phase, geographical distribution etc. Many project templates like the Logical Framework Approach don't have a standard way to group variables, which often tempts users to use arrows to link them instead, implying a causal link where there isn't one.

Theory Maker Features (& Known Bugs)

Main features

  • Human-readable syntax.
  • Four different ways to “draw” lines between variables, so you can use whatever is most convenient.
  • Boxes for putting variables in groups, for example to mark off different phases, places or participants.
  • Format your variables and boxes with colours, fonts etc, including conditional formatting to systematically format elements only if they contain certain text.
  • Easy to change diagram direction (left-to-right, top-to-bottom, etc.) and diagram proportions (wider, taller etc.).
  • Easy to change the order of variables and line them up in different ways with the new order feature.
  • Download your diagram in PDF, bitmap, vector and spreadsheet format.
  • Your diagram gets a live URL which you can use for auto-updating e.g. in Word.
  • Easy to add cross links in mainly hierarchical theories, e.g. from one sub-Outcome to more than one Outcome ​- Recognises and makes auto links for standard decimal naming conventions beginning with a number. Paste in text with this kind of numbering to automatically create a hierarchical plan, e.g.

    • 1 Goal: world peace
    • 1.a Outcome: functioning UN
    • 1.a.a Revitalised Security Council
  • You can create aliases for your variables to save tiresome retyping

  • Add notes, “calendar bars” and many other bells and whistles

  • Based on a theory of theories of change.

  • Lots of live templates and suggestions for your theory of change, ready for you to edit (don't worry, you aren't editing the originals).

  • Checkboxes to include/exclude boxes and their variables

  • You can include other diagrams in your main diagram, and display or hide them with one click.

  • Each new diagram gets a unique permanent link which you can bookmark to return to later or send to a friend. Anyone can save changes to this link. There is also an original link which no-one can change.

  • Theory Maker automatically breaks up long names which have full stops (“.”) - The text after the full stops gets put into smaller boxes.

  • Add assumptions as labels to arrows just by typing (Assumption: my assumption) at the head of an arrow.

What it doesn't do

No beautifying

It doesn't give you much control over the actual layout (like whether something appears at the top or bottom). This tool tries to keep the layout simple, but that doesn't necessarily mean things are where you expect them to be. Don't bother trying to get the nodes and boxes to move about: If you want to tweak a diagram further, you can download the .svg version of it and manipulate it further in Inkscape, Libreoffice Draw or Illustrator.

Only Latin characters

Sorry but you can't use non-Latin characters.

Remember to save your text

There is no registration or log-in. You just type text. You can type a title for your diagram and click to save a version and bookmark the link. If you don't, don't forget to copy and paste (somewhere safe) the text you typed, because it won't be there next time you visit the site.


Comments, suggestions, bug reports:

Here.


Below this line are technical details of interest mostly to myself…

Missing features (Roadmap)

  • Easy alias - just take first matching letters
  • Longer text as footnotes
  • Calendar spreadsheet output
  • Easy sliders for wrap, nodesep….
  • Option to download zip of different versions of diagram, with and without different boxes
  • Enable different Graphviz layouts e.g. circle, neato
  • Timeline - when a date is given, introduce a bar of dates joined by hidden arrows, using rank=same
  • Automatic legend
  • Enable clicking items to zoom in on them e.g. node[ URL=“http://asdf.com”]
  • Easy to tweet a link with picture and text (to original version). Use https://dev.twitter.com/cards/types/summary-large-image; also https://dev.twitter.com/cards/overview. Doesn't work at the moment because of timeouts.
  • Release as R package on github.

Changelog: Technical features just implemented and bugs squashed

  • First most relevant example directly accessible under, e.g. http://theorymaker.info?example=60Assumptions.
  • Brewer colours like orange2 can now be used anywhere.
  • Rationalised simple codes like (Assumptions: my assumption) and (Rule: my rule).
  • Rationalised format for notes, now all have to end in a dot and a space.
  • Manual formatting applied directly to variables like My variable [orange3] now overrides global and conditional formatting
  • New address: theorymaker.info (formerly quicktoc.info).
  • Print permalink on diagram / make it an actual hyperlink
  • Blogging via ?blog=
  • Make it easier to specify edge properties, e.g.
    • Some variable > blue > my target
  • Gallery instead of Examples drop-down, gallery subfolder headings now clickable
  • Diagrams in example text now clickable with lightbox
  • Allow blog syntax within ordinary markup
  • Linebreaks in edge labels - auto wrap.
  • Colours for edge, box and node shortcodes now include black white yellow brown pink.
  • Bug with notes and rowspan was wrong here: ID. label;join=join but not with space: ID. label; join=join
  • Fixed notes colours bug when many notes
  • Improved appearance of variable borders
  • Sometimes proportion slider got in a loop
  • Enabled nice Brewer colour fades like orange3 for shortcodes.
  • Fixed: Brewer colours don't work for box outlines

Bugs and fixes

  • transfer all attributes code is very slow, double for loop
  • box to list of vars - not all ltail correct. box to list including a box - may crash
  • delete query string when clicking on gallery etc
  • if(!is.integer(as.integer(str))) values=nums # this gives a warning
  • resize fa/pngs
  • Expand shortcode colours to everything not just brewer
  • Produce modified link if attempt is made to autosave results in overwrite. This is about line 410 in app.R but does not work.

  • Sometimes with classic syntax, the last of double properties are applied to whole diagram. Note this bug exists also with ;outlinecolour=red; but it doesn't exist with easy shortcode syntax so maybe won't fix.

    In Ls Ps g Hi I;arrowdirection=both;arrowwidth=7

  • Double or more dots in label cause problems with dot syntax so are deleted.

Posts to write

Flexible theories of change

Simon Hearn on Impact

Frequently asked questions

Q: How can I use the diagram in a document? A: 1) Select the format you want, click the download button, save the diagram and paste into your document. SVG, PDF and Word (these are .emf files, best for Microsoft Office documents) will provide better quality than .png - but there can be some problems with different formats in different operating systems. 2) Right-click on the diagram to copy or save it - but it will be in .svg format, which you can paste into some document types (like Libreoffice) but not others (Microsoft office).

Q: What is the difference between QuickToc and Theory Maker? A: None. Theory Maker is the new name.

Q: I typed a date: 21.12.1961 at the start of a line and now the diagram looks funny. A: Theory Maker thought you were using decimal notation. Add some letters at the start of the line, e.g. date: 21.12. 1961.

Q: Help, I made a mistake typing something and got lost! A: trying undoing your changes: Press control-z one or more times on Windows or Linux.

Q: Why is my arrow label or style not appearing? A: Whichever method you use to define the arrows, you have to define them next to the variable at the beginning of the arrow, not the end.

Q: How can I split a line? A: Use /// like this: first line blah///second line blah

Q: How can I end one box without starting another? A: Just put a line with the same number of -s as the box you want to end, and no other text.

Q: What does download CSV mean? A: Instead of a picture, you can download an Excel-compatible table of all your variables.

Q: How can I get a better-quality download? A: Instead of PNG, select SVG or PDF.

Q: What if I want to work on different diagrams at the same time? A: Just open Theory Maker in different browser windows.

Q: I want control over layout like lining variables up or controlling the order of the variables. A: You can.

Q: I want to make my diagram super fancy and fit our corporate template. A: If you want to tweak a diagram further, you can download the .svg version of it and manipulate it further in a program like Inkscape, Libreoffice Draw or Illustrator.

Appearance

At some point in the future this page will tell the full story on how to tweak the appearance of your boxes, variables and lines. It is still incomplete, sorry!

The help button above the text box and the examples in the Gallery are more up to date than this page.

-Box with colours; boxcolor=blue3; boxfont=Georgia

Variable 1;  outlinecolor=orange5
 Variable 2; edgelabel=My label

Alt text

Colours

There is a whole range of really obscure colour names you can use (like burlywood, really?). Most common names like red and yellow work, but you can get a range of attractive shades from light to dark by adding a number from 1 to 9 after any of these names: blue, orange, red, grey (or gray), green, purple. Oh, and colour is the same as color and grey is the same as gray. Hooray.

a;  colour=orange3;  outlinecolour=blue3
 b; colour=orange6;  outlinecolour=blue6

Alt text

Uses the rather tasty Brewer colour schemes.

Fonts

At the moment, you can only set any font name available on your computer which consists of just one word. On my computer I have these and more:

  • Arial
  • Calibri
  • Caladea
  • Cambria
  • Century
  • Corbel
  • Courier
  • Euclid
  • Georgia
  • Helvetica
  • Papyrus
  • Perpetua

Variables

You can change:

  • color e.g. ; color=orange
  • font e.g. ; font=Arial
  • fontcolor e.g. ; fontcolor=orange
  • outlinecolor e.g. e.g. ; outlinecolor=orange

There is one more secret option: if you set ; style=invisible, your variable disappears!

Boxes

You can change:

  • boxcolor e.g. ; boxcolor=orange
  • boxfont e.g. ; boxfont=Georgia
  • boxfontcolor e.g. ; boxfontcolor=azure
  • boxoutlinecolor e.g. ; boxoutlinecolor=white
  • boxstyle e.g. ; boxstyle=dashed
    • (can be rounded square dotted dashed or invisible). At the moment, dotted boxes are automatically rounded and dashed boxes are automatically squared off.

Note that boxes are just groupings of variables, so if you don't have any variables inside a box, your box won't show.

Arrows

In Theory Maker, arrows (lines between variables, also called “edges”) are created implicitly when you create variables. You change the appearance of an arrow on the line corresponding to the beginning of the arrow, i.e. the opposite end to where the arrowhead usually appears.

Changing edges created by using spaces

a
 b; edgelabel=my label; edgestyle=dotted

Changing edges created by using dots

b; edgelabel=my label; edgestyle=dotted
.a

Changing edges created by using decimal notation

a
a.1::b; edgelabel=my label; edgestyle=dotted

Changing edges created by using to=

a
b; to=a; edgelabel=my label; edgestyle=dotted

All these four specifications create this same image:

You can change:

  • edgelabel e.g. ; edgelabel=My edge label
  • arrowcolor e.g. ; arrowcolor=orange2
  • arrowwidth e.g. ; arrowwidth=4 (any number from 0 upwards. .5 is really thin, 40 is ridiculously thick)
  • edgestyle e.g. ; edgestyle=dotted (dotted or dashed; invis makes the whole edge disappear including any label, whereas invisible makes just the line disappear)
  • arrowfont e.g. ; arrowfont=Arial
  • arrowfontcolor e.g. ; arrowfontcolor=orange
  • arrowdirection e.g. ; arrowdirection=both (back, both, none - use this to change the arrowheads)
  • edgeattach (n,s,e,w - use this to attach the arrow at the north, south east or west border of the target variable)