Support for text/syntax/markup driven or WYSIWYG editable charts, diagrams, graphs, flowcharts etc. (Identify, develop, review and deploy extension on Wikimedia wikis to add)


Moving here the following proposals:,_Diagrams,_Graphs_and_more
(with some of the participants in cc).

  • «By now Wikipedia has markup/code for everything—math (TeX), parser functions, location maps, and even SVG is supported. However, what is notably missing from many articles (other than high-quality portraits) are graphs and charts.»
  • «There are many types of diagrams. The need for collaborative graphics is wide ranging, from map making to biochemical pathways to flow charts to genealogy to general charting. Each type of graphic has or could have a little language, XML or other representation to define graphics of that type succinctly. Whilst all can be presented as .pngs or .SVGs, the more succinct description is necessary for editability.»

This is distinct from bug 43616 (Provide a way to create interactive 2D/3D timelines and infographics e.g. Java applets, AJAX, Flash) in that it's not about *interactive* stuff and that there are some existing extensions which someone should assess and develop for Wikimedia purposes. I'd also leave maps out of it because that's being addressed (at last) elsewhere.
Part of it will be solved by bug 38271, but only to a degree.

Mentioned extensions: [[mw:Extension:Graph]], [[mw:Extension:GnuplotBasic]], [[mw:Extension:Plotters]], [[mw:Extension:WikiPlot]].

Keywords from the proposals:, Java .jar, Flash .swf, Silverlight .scr, ActiveX .ocx, Vector (.svg) .svg (XML), AnyWikiDraw, AnyWikiDraw, WikiPathways, WikiTex, Graph Plugin, DPL Bundle, TeX, gluplot, pgfplots.

Version: unspecified
Severity: enhancement

bzimport added a subscriber: wikibugs-l.
bzimport set Reference to bz54221.
Nemo_bis created this task.Via LegacySep 17 2013, 12:14 PM
robkam added a comment.Via ConduitSep 17 2013, 3:52 PM

What about reviving [[Extension:WikiTeX]] (not to be confused with [[Extension:WikiTex]])? This would have done graphs, plots, and more. It would be handy for it to also support simple circuit diagrams.

robkam added a comment.Via ConduitSep 17 2013, 4:09 PM

Correction, the links are: [[mw:Extension:WikiTeX]] (and [[mw:Extension:WikiTex]]).

Qgil added a comment.Via ConduitOct 30 2013, 8:24 PM

Is there an interest in proposing this project for Outreach Program for Women?
If so, and if there at least one mentor for it. please move it to the "Featured projects" section. This way it will be automatically transcluded in

Thank you!

bzimport added a comment.Via ConduitDec 1 2013, 3:43 PM

vladjohn2013 wrote:

Hi, this project is still listed at

Should this project be still listed in that page? If not, please remove it. If it still makes sense, then it could be moved to the "Featured projects" section if it has community support and mentors.

Nemo_bis added a comment.Via ConduitDec 1 2013, 3:49 PM

(In reply to comment #4)

Should this project be still listed in that page?


If not, please remove it.
it still makes sense, then it could be moved to the "Featured projects"
if it has community support and mentors.

It lacks a mentor, plus (probably) someone to set a direction/the requirements (who may or not be the same person).

Milimetric added a comment.Via ConduitFeb 4 2014, 4:18 PM

tl;dr; I would be interested in being a mentor here, and probably collaborating until a solution is reached.

We've done some thinking about this while we developed Limn [1] last year. I believe Limn was headed in the wrong direction, but we (team analytics) are interested in solving this problem and it would be nice to combine efforts with anyone that is also interested. Currently, I believe that Vega JS [2] is a very promising library. It has a great mixture of simplicity and power.

My personal opinion is that creating and editing infographics would work much like Visual Editor does. There would be a simple JSON editor on the front end, which could evolve over time. When saved, this would use a server to generate static infographics for consumption by the cache layer. The dynamic infographic could be accessed through a link on the static image. The cache could be repopulated with up-to-date infographics periodically if they depend on external data. For this vision, Vega JS is quite suitable as it can generate PNGs server side for example.


Pastakhov added a comment.Via ConduitFeb 5 2014, 11:12 AM

I'd suggest using a scripting language as markup for the editable charts, diagrams, graphs, flowcharts etc.

For end users this may be like the example:


G { "Bonn" --> "Berlin" [ style: bold; ] }
Graph( [ "Bonn" => [ "Berlin", "style"=>"bold" ] ] );
$bonn = node("Bonn");
$bonn->linkTo( node("Berlin", "bold") );
Graph( $bonn );


<wikiplot height="200" width="200" caption="Simple plot" xspan="-100;100" yspan="-100;100">

<graph label="Graph 1." color="255,0,0">x+4</graph>
<graph label="Graph 2.">3*x-3</graph>



$plot = new Plot( ['height'=>200, 'width'=>200, 'caption'=>'Simple plot', 'xspan'=>[-100, 100], 'yspan'=>[-100, 100] ] );


$plot = new Plot();
$plot->height = 200;
$plot->width = 200;
$plot->caption = "Simple plot";
$plot->xspan = [-100, 100];
$plot->yspan = [-100, 100];


$plot.addGraph( ['x+4', 'label'=> 'Graph 1.', 'color'=>[255,0,0] ]);

$graph = new Graph( "3*x-3" );
$graph->label = 'Graph 2.'
$plot.add( $graph );

echo $plot;

It looks like directly code execution, but it is not.
I did mw:Extension:Foxway for testing possibility of this. I ascertained that this may work and may work quickly.
Now I do new mw:Extension:PhpTags. There any extension can register a hook as a constant, function or object.
So far I have only worked on the functions and constants, and did not start work on objects.
I am sure that the PhpTags will cover all the needs and will be convenient and powerful tool.
I would like to find someone interested in discussing this.

Milimetric added a comment.Via ConduitFeb 5 2014, 3:49 PM

Thanks Pavel. I like the syntax you mention. The advantage to using Vega JS syntax would be that it's a healthy active project and we get the parser, etc. for free. Check it out if you haven't had a chance, I linked to it above.

Qgil added a comment.Via ConduitFeb 5 2014, 6:07 PM

Dan, thank you for pushing this proposal. If you want to jump to the GSoC 2014 train you need to:

  • Find a second mentor.

The sooner the better, since Wikimedia will be evaluated by the GSoC organizers in the next 1-2 weeks. You will know you are ready when your project looks great at


Pastakhov added a comment.Via ConduitFeb 6 2014, 5:04 AM

Thanks, Dan. Vaga is excellent.

But, for example, I need a template to draw a bar of population.
The template takes a comma-separated list of cities.
The population is taken from the wikidata.




Source of wikipage Template:MyTemplate:

... Some wiki markup ...
if ( isset($args[cities]) ) {

$cities = explode( $delimiter, $args[cities] );
$population = AskWikidata( 'Give me population of cities', $cities );
$data = array_combine($cities, $population);
echo new Vega( 
    [ 'size'=>[400,200], 'scales'=>['x'=>'cities', y=>'population'] ] 

... Some wiki markup ...

There are:

  • functions 'explode', 'array_combine' is hooks of the extension PphTags Functions. (already done)
  • function 'AskWikidata' is fictional, but can be implemented as hook of some extension
  • objects 'Vega' is fictional, but can be implemented as hook of some extension
  • 'if', 'isset', 'echo' and '[...] (array definition)' is functions of extension PhpTags (already done)

Suppose I'm developer of the extension Vega.
I should just take the javascript source code from Vega and register hook in the extension PhpTags.

source of Vega.php:

$wgHooks['PhpTagsRuntimeFirstInit'][] = 'VegaExtension::initializeRuntime';

class VegaExtension {

public static function initializeRuntime() {
  \PhpTags\Runtime::setObjectsHook( 'VegaObject', array('Vega') );


class VegaObject extends PhpTags\BaseHooks {

public static function onObjectHook( ... ) {
  // some code


The Class VegaObject will receive the arrays of data and parameters from the PhpTags,
and when the function 'echo' is called returns all the necessary data for drowing the bar on the wikipage.
a large part of the code (such as processing of various parameters) have to be implemented in the class PhpTags\BaseHooks.
The class VegaObject will just have to inform PhpTags that it needs 'vega.min.js' and convey to one ready parameters.
Since it is very simple, similar extensions can be done in one day.

Maybe I'm writing all this is off topic, forgive me please.
But I can not find anyone interested in this.
I guess I'm looking for not out there, or can not speak understandable.
Maybe I just doing nonsense and distract people from her work, I do not know.

Milimetric added a comment.Via ConduitFeb 10 2014, 7:37 PM

I think what you're saying makes sense Pavel. And no worries, to participate in this community you have to be really good at dealing with distractions. I'm still waiting for someone else to help with mentoring on this important project. I think someone with mediawiki extension development experience would be great. Part of the reason I can't comment more, Pavel, is that I don't know anything about mediawiki extensions :)

Yurik added a comment.Via ConduitSep 23 2014, 6:47 AM

Graph extension might be applicable, even though it is not dynamic (yet), or even in production wikis, it does support various timelines, e.g. "Napoleon" at :)

See and samples at

Discussion at

Yurik added a comment.Via ConduitSep 23 2014, 6:50 AM

Sorry, meant to post last comment for bug 43616. Yet, for this request, graph ext is still applicable, except that it is not wysiwyg unless some brave soul starts hacking a proper vega editor.

Nemo_bis awarded a token.Via WebDec 12 2014, 8:18 AM
JamesCrook added a subscriber: JamesCrook.Via WebFeb 7 2015, 4:56 PM
Sumit added a subscriber: Sumit.Via WebFeb 11 2015, 7:36 AM

I'd like to take this up as a project. Is this still open for taking up and developing for this year?

Nemo_bis added a comment.Via WebFeb 11 2015, 8:29 AM

I'd like to take this up as a project. Is this still open for taking up and developing for this year?

It's open, but not ready. Please choose one of the extensions mentioned by this report and start filing patches against them. When you find one you're comfortable developing, you'll know the area you can work on.

@Milimetric, @Yurik, is there a possible project related to this task that students like @Sumit could plan for in the context of Google Summer of Code 2015 (and that you would like to mentor)? Something about MediaWiki-extensions-Graph ?

Qgil moved this task to Need Discussion on the Possible-Tech-Projects workboard.Via WebFeb 11 2015, 9:55 AM
Qgil added a comment.Via WebFeb 11 2015, 1:44 PM

Wikimedia will apply to Google Summer of Code and Outreachy on Tuesday, February 17. If you want this task to become a featured project idea, please follow these instructions.

Yurik added a comment.Via WebFeb 11 2015, 2:18 PM

@Qgil, I can totally see this becoming a GSoC project, but most of the mentorship would have to come from the UI/Visual Editor team because they have the expertise in building custom editors. The student would build an editor with a dynamically updated viewer for the VE. I already have a simplified version of that here -- click preview and try changing the graph definition.

Nemo_bis added a comment.Via WebFeb 11 2015, 7:42 PM

This task is about wikitext. VisualEditor support for the markup is a separate issue.

Nemo_bis added a comment.Via WebFeb 11 2015, 7:46 PM

Actually, this was one of the rawest ideas in the project list and is absolutely not usable for GSoC, unless a student comes who has an extremely clear idea of a feature to add and a plan for it. I'll move the possible project tag to T56222. The other blocker, T40271, would also be suitable, but I doubt it would benefit from GSoC (iterative GSoC cycles over the same problem rarely helped anything).

NiharikaKohli added a subscriber: NiharikaKohli.Via WebThu, Mar 5, 7:49 AM
Aklapper added a project: Commons.Via WebTue, Mar 10, 4:45 PM
Steinsplitter moved this task to Backlog on the Commons workboard.Via WebWed, Mar 11, 12:53 PM

Add Comment

Column Prototype
This is a very early prototype of a persistent column. It is not expected to work yet, and leaving it open will activate other new features which will break things. Press "\" (backslash) on your keyboard to close it now.