digraph G {
  "Welcome" [ shape=box, label=<
  <TABLE BORDER="0" CELLBORDER="1" CELLSPACING="0">
  <TR><TD>left</TD><TD PORT="f1">mid dle</TD><TD PORT="f2">right</TD></TR> 
  </TABLE>> ];
    "Welcome" -> "To";
    "To" -> "Web";
    "To" -> "GraphViz!";
  }

results in the error:

Warning: Not built with libexpat. Table formatting is not available. in label of node Welcome

(sorry can't work out how to stop Markdown intepreting the table).

I'm up for helping implement this if it makes sense.

I've checked with https://gist.github.com/mjpieters/29623e9585fd694cdcc5 and it crashed with Uncaught RangeError: Maximum call stack size exceeded. Maybe there is a place for optimizations.

cosole error in chrome:

Cannot enlarge memory arrays. Either (1) compile with -s TOTAL_MEMORY=X with X higher than the current value 16777216, (2) compile with -s ALLOW_MEMORY_GROWTH=1 which adjusts the size at runtime but prevents some optimizations, (3) set Module.TOTAL_MEMORY to a higher value before the program runs, or if you want malloc to return NULL (0) instead of this abort, compile with -s ABORTING_MALLOC=0

Then,I try to add this code before Viz.js

<script> 
        var Module = {
             TOTAL_MEMORY: [537395200]
        } 
   </script>

but it can't works

please publish viz.js to npm.
Do you merge pull request if I make a package.json and add UMD support?

• add package.json
• add UMD pattern. It make possible to load by browser and node.js context.
• publish to npm

usage.

$ cat sample.js
var Viz = require("viz.js");
var result = Viz("digraph g { a -> b; }");
console.log(result);
$ node sample.js
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
 "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<!-- Generated by graphviz version 2.38.0 (20140413.2041)
 -->
<!-- Title: g Pages: 1 -->
<svg width="62pt" height="116pt"
 viewBox="0.00 0.00 62.00 116.00" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<g id="graph0" class="graph" transform="scale(1 1) rotate(0) translate(4 112)">
<title>g</title>
<polygon fill="white" stroke="none" points="-4,4 -4,-112 58,-112 58,4 -4,4"/>
<!-- a -->
<g id="node1" class="node"><title>a</title>
<ellipse fill="none" stroke="black" cx="27" cy="-90" rx="27" ry="18"/>
<text text-anchor="middle" x="27" y="-85.8" font-family="Times,serif" font-size="14.00">a</text>
</g>
<!-- b -->
<g id="node2" class="node"><title>b</title>
<ellipse fill="none" stroke="black" cx="27" cy="-18" rx="27" ry="18"/>
<text text-anchor="middle" x="27" y="-13.8" font-family="Times,serif" font-size="14.00">b</text>
</g>
<!-- a&#45;&gt;b -->
<g id="edge1" class="edge"><title>a&#45;&gt;b</title>
<path fill="none" stroke="black" d="M27,-71.6966C27,-63.9827 27,-54.7125 27,-46.1124"/>
<polygon fill="black" stroke="black" points="30.5001,-46.1043 27,-36.1043 23.5001,-46.1044 30.5001,-46.1043"/>
</g>
</g>
</svg>

Hello,

I trying to generate a SVG including local images (the idea is to change local path to url once the svg is done), but i cant find where to put the images.
the svg is generate without them.

for the Dot :

digraph g{
mynode[image="image.png", label=""];
}

i get the message :

Warning: No such file or directory while opening image.png Warning: No or improper image="image.png" for node "mynode"

and the svg :

"

<title>mynode</title>



"

i tried several places but i couldnt make it work.

any ideas ?

thanks for the great work anyway

Hello :-),

Is there a way to reduce “binary” (viz.js) size? For instance, PNG and xdot outputs are not interesting for me. Can I remove them? Maybe if I can compile dot without these renderers, I can use this Makefile the same way?

I have installed viz.js using npm install on my rpi 2 box.
But how do I host it to access it in browser.

I get an error when trying to compile the latest commit on Master (119049b) from source.

For reference, here is the output of emcc -v on my machine

emcc (Emscripten gcc/clang-like replacement + linker emulating GNU ld) 1.35.0
clang version 3.7.0 (https://github.com/kripken/emscripten-fastcomp-clang dbe68fecd03d6f646bd075963c3cc0e7130e5767) (https://github.com/kripken/emscripten-fastcomp 4e83be90903250ec5142edc57971ed4c633c5e25)
Target: x86_64-apple-darwin15.0.0
Thread model: posix
INFO:root:(Emscripten: Running sanity checks)

The output from the build is quite large so I've posted it into a Gist here.

(Perhaps I shouldn't be using latest commit on Master?)

Hi,

I got a problem when used viz.js to create graph. You can see the code as follow:

var deps = [
"viz.js"
];

require( deps, function() {
drawGraph();
});

function drawGraph(){
var g = "digraph G { a1 -> b3; b2 -> a3; a3 -> a0; }";
var tt=Viz(g,"svg");
document.body.innerHTML += tt;
}

I got the error: Uncaught Error: Module name "fs" has not been loaded yet for context: _. Use require([])
http://requirejs.org/docs/errors.html#notloaded

Then I checked the viz.js file, and I found the problem in the file:

var Ub=require("fs"),var Vb=require("path");

You can find this line in the viz.js file. I have checked on the Internet. It should be like :

require(["fs","path"], function() {
var Ub=require("fs"),var Vb=require("path");
});

Is this a mistake? If not, how to solve this problem?

Thanks in advanced.

I will go first!

We are working on a tiny web based solution to show network infrastructure.

some initial implementation: http://tzolov.github.io/viz-js/components/viz-js/ &
viz-js polymer element project

When I try to generate graph for
digraph G { rankdir="LR" subgraph cluster_ORIGINATOR { DRAFT; } subgraph cluster_MRA_REVIEWER { PENDING_REJECT; PENDING_ASSIGN; DISCARDED; } subgraph cluster_MRA_PRIMARY_APPROVER { ASSIGNED; } subgraph cluster_MRA_SECONDARY_APPROVER { PENDING_DEPRECATE; APPROVED; DISALLOWED; APPROVED_AUTOMATICALLY; RETIRED; REJECTED; PENDING_RETIRE; PENDING_FINAL_REJECT; PENDING_APPROVE; PENDING_NOT_REQUIRED; DEPRECATED; PENDING_DISALLOW; } DRAFT -> PENDING_ASSIGN [label="SUBMIT"];DRAFT -> ASSIGNED [label="REWORKED_DRAFT_SUBMIT"];ASSIGNED -> PENDING_FINAL_REJECT [label="FINAL_REJECT"];ASSIGNED -> PENDING_DEPRECATE [label="DEPRECATE"];ASSIGNED -> PENDING_NOT_REQUIRED [label="NOT_REQUIRED"];ASSIGNED -> DRAFT [label="REVERT"];ASSIGNED -> DISCARDED [label="TERMINATE"];ASSIGNED -> PENDING_RETIRE [label="RETIRE"];ASSIGNED -> PENDING_DISALLOW [label="DISALLOW"];ASSIGNED -> PENDING_REJECT [label="REJECT"];ASSIGNED -> PENDING_APPROVE [label="APPROVE"];ASSIGNED -> ASSIGNED [label="SAVE_AS_DRAFT"];PENDING_REJECT -> ASSIGNED [label="REVIEWER_SUBMIT"];PENDING_REJECT -> DRAFT [label="REVERT"];PENDING_REJECT -> DISCARDED [label="AGREE_DISCARD"];PENDING_ASSIGN -> DRAFT [label="REVERT"];PENDING_ASSIGN -> ASSIGNED [label="REVIEWER_SUBMIT"];PENDING_ASSIGN -> DISCARDED [label="TERMINATE"];PENDING_NOT_REQUIRED -> APPROVED_AUTOMATICALLY [label="AGREE_NOT_REQUIRED"];PENDING_NOT_REQUIRED -> DRAFT [label="REVERT"];PENDING_NOT_REQUIRED -> DISCARDED [label="TERMINATE"];PENDING_NOT_REQUIRED -> ASSIGNED [label="RESET"];PENDING_APPROVE -> DRAFT [label="REVERT"];PENDING_APPROVE -> ASSIGNED [label="RESET"];PENDING_APPROVE -> DISCARDED [label="TERMINATE"];PENDING_APPROVE -> APPROVED [label="AGREE_APPROVE"];PENDING_FINAL_REJECT -> REJECTED [label="AGREE_REJECT"];PENDING_FINAL_REJECT -> DRAFT [label="REVERT"];PENDING_FINAL_REJECT -> DISCARDED [label="TERMINATE"];PENDING_FINAL_REJECT -> ASSIGNED [label="RESET"];PENDING_DEPRECATE -> DRAFT [label="REVERT"];PENDING_DEPRECATE -> DISCARDED [label="TERMINATE"];PENDING_DEPRECATE -> ASSIGNED [label="RESET"];PENDING_DEPRECATE -> DEPRECATED [label="AGREE_DEPRECATE"];PENDING_DISALLOW -> DRAFT [label="REVERT"];PENDING_DISALLOW -> DISCARDED [label="TERMINATE"];PENDING_DISALLOW -> DISALLOWED [label="AGREE_DISALLOW"];PENDING_RETIRE -> ASSIGNED [label="RESET"];PENDING_RETIRE -> DRAFT [label="REVERT"];PENDING_RETIRE -> DISCARDED [label="TERMINATE"];PENDING_RETIRE -> RETIRED [label="AGREE_RETIRE"];}

I get an error:
Uncaught abort() at Error at jsStackTrace (http://mdaines.github.io/viz.js/bower_components/viz.js/viz.js:5:20800) at stackTrace (http://mdaines.github.io/viz.js/bower_components/viz.js/viz.js:5:20983) at Object.abort (http://mdaines.github.io/viz.js/bower_components/viz.js/viz.js:28:5424) at _abort (http://mdaines.github.io/viz.js/bower_components/viz.js/viz.js:5:603400) at O4 (http://mdaines.github.io/viz.js/bower_components/viz.js/viz.js:21:14501) at zf (http://mdaines.github.io/viz.js/bower_components/viz.js/viz.js:11:124669) at Array.sf (http://mdaines.github.io/viz.js/bower_components/viz.js/viz.js:11:120869) at gF (http://mdaines.github.io/viz.js/bower_components/viz.js/viz.js:9:172965) at ec (http://mdaines.github.io/viz.js/bower_components/viz.js/viz.js:11:882) at Object.ccallFunc [as ccall] (http://mdaines.github.io/viz.js/bower_components/viz.js/viz.js:5:8080) If this abort() is unexpected, build with -s ASSERTIONS=1 which can give more information.

Can be tested on http://mdaines.github.io/viz.js/

When I generate graph for same input using Graphviz dot.exe binary, it works ok.

... so that others (like me) can find what they need easily without compiling viz.js by themselves.

Or, at least, please point out the example page in gh-pages branch in README so that others (like me) can know how to use viz.js easily.

Thanks for the great job!!

Is it possible to draw gradients ?

I'm pretty new to graphviz and this javascript library too, but I've tried some examples of gradients and couldn't make it working...

Can you put a working sample for node gradients if this library supports it ?

Thanks

Hi. I managed to get GraphViz 2.32 building.
https://github.com/japgolly/viz.js/tree/graphviz232

I wont make a pull request because I think most testing is required but this is a good first step.

I've removed engines other than DOT.
The compiled viz.js is 1.4 MB and included in my repo.
I applied 2 hacks to emscripten's includes, see NOTES.md.

Hi
It is using it (viz.js) for my application to draw graphs dynamically and it worked well.

But now when i moved bit further and i introduce subgraphs and clusters, i got problem with vis.js. My graph is not that big but it has many clusters. it works great with Graphviz tool but when i run it with Viz.js it is showing following error:

abort() at Error
at stackTrace (http://localhost:7001/TreIntegration/resources/js/viz/viz.js:906:15)
at Object.abort (http://localhost:7001/TreIntegration/resources/js/viz/viz.js:6295:25)
at _abort (http://localhost:7001/TreIntegration/resources/js/viz/viz.js:4966:22)
at qu (http://localhost:7001/TreIntegration/resources/js/viz/viz.js:6117:16565)
at Array.j8 (http://localhost:7001/TreIntegration/resources/js/viz/viz.js:6116:334348)
at no (http://localhost:7001/TreIntegration/resources/js/viz/viz.js:6115:229897)
at cq (http://localhost:7001/TreIntegration/resources/js/viz/viz.js:6114:818)
at ccallFunc (http://localhost:7001/TreIntegration/resources/js/viz/viz.js:533:24)
at Object.ccall (http://localhost:7001/TreIntegration/resources/js/viz/viz.js:492:10)
at window.Viz (http://localhost:7001/TreIntegration/resources/js/viz/viz.js:6313:25)

here is my graph.

digraph G {
compound=true
subgraph "cluster__Application__PeopleSoft"{
graph [ id="93" shape="box" style="solid" color="gray" fillcolor="red" URL="/TreIntegration/pages/integration.xhtml?level=1&currentAppId=93" label="PeopleSoft" ]
"dummyPeopleSoft" [style=invis]
}
subgraph "cluster__Application__ICC"{
graph [ id="36" shape="box" style="solid" color="gray" fillcolor="red" URL="/TreIntegration/pages/integration.xhtml?level=1&currentAppId=36" label="ICC" ]
"dummyICC" [style=invis]
}
"dummyPeopleSoft" -> "dummyICC"[ltail="cluster__Application__PeopleSoft" lhead="cluster__Application__ICC" id="2750" label="Webservice" color="green" style="bold" intType="5" fontsize="8"]
subgraph "cluster__Application__111"{
graph [ id="5300" tooltip="002zzz2" shape="box" style="bold" color="red" fillcolor="red" URL="/TreIntegration/pages/integration.xhtml?level=1&currentAppId=5300" label="111" ]
subgraph "cluster__Application__sdf"{
label="sdf"
"dummy111_sdf" [style=invis]
}
}
"dummyICC" -> "dummy111_sdf"[ltail="cluster__Application__ICC" lhead="cluster__Application__111" id="6450" label="XML API" color="back" style="bold" intType="20" fontsize="8"]
subgraph "cluster__Application__222"{
graph [ id="6650" tooltip="222" shape="box" style="solid" color="gray" fillcolor="red" URL="/TreIntegration/pages/integration.xhtml?level=1&currentAppId=6650" label="222" ]
subgraph "cluster__Application__DD"{
label="DD"
subgraph "cluster__Application__EE"{
label="EE"
"dummy222_EE" [style=invis]
}
}
subgraph "cluster__Application__EE"{
label="EE"
"dummy222_EE" [style=invis]
}
subgraph "cluster__Application__AA"{
label="AA"
"dummy222_AA" [style=invis]
}
"222_A"[label=A]
"222_C"[label=C]
}
"dummy111_sdf" -> "222_A"[ltail="cluster__Application__111" lhead="cluster__Application__222" id="6250" label="usd" color="blue" style="solid" intType="9" fontsize="8"]
"dummy111_sdf" -> "dummy111_sdf"[ltail="cluster__Application__111" lhead="cluster__Application__111" id="6153" label="XML GATEWAY" color="yellow" style="bold" intType="21" fontsize="8"]
"dummy111_sdf" -> "dummy111_sdf"[ltail="cluster__Application__111" lhead="cluster__Application__111" id="6650" label="a" color="back" style="bold" intType="20" fontsize="8"]
"dummyICC" -> "dummy111_sdf"[ltail="cluster__Application__ICC" lhead="cluster__Application__111" id="6451" label="asf" color="back" style="bold" intType="20" fontsize="8"]
subgraph "cluster__Application__PaymentService"{
graph [ id="67" shape="box" style="solid" color="gray" fillcolor="red" URL="/TreIntegration/pages/integration.xhtml?level=1&currentAppId=67" label="Payment Service" ]
"dummyPaymentService" [style=invis]
}
"dummyPeopleSoft" -> "dummyPaymentService"[ltail="cluster__Application__PeopleSoft" lhead="cluster__Application__PaymentService" id="2751" label="Webservice" color="green" style="bold" intType="5" fontsize="8"]
subgraph "cluster__Application__Billing"{
graph [ id="89" shape="box" style="solid" color="gray" fillcolor="red" URL="/TreIntegration/pages/integration.xhtml?level=1&currentAppId=89" label="Billing" ]
"dummyBilling" [style=invis]
}
"dummyPaymentService" -> "dummyBilling"[ltail="cluster__Application__PaymentService" lhead="cluster__Application__Billing" id="3162" label="Tibco Adapter" color="gray" style="solid" intType="12" fontsize="8"]
subgraph "cluster__Application__ERP"{
graph [ id="34" shape="box" style="solid" color="gray" fillcolor="red" URL="/TreIntegration/pages/integration.xhtml?level=1&currentAppId=34" label="ERP" ]
subgraph "cluster__Application__m"{
label="m"
"ERP_m_a"[label=a]
subgraph "cluster__Application__m1"{
label="m1"
"dummyERP_m1" [style=invis]
}
subgraph "cluster__Application__a"{
label="a"
"ERP_a_b"[label=b]
}
}
subgraph "cluster__Application__m1"{
label="m1"
"dummyERP_m1" [style=invis]
}
subgraph "cluster__Application__a"{
label="a"
"ERP_a_b"[label=b]
}
"ERP_v"[label=v]
}
"dummyBilling" -> "ERP_v"[ltail="cluster__Application__Billing" lhead="cluster__Application__ERP" id="3200" label="Datastage" color="brown" style="dotted" intType="10" fontsize="8"]
"dummyBilling" -> "dummyPeopleSoft"[ltail="cluster__Application__Billing" lhead="cluster__Application__PeopleSoft" id="3201" label="XML API" color="back" style="bold" intType="20" fontsize="8"]
subgraph "cluster__Application__Streamserve"{
graph [ id="54" shape="box" style="solid" color="gray" fillcolor="red" URL="/TreIntegration/pages/integration.xhtml?level=1&currentAppId=54" label="Streamserve" ]
"dummyStreamserve" [style=invis]
}
"dummyBilling" -> "dummyStreamserve"[ltail="cluster__Application__Billing" lhead="cluster__Application__Streamserve" id="3202" label="FileBased" color="orange" style="dotted" intType="8" fontsize="8"]
subgraph "cluster__Application__EMA(EricssonMultiActivation)"{
graph [ id="91" shape="box" style="solid" color="gray" fillcolor="red" URL="/TreIntegration/pages/integration.xhtml?level=1&currentAppId=91" label="EMA (Ericsson Multi Activation)" ]
"dummyEMA(EricssonMultiActivation)" [style=invis]
}
"dummyBilling" -> "dummyEMA(EricssonMultiActivation)"[ltail="cluster__Application__Billing" lhead="cluster__Application__EMA(EricssonMultiActivation)" id="3203" label="Tibco Adapter" color="gray" style="solid" intType="12" fontsize="8"]
subgraph "cluster__Application__A"{
graph [ id="81" tooltip="222" shape="box" style="solid" color="gray" fillcolor="red" URL="/TreIntegration/pages/integration.xhtml?level=1&currentAppId=81" label="A" ]
"dummyA" [style=invis]
}
"dummyBilling" -> "dummyA"[ltail="cluster__Application__Billing" lhead="cluster__Application__A" id="4100" label="XML API" color="back" style="bold" intType="20" fontsize="8"]
subgraph "cluster__Application__WebLogin"{
graph [ id="82" shape="box" style="solid" color="gray" fillcolor="red" URL="/TreIntegration/pages/integration.xhtml?level=1&currentAppId=82" label="WebLogin" ]
"dummyWebLogin" [style=invis]
}
"dummyBilling" -> "dummyWebLogin"[ltail="cluster__Application__Billing" lhead="cluster__Application__WebLogin" id="3950" label="Tibco Prepad Adapter" color="gray" style="solid" intType="12" fontsize="8"]
"dummyPaymentService" -> "dummyPeopleSoft"[ltail="cluster__Application__PaymentService" lhead="cluster__Application__PeopleSoft" id="3163" label="XML API" color="back" style="bold" intType="20" fontsize="8"]
subgraph "cluster__Application__CCV"{
graph [ id="59" shape="box" style="solid" color="gray" fillcolor="red" URL="/TreIntegration/pages/integration.xhtml?level=1&currentAppId=59" label="CCV" ]
"dummyCCV" [style=invis]
}
"dummyPaymentService" -> "dummyCCV"[ltail="cluster__Application__PaymentService" lhead="cluster__Application__CCV" id="3164" label="Webservice" color="green" style="bold" intType="5" fontsize="8"]
subgraph "cluster__Application__3Repair1"{
graph [ id="46" tooltip="33" shape="box" style="solid" color="gray" fillcolor="red" URL="/TreIntegration/pages/integration.xhtml?level=1&currentAppId=46" label="3Repair1" ]
"dummy3Repair1" [style=invis]
}
"dummyCCV" -> "dummy3Repair1"[ltail="cluster__Application__CCV" lhead="cluster__Application__3Repair1" id="4000" label="XML API" color="back" style="bold" intType="20" fontsize="8"]
subgraph "cluster__Application__3Times"{
graph [ id="38" shape="box" style="solid" color="gray" fillcolor="red" URL="/TreIntegration/pages/integration.xhtml?level=1&currentAppId=38" label="3Times" ]
subgraph "cluster__Application__<v"{
label="<v"
"dummy3Times_<v" [style=invis]
}
}
"dummyCCV" -> "dummy3Times_<v"[ltail="cluster__Application__CCV" lhead="cluster__Application__3Times" id="4001" label="EMS - JMS" color="green" style="solid" intType="650" fontsize="8"]
subgraph "cluster__Application__abc"{
graph [ id="5152" shape="box" style="solid" color="gray" fillcolor="red" URL="/TreIntegration/pages/integration.xhtml?level=1&currentAppId=5152" label="abc" ]
"dummyabc" [style=invis]
}
"dummyCCV" -> "dummyabc"[ltail="cluster__Application__CCV" lhead="cluster__Application__abc" id="4002" label="EMS - JMS" color="green" style="solid" intType="650" fontsize="8"]
subgraph "cluster__Application__B"{
graph [ id="2" shape="box" style="solid" color="gray" fillcolor="red" URL="/TreIntegration/pages/integration.xhtml?level=1&currentAppId=2" label="B" ]
"dummyB" [style=invis]
}
"dummyCCV" -> "dummyB"[ltail="cluster__Application__CCV" lhead="cluster__Application__B" id="4003" label="EMS - JMS" color="green" style="solid" intType="650" fontsize="8"]
"dummyCCV" -> "dummyabc"[ltail="cluster__Application__CCV" lhead="cluster__Application__abc" id="4004" label="DBLink" color="red" style="solid" intType="6" fontsize="8"]
"dummyCCV" -> "dummyPeopleSoft"[ltail="cluster__Application__CCV" lhead="cluster__Application__PeopleSoft" id="3161" label="DBLink" color="red" style="solid" intType="6" fontsize="8"]
"dummyCCV" -> "dummy111_sdf"[ltail="cluster__Application__CCV" lhead="cluster__Application__111" id="6001" label="DBLink" color="red" style="solid" intType="6" fontsize="8"]
"dummyPaymentService" -> "dummyBilling"[ltail="cluster__Application__PaymentService" lhead="cluster__Application__Billing" id="3303" label="Tibco Adapter" color="gray" style="solid" intType="12" fontsize="8"]
subgraph "cluster__Application__PGW"{
graph [ id="35" shape="box" style="solid" color="gray" fillcolor="red" URL="/TreIntegration/pages/integration.xhtml?level=1&currentAppId=35" label="PGW" ]
"dummyPGW" [style=invis]
}
"dummyPeopleSoft" -> "dummyPGW"[ltail="cluster__Application__PeopleSoft" lhead="cluster__Application__PGW" id="3100" label="Tibco RV" color="blue" style="solid" intType="9" fontsize="8"]
subgraph "cluster__Application__DIBS"{
graph [ id="8050" shape="doublecircle" style="bold" color="red" fillcolor="red" URL="/TreIntegration/pages/integration.xhtml?level=1&currentAppId=8050" label="DIBS" ]
"dummyDIBS" [style=invis]
}
"dummyPGW" -> "dummyDIBS"[ltail="cluster__Application__PGW" lhead="cluster__Application__DIBS" id="6850" label="FileBased" color="orange" style="dotted" intType="8" fontsize="8"]
"dummyPGW" -> "dummyBilling"[ltail="cluster__Application__PGW" lhead="cluster__Application__Billing" id="2801" label="DBLink" color="red" style="solid" intType="6" fontsize="8"]
"dummyPGW" -> "ERP_v"[ltail="cluster__Application__PGW" lhead="cluster__Application__ERP" id="2850" label="Datastage" color="brown" style="dotted" intType="10" fontsize="8"]
"ERP_v" -> "dummyBilling"[ltail="cluster__Application__ERP" lhead="cluster__Application__Billing" id="3806" label="Tibco Adapter" color="gray" style="solid" intType="12" fontsize="8"]
"ERP_v" -> "dummyPeopleSoft"[ltail="cluster__Application__ERP" lhead="cluster__Application__PeopleSoft" id="2702" label="DBLink" color="red" style="solid" intType="6" fontsize="8"]
"ERP_v" -> "dummyPaymentService"[ltail="cluster__Application__ERP" lhead="cluster__Application__PaymentService" id="3556" label="ca" color="green" style="bold" intType="5" fontsize="8"]
"ERP_v" -> "dummyPaymentService"[ltail="cluster__Application__ERP" lhead="cluster__Application__PaymentService" id="3557" label="ca222" color="red" style="solid" intType="6" fontsize="8"]
subgraph "cluster__Application__TriggerFramework"{
graph [ id="72" shape="box" style="solid" color="gray" fillcolor="red" URL="/TreIntegration/pages/integration.xhtml?level=1&currentAppId=72" label="Trigger Framework" ]
"dummyTriggerFramework" [style=invis]
}
"ERP_v" -> "dummyTriggerFramework"[ltail="cluster__Application__ERP" lhead="cluster__Application__TriggerFramework" id="3401" label="DBLink11" color="back" style="bold" intType="20" fontsize="8"]
"dummyPGW" -> "dummyPaymentService"[ltail="cluster__Application__PGW" lhead="cluster__Application__PaymentService" id="3555" label="USING BY ws rest" color="green" style="bold" intType="5" fontsize="8"]
"dummyPeopleSoft" -> "dummyEMA(EricssonMultiActivation)"[ltail="cluster__Application__PeopleSoft" lhead="cluster__Application__EMA(EricssonMultiActivation)" id="3204" label="Tibco Adapter" color="gray" style="solid" intType="12" fontsize="8"]
"dummyEMA(EricssonMultiActivation)" -> "dummyTriggerFramework"[ltail="cluster__Application__EMA(EricssonMultiActivation)" lhead="cluster__Application__TriggerFramework" id="3350" label="Tibco RV" color="blue" style="solid" intType="9" fontsize="8"]
subgraph "cluster__Application__TOM(TechnicalOrderManagement)"{
graph [ id="71" shape="box" style="solid" color="gray" fillcolor="red" URL="/TreIntegration/pages/integration.xhtml?level=1&currentAppId=71" label="TOM (Technical Order Management )" ]
"dummyTOM(TechnicalOrderManagement)" [style=invis]
}
"dummyTriggerFramework" -> "dummyTOM(TechnicalOrderManagement)"[ltail="cluster__Application__TriggerFramework" lhead="cluster__Application__TOM(TechnicalOrderManagement)" id="2700" label="Webservice" color="green" style="bold" intType="5" fontsize="8"]
"dummyTriggerFramework" -> "dummy111_sdf"[ltail="cluster__Application__TriggerFramework" lhead="cluster__Application__111" id="5951" label="EMS - JMS" color="green" style="solid" intType="650" fontsize="8"]
"dummyTriggerFramework" -> "dummy111_sdf"[ltail="cluster__Application__TriggerFramework" lhead="cluster__Application__111" id="5952" label="afsfa" color="red" style="solid" intType="6" fontsize="8"]
"dummyEMA(EricssonMultiActivation)" -> "dummyTriggerFramework"[ltail="cluster__Application__EMA(EricssonMultiActivation)" lhead="cluster__Application__TriggerFramework" id="3351" label="Tibco RV" color="blue" style="solid" intType="9" fontsize="8"]

}

it works great with Graphviz tool but when i run it with Viz.js

Thanks for your help.
Happy new year :)
Regards,
Aamir

When Viz is called subsequently (the same instance) it cannot recover when unclosed quotes error is thrown. Failing case looks as follows:

define(["viz"], function(viz) {

  describe("Viz.js", function() {
    it("should recover after unclosed quotes error", function() {
      expect(function() {
        viz([
          'digraph {',
          ' a -> b [label="erroneous]',
          '}'].join("\n"));
      }).toThrow();
      var svg = viz([
        'digraph {',
        ' a -> b [label="correcteous"]',
        '}'].join("\n"));
      expect(svg).toBeDefined();
    });
  });
});

First call throws an exception with Error: syntax error in line 2 near '' as expected. Subsequent gives Error: syntax error in line 1 near '"' until new Viz instance is created.

Viz is loaded using require.js with shim.

By default, the generated svg will have a white colored polygon as its background and boundary. This rectangle will only be visible when the page is not white. But I'd like to make this background transparent to make the figure looks more comfortable with non-white web page. Is there any way to make it happen?

The default behavior:

But I prefer this:

The page http://mdaines.github.io/viz.js/form.html is not generating graph in IE9.

The same behavior I observe also with my page where Viz.js is integrated I get "abort() at (no stack trace available)" in IE9. Chrome and Firefox are OK. They generate graphs.

data = "digraph G {
16 -> 4;
16 -> 8;
16 -> 20;
16 -> 24;
16 -> 32;
20 -> 32;
}"

var svg = Viz(data, "dot");

When I have the following dot code (with setting charset or leaving it default to utf8):

      digraph full_graph {
         graph [charset="latin1"];
         0 -> 1 [label="éñॐ턞鸽V000_000"];
      }

Then Viz.js rendering does not render the edge and shows an error:

Error: :3: syntax error near line 3

While running graphviz from the command line by:

    dot -Tsvg graph.dot -o test.svg -v

I get the svg I expected.

There's probably not a simple fix for this (or has emscripten some build-in magic??), but though you should know.

When I try to use the sfdp layout in with viz.js (@see http://www.graphviz.org/Documentation.php) I get an error message
Error: Layout type: "sfdp" not recognized. Use one of: circo dot fdp neato nop nop1 nop2 osage patchwork twopi
I did not compile the viz.js I just used the version http://mdaines.github.io/viz.js/viz.js and adapted the form.html to support sfdp.

You may easily reproduce it if you change the graph in http://mdaines.github.io/viz.js/form.html and add the layout attribute with layout="sfdp". It will display the error in the console.

digraph G {
layout="sfdp";
    subgraph cluster_0 {
        style=filled;
        color=lightgrey;
        node [style=filled,color=white];
        a0 -> a1 -> a2 -> a3;
        label = "process #1";
    }

    subgraph cluster_1 {
        node [style=filled];
        b0 -> b1 -> b2 -> b3;
        label = "process #2";
        color=blue
    }
    start -> a0;
    start -> b0;
    a1 -> b3;
    b2 -> a3;
    a3 -> a0;
    a3 -> end;
    b3 -> end;

    start [shape=Mdiamond];
    end [shape=Msquare];
}

Hi,

I tried to put orthogonal lines in my graph and it doesn't seem to work. I also tried it in the cluster graph of example.html and it is also not working.

I added the graph options before the subgraph cluster_0. Curved, Line and Polyline work as intended but ortho is not doing only horizontal and vertical lines as it should. Instead, it has the same output as poylines.

digraph G {
graph [
splines=polyline; // ortho not working, same output as polyline
];
subgraph cluster_0 {
// ... rest of example.html code ... //

When calling Viz() only first time error line matches original input. Next calls return errors on incrementing lines. Some errors are reported only first few calls. Example of this behavior can be viewed on fiddle.

Also reporting on console is little bit inconvenient but it is another issue.

When testing as project that uses viz.js with jasmine-headless-webkit, which uses qtwebkit, the test fails with the error:

ReferenceError: Can't find variable: Float64Array

Everything works fine running the same tests from a browser. please let me know I need to provide more information.

Hi!
I've done some work related to this project I wanted to share :D

github.com/caseywatts/graphviz-repl

Specifically, I wanted the output of viz.js to be an image I could easily copy-paste into another environment (like Slack).

If we take the svg output from graphviz, we can convert it to a PNG by dipping it through the canvas.
var svg_data = Viz(dotData, {'format':"svg", 'engine': type});
var png_data = svgToPngConverter.svg_string_to_png_data(svg_data);
$('img#some-specific-image').attr('src', png_data);

This is a hack lol but so is viz.js ❤️

var svgToPngConverter = {
  svg_string_to_png_data: function (svg_string) {
    var svg_xml = this.svg_string_to_xml(svg_string);
    var img = this.svg_img_from_xml(svg_xml);
    var png_data = this.svg_img_to_png_data_via_canvas(img);
    return png_data;
  },
  svg_string_to_xml: function (svg_string) {
    var parser = new DOMParser();
    var svg_xml = parser.parseFromString(svg_string, "image/svg+xml").
...getElementsByTagName('svg')[0];
    return svg_xml;
  },
  svg_img_from_xml: function (svg_xml) {
    var new_width = svg_xml.width.baseVal.valueInSpecifiedUnits;
    var new_height = svg_xml.height.baseVal.valueInSpecifiedUnits;
    var svg_data = '<svg xmlns="http://www.w3.org/2000/svg" width="' + new_width +
    '" height="' + new_height + '">' + svg_xml.innerHTML + '</svg>';
    var img = new Image();
    img.src = "data:image/svg+xml;utf8," + svg_data;
    return img;
  },
  svg_img_to_png_data_via_canvas: function (svg_img) {
    var mycanvas = document.createElement('canvas');
    mycanvas.width = svg_img.width;
    mycanvas.height = svg_img.height;
    var ctx = mycanvas.getContext("2d");
    ctx.drawImage(svg_img, 0, 0);
    return mycanvas.toDataURL("image/png");
  }
};

I wanna PR this somehow but I'm not sure: where in the code base / if it's appropriate to add to this project / also this is untested.

🎉 :)

Graphviz supports images at nodes, but I can't seem to get it to work in viz.js.

For example:

a3 [shape=none, label="", image="http://localhost:8888/GridImage.png"]

Is there any trick to getting this to work, or is it simply not supported? Thanks.

Would you be amenable to supporting multiple versions of graphviz in the Makefile? I got 2.26 to compile with only minor modifications (newer versions crashed on my graphs...) Would it be appropriate to add a make 2.26, make 2.28 and have it default to the newer one?

I use websocket to draw graphs dynamically using viz.js. However when the Viz function is called too much times it will throw the following error

Uncaught abort("Cannot enlarge memory arrays. Either (1) compile with -s TOTAL_MEMORY=X with X higher than the current value 16777216, (2) compile with ALLOW_MEMORY_GROWTH which adjusts the size at runtime but prevents some optimizations, or (3) set Module.TOTAL_MEMORY before the program runs.") at Error
    at jsStackTrace (http://localhost:8889/static/js/viz.js:5:22063)
    at stackTrace (http://localhost:8889/static/js/viz.js:5:22246)
    at abort (http://localhost:8889/static/js/viz.js:28:10646)
    at enlargeMemory (http://localhost:8889/static/js/viz.js:5:22596)
    at Function.Runtime.dynamicAlloc [as alloc] (http://localhost:8889/static/js/viz.js:5:6520)
    at _sbrk (http://localhost:8889/static/js/viz.js:5:604858)
    at A1 (http://localhost:8889/static/js/viz.js:20:81202)
    at rK (http://localhost:8889/static/js/viz.js:12:187893)
    at qK (http://localhost:8889/static/js/viz.js:12:187625)
    at dg (http://localhost:8889/static/js/viz.js:11:139350)

You can open your Chrome console and run the following code and it will give you the same error message

for(var i=0; i<5000; i++){Viz("digraph { a -> b; }");}

I've tried with on viz.js demo site:

digraph abc{
  node [shape="record"];
  edge [style="dashed"];

  a [style="filled", color="black", fillcolor="chartreuse"];
  b;
  c [shape="none", image="http://www.graphviz.org/gvicons/doc-graphviz.png", label=""];
  d;

  a -> b;
  b -> d;
  c -> d [color="red"];
}

but image wouldn't appear. I know it can be connected with JS security policy but maybe it can be handled by inlining invisible image in document, then get metadata (size) so rendering can be performed.

I try to install viz.js as below
but, I failed.
after I struggled with installation, write a issue.

my environment is ubuntu 14.04

git clone https://github.com/mdaines/viz.js.git
cd viz.js
git submodules init
git submodules update
sudo apt-get install nodejs node clang llvm
make

the below is error message

~/work/viz.js@swrnd-slave05(4212)$ make
cd libexpat-src/lib; /home/kim/work/viz.js/emscripten/emcc -Oz -o lib-em.bc -I. -I.. -DHAVE_BCOPY -DHAVE_CONFIG_H xmlparse.c xmlrole.c xmltok.c
WARNING  root: LLVM version appears incorrect (seeing "3.2-7ubuntu1", expected "3.3")
WARNING  root: cannot check node version: invalid literal for int() with base 10: ''
CRITICAL root: fastcomp in use, but LLVM has not been built with the JavaScript backend as a target, llc reports:
===========================================================================
LLVM (http://llvm.org/):
  LLVM version 3.2

  Optimized build.
  Built Jun  7 2013 (18:44:38).
  Default target: x86_64-pc-linux-gnu
  Host CPU: corei7-avx

  Registered Targets:
    arm      - ARM
    cellspu  - STI CBEA Cell SPU [experimental]
    cpp      - C++ backend
    hexagon  - Hexagon
    mblaze   - MBlaze
    mips     - Mips
    mips64   - Mips64 [experimental]
    mips64el - Mips64el [experimental]
    mipsel   - Mipsel
    msp430   - MSP430 [experimental]
    nvptx    - NVIDIA PTX 32-bit
    nvptx64  - NVIDIA PTX 64-bit
    ppc32    - PowerPC 32
    ppc64    - PowerPC 64
    r600     - AMD GPUs HD2XXX-HD6XXX
    sparc    - Sparc
    sparcv9  - Sparc V9
    thumb    - Thumb
    x86      - 32-bit X86: Pentium-Pro and above
    x86-64   - 64-bit X86: EM64T and AMD64
    xcore    - XCore
===========================================================================
CRITICAL root: you can fall back to the older (pre-fastcomp) compiler core, although that is not recommended, see https://github.com/kripken/emscripten/wiki/LLVM-Backend
INFO     root: (Emscripten: Running sanity checks)
Checking JS engine node failed. Check ~/.emscripten. Details: Expected the command ['node', '/home/kim/work/viz.js/emscripten/src/hello_world.js'] to finish with return code 0, but it returned with code 1 instead! Output:
CRITICAL root: The JavaScript shell used for compiling (node) does not seem to work, check the paths in ~/.emscripten

Please don't laugh at me, how hard would it to support IE9. Right now it gives a "ReferenceError: 'Int32Array' is undefined" looks as though that will be supported in IE10 but we'll have people try and use it with old versions of IE.

It appears that the only layout currently supported is dot, all others (e.g. neato, twopi, etc.) can not be used.

Hi,
I was looking into javascript implementation of graphviz and found these three.
You have the latest update and a reference to the others, so I hope you could tell me what the differences are.
I already found out liviz.js has pretty slick animations, but does not support dot fully (i need dot clusters).
What about graphviz.js?

everything is in the title, i tried it and it doesn't work.
Maybe the functionality is not available?

Hi.
I want to get node attributes: pos, color,.... when using Viz.js render SVG?
Can you please help me?
Thanks in advance for your attention!

digraph g{ 
568910544 [label=<root<sub>pd</sub>>,shape=ellipse,fillcolor="lightblue",style="filled"];
} 

In the graph viz app, this will be rendered correctly, but not with this the viz.js library

I tried compiling this awesome project because I fixed a bug in Emscripten (emscripten-core/emscripten#727)

However, it only works for me when I remove the -O2 param from the makefile.
Otherwise I get this error:

[...]
emcc: applying js optimization passes: ['eliminate', 'simplifyExpressionsPre', 'optimizeShiftsAggressive', 'eliminate']

/home/norman/tmp/emscripten/tools/eliminator/node_modules/uglify-js/lib/parse-js.js:268
        throw new JS_Parse_Error(message, line, col, pos);
              ^
Error: Unexpected token: eof (undefined)
[...]

I'm not sure if this bug is more related to viz.js or Emscripten as I didn't quite understand the js optimization step yet.

Hey guys,

Using the following graph, I cannot get an image to load:

digraph g {
  a [image="image.png"];
}

It could easily be that I don't know how to properly link to the image, but I tried numerous combinations of paths absolute and relative, and no luck. Is this supposed to work?

As I would like to use viz.js in a commercial software, I would like to know the license you intend to attach to viz.js.

Attempting to require viz.js from node fails with the following error:

window["Viz"] = Viz;
^
ReferenceError: window is not defined
    at Object.<anonymous> (/Users/srathbun/git/viz.js/viz.js:206910:1)
    at Module._compile (module.js:449:26)
    at Object.Module._extensions..js (module.js:467:10)
    at Module.load (module.js:356:32)
    at Function.Module._load (module.js:312:12)
    at Module.runMain (module.js:492:10)
    at process.startup.processNextTick.process._tickCallback (node.js:244:9)

This code bit gets added after the fact in the post.js file, if anyone wants to know where it comes from.

Hi, I would like to use graphic icons in my graph. I define a node as a shapefile:
digraph G {
...
Computers_icon [label="", shape=box, style=invis, shapefile="Computers.png"];
...
}

Unfortunately viz.js won't create a new image-tag in g-tag with attribute class="node".

Could you please check this issue. Thank you. Rainer

You've done a great job trimming down and compiling graphviz to a usable javascript library! I was wondering how difficult it would be to build vis.js with libexpat so vis.js would support html-like tables?

I'm developing an online Graphviz dot editor and I'm using old version of viz.js. I made a common module adding define wrapper around distribution code and I embedded it in WebWorker with use of require() as described in its guideline.

Now I'm trying to upgrade to newer version but I have problems to use it in the same way. I'm receiving errors from initializing my module depending on viz.js. As far I understand (from generated code) there is support for WebWorker environment and require.js also. I'm not sure if it is supporting both together. If yes please give me an advice how to do that.

Hello

Could you provide build instructions for obtaining viz.js from graphviz?

Also, viz.js is a massive file, even after minification. Do you know if it's possible to build a light-weight version with only dot?

Thanks for any help!

I need to create an interactive graph in SVG.

I'm trying to add onclicks to the svg nodes but there is no relationship between the 'DOT language element id' and the 'SVG element id'.

Have you ever tried doing something similar ? Is this something we can work around / fix during the creation of the graph in SVG ?

I'm using the compile Viz.js 0.0.3 file. I'm able to see the output when it has 96 nodes but as soon as the nodes goes up from 96 I get the error.

Range Error: Maximum call stack size exceeded.

Anyone has faced this issue ?

I am not sure if it is in the scope of this project, but when presented with the following graph

digraph {
    subgraph cluster0 {
        a;
    }
    subgraph {
        rank=same
        a; b;
    }
}

dot issues Warning: a was already in a rankset, ignored in cluster _anonymous_0 and continues processing the graph. Viz.js on the other hand issues Assertion failed: find_fast_node(g, n), at: fastgr.c,231,delete_fast_node and does not continue laying out the graph. When dot runs is it catching these errors and telling the program to keep going? Is this something possible in Viz.js?