60

The Request

This is a request to add Graphviz (DOT) support to Markdown. This will allow us to easily embed editable and indexable graphs in questions and answers. I imagine it will be particularly useful for the theoretical CS site and for Stack Overflow itself, but I think any site of the many we have in SE-2.0 and the original trilogy can enjoy graph support.

I get a feeling this is going to get a very low priority, but perhaps the implementation is simple and more people than I expect will want this.

Finally, here's what seems to be a proof of concept for embedding Graphviz in Python's Markdown implementation.

Usage Example

Example of what I mean - using the following (proposed) Markdown,

<dot>
digraph {
    a -> b -> c;
    b -> d;
}
</dot>

Will embed the image:

graphviz graph

Generating the image can be as simple as giving that text as input to a server-installed copy of Graphviz and asking it to generate an image in return. The final result is just an image, so I don't see any potential abuse or security problem here.

EDIT: a server-oriented module for generating diagrams, called WebDot, is also available directly from Graphviz's website.

Use Cases

There are currently over a hundred questions tagged on Stack Overflow, I'm guessing many of them would enjoy that feature, though obviously this isn't the use-case I am thinking about.

I've used Graphviz myself in two different posts I've made, but if anyone else knows of other posts that could have used it, feel free to add these examples here. My posts:

Improve this question
9
  • I think .svg should be sufficient for this purpose; see edited answer below.
    – Jeff Atwood
    Sep 18, 2011 at 8:22
  • 4
    @Jeff SVGs are a lot harder to produce and edit than just writing a little text and immediately producing useful graphs. Text in SVGs is indexable, though, so that aspect is certainly addressed by your answer.
    – Oak
    Oct 26, 2011 at 17:10
  • 1
    @JeffAtwood I totally agree with Oak
    – CAFxX
    Dec 8, 2011 at 13:03
  • Inline Graphviz code could render to SVG and thereby be indexable.
    – smokris
    Feb 11, 2012 at 7:02
  • Totally agree with Oak, inline DOT is that easy while one had to start an external application like Inkscape in order to produce a complex SVG markup.
    – mdo
    Mar 20, 2013 at 7:35
  • SVG doesn't do graph layout. I use dot a lot.
    – reinierpost
    Apr 5, 2013 at 11:24
  • 1
    The point of having dot support: 1) dot can do the layout 2) no special editor needed. I would still love to see this.
    – reinierpost
    Mar 3, 2014 at 13:53
  • There is a javascript graphviz renderer here. Even without SE support one could write a bookmarklet/scriplet to find <dot>...</dot> strings, and replace them inline with client-side-rendered SVGs. But, of-course, SE built-in support for (even a subset of) graphviz in questions and answers would be great. I know, i'd use it.
    – Alex Stragies
    Aug 5, 2016 at 23:19
  • Why can't we take this one step further? Can we have a graphic editor like gliffy? It would be much easier to add a simple graph to the post.
    – Safecoder
    Sep 26, 2016 at 18:01

1 Answer 1

Reset to default
2

Yes, please. Also, SVG support for basic animations and illustrations is incredibly useful. For example, https://upload.wikimedia.org/wikipedia/commons/d/d2/Pythagorean.svg

as a .png:

png

as a .svg:

svg

as an animated .svg:

http://www.bogotobogo.com/svg_source/Pythagorean.svg

(this also works inline but it has odd sizing, so removed)

Improve this answer
2
  • 2
    as you can see from my edit, this already works, at least in Chrome...
    – Jeff Atwood
    Sep 18, 2011 at 8:18
  • @JeffAtwood What is meant by "odd sizing"? It stays the same size while animated. I'd let it be there, animated.
    – Camilo Martin
    Feb 20, 2012 at 0:37

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .