diff --git a/image/dag.svg b/image/dag.svg
new file mode 100644
index 0000000..421e97c
--- /dev/null
+++ b/image/dag.svg
@@ -0,0 +1,153 @@
+<?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.40.1 (20161225.0304)
+ --><!-- Title: G Pages: 1 --><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="516pt" height="276pt" viewBox="0.00 0.00 516.00 276.00">
+<g id="graph0" class="graph" transform="scale(1 1) rotate(0) translate(4 272)">
+<title>G</title>
+<polygon fill="#ffffff" stroke="transparent" points="-4,4 -4,-272 512,-272 512,4 -4,4"/>
+<g id="clust1" class="cluster">
+<title>cluster_sub2</title>
+<polygon fill="none" stroke="#000000" points="158,-8 158,-132 300,-132 300,-8 158,-8"/>
+</g>
+<g id="clust2" class="cluster">
+<title>cluster_sub1</title>
+<polygon fill="none" stroke="#000000" points="8,-80 8,-204 150,-204 150,-80 8,-80"/>
+</g>
+<!-- A3 -->
+<g id="node1" class="node">
+<title>A3</title>
+<ellipse fill="none" stroke="#000000" cx="265" cy="-106" rx="27" ry="18"/>
+<text text-anchor="middle" x="265" y="-101.8" font-family="Times,serif" font-size="14.00" fill="#000000">A3</text>
+</g>
+<!-- B3 -->
+<g id="node2" class="node">
+<title>B3</title>
+<ellipse fill="none" stroke="#000000" cx="229" cy="-34" rx="27" ry="18"/>
+<text text-anchor="middle" x="229" y="-29.8" font-family="Times,serif" font-size="14.00" fill="#000000">B3</text>
+</g>
+<!-- A3&#45;&gt;B3 -->
+<g id="edge1" class="edge">
+<title>A3-&gt;B3</title>
+<path fill="none" stroke="#000000" d="M256.2854,-88.5708C252.0403,-80.0807 246.8464,-69.6929 242.1337,-60.2674"/>
+<polygon fill="#000000" stroke="#000000" points="245.237,-58.6477 237.6343,-51.2687 238.976,-61.7782 245.237,-58.6477"/>
+</g>
+<!-- C3 -->
+<g id="node3" class="node">
+<title>C3</title>
+<ellipse fill="none" stroke="#000000" cx="193" cy="-106" rx="27" ry="18"/>
+<text text-anchor="middle" x="193" y="-101.8" font-family="Times,serif" font-size="14.00" fill="#000000">C3</text>
+</g>
+<!-- C3&#45;&gt;B3 -->
+<g id="edge2" class="edge">
+<title>C3-&gt;B3</title>
+<path fill="none" stroke="#000000" d="M201.7146,-88.5708C205.9597,-80.0807 211.1536,-69.6929 215.8663,-60.2674"/>
+<polygon fill="#000000" stroke="#000000" points="219.024,-61.7782 220.3657,-51.2687 212.763,-58.6477 219.024,-61.7782"/>
+</g>
+<!-- A2 -->
+<g id="node4" class="node">
+<title>A2</title>
+<ellipse fill="none" stroke="#000000" cx="115" cy="-178" rx="27" ry="18"/>
+<text text-anchor="middle" x="115" y="-173.8" font-family="Times,serif" font-size="14.00" fill="#000000">A2</text>
+</g>
+<!-- A2&#45;&gt;A3 -->
+<g id="edge11" class="edge">
+<title>A2-&gt;A3</title>
+<path fill="none" stroke="#000000" d="M139.35,-170.1038C162.9742,-162.0018 199.4805,-148.2997 229,-132 232.4694,-130.0843 235.9971,-127.8895 239.4198,-125.6051"/>
+<polygon fill="#000000" stroke="#000000" points="241.4448,-128.4599 247.6183,-119.8495 237.4228,-122.7307 241.4448,-128.4599"/>
+</g>
+<!-- B2 -->
+<g id="node5" class="node">
+<title>B2</title>
+<ellipse fill="none" stroke="#000000" cx="79" cy="-106" rx="27" ry="18"/>
+<text text-anchor="middle" x="79" y="-101.8" font-family="Times,serif" font-size="14.00" fill="#000000">B2</text>
+</g>
+<!-- A2&#45;&gt;B2 -->
+<g id="edge3" class="edge">
+<title>A2-&gt;B2</title>
+<path fill="none" stroke="#000000" d="M106.2854,-160.5708C102.0403,-152.0807 96.8464,-141.6929 92.1337,-132.2674"/>
+<polygon fill="#000000" stroke="#000000" points="95.237,-130.6477 87.6343,-123.2687 88.976,-133.7782 95.237,-130.6477"/>
+</g>
+<!-- B -->
+<g id="node8" class="node">
+<title>B</title>
+<ellipse fill="none" stroke="#000000" cx="337" cy="-106" rx="27" ry="18"/>
+<text text-anchor="middle" x="337" y="-101.8" font-family="Times,serif" font-size="14.00" fill="#000000">B</text>
+</g>
+<!-- A2&#45;&gt;B -->
+<g id="edge10" class="edge">
+<title>A2-&gt;B</title>
+<path fill="none" stroke="#000000" d="M141.8928,-175.1185C179.6909,-170.2718 249.9523,-158.31 304,-132 307.0167,-130.5315 310.0147,-128.7513 312.9034,-126.8188"/>
+<polygon fill="#000000" stroke="#000000" points="315.1888,-129.4819 321.1509,-120.7237 311.0285,-123.8523 315.1888,-129.4819"/>
+</g>
+<!-- C2 -->
+<g id="node6" class="node">
+<title>C2</title>
+<ellipse fill="none" stroke="#000000" cx="43" cy="-178" rx="27" ry="18"/>
+<text text-anchor="middle" x="43" y="-173.8" font-family="Times,serif" font-size="14.00" fill="#000000">C2</text>
+</g>
+<!-- C2&#45;&gt;B2 -->
+<g id="edge4" class="edge">
+<title>C2-&gt;B2</title>
+<path fill="none" stroke="#000000" d="M51.7146,-160.5708C55.9597,-152.0807 61.1536,-141.6929 65.8663,-132.2674"/>
+<polygon fill="#000000" stroke="#000000" points="69.024,-133.7782 70.3657,-123.2687 62.763,-130.6477 69.024,-133.7782"/>
+</g>
+<!-- A -->
+<g id="node7" class="node">
+<title>A</title>
+<ellipse fill="none" stroke="#000000" cx="282" cy="-178" rx="27" ry="18"/>
+<text text-anchor="middle" x="282" y="-173.8" font-family="Times,serif" font-size="14.00" fill="#000000">A</text>
+</g>
+<!-- A&#45;&gt;B -->
+<g id="edge5" class="edge">
+<title>A-&gt;B</title>
+<path fill="none" stroke="#000000" d="M294.4804,-161.6621C301.5124,-152.4564 310.4347,-140.7764 318.2883,-130.4953"/>
+<polygon fill="#000000" stroke="#000000" points="321.28,-132.3446 324.569,-122.2733 315.7172,-128.0953 321.28,-132.3446"/>
+</g>
+<!-- C -->
+<g id="node9" class="node">
+<title>C</title>
+<ellipse fill="none" stroke="#000000" cx="392" cy="-178" rx="27" ry="18"/>
+<text text-anchor="middle" x="392" y="-173.8" font-family="Times,serif" font-size="14.00" fill="#000000">C</text>
+</g>
+<!-- C&#45;&gt;B -->
+<g id="edge6" class="edge">
+<title>C-&gt;B</title>
+<path fill="none" stroke="#000000" d="M379.5196,-161.6621C372.4876,-152.4564 363.5653,-140.7764 355.7117,-130.4953"/>
+<polygon fill="#000000" stroke="#000000" points="358.2828,-128.0953 349.431,-122.2733 352.72,-132.3446 358.2828,-128.0953"/>
+</g>
+<!-- A1 -->
+<g id="node10" class="node">
+<title>A1</title>
+<ellipse fill="none" stroke="#000000" cx="337" cy="-250" rx="27" ry="18"/>
+<text text-anchor="middle" x="337" y="-245.8" font-family="Times,serif" font-size="14.00" fill="#000000">A1</text>
+</g>
+<!-- A1&#45;&gt;B -->
+<g id="edge7" class="edge">
+<title>A1-&gt;B</title>
+<path fill="none" stroke="#000000" d="M337,-231.7623C337,-207.201 337,-163.2474 337,-134.3541"/>
+<polygon fill="#000000" stroke="#000000" points="340.5001,-134.0896 337,-124.0896 333.5001,-134.0897 340.5001,-134.0896"/>
+</g>
+<!-- A1&#45;&gt;C -->
+<g id="edge8" class="edge">
+<title>A1-&gt;C</title>
+<path fill="none" stroke="#000000" d="M349.4804,-233.6621C356.5124,-224.4564 365.4347,-212.7764 373.2883,-202.4953"/>
+<polygon fill="#000000" stroke="#000000" points="376.28,-204.3446 379.569,-194.2733 370.7172,-200.0953 376.28,-204.3446"/>
+</g>
+<!-- B1 -->
+<g id="node11" class="node">
+<title>B1</title>
+<ellipse fill="none" stroke="#000000" cx="409" cy="-250" rx="27" ry="18"/>
+<text text-anchor="middle" x="409" y="-245.8" font-family="Times,serif" font-size="14.00" fill="#000000">B1</text>
+</g>
+<!-- B1&#45;&gt;C -->
+<g id="edge9" class="edge">
+<title>B1-&gt;C</title>
+<path fill="none" stroke="#000000" d="M404.7978,-232.2022C402.9179,-224.2406 400.6575,-214.6671 398.5629,-205.7957"/>
+<polygon fill="#000000" stroke="#000000" points="401.9172,-204.7706 396.2128,-195.8425 395.1045,-206.3792 401.9172,-204.7706"/>
+</g>
+<!-- C1 -->
+<g id="node12" class="node">
+<title>C1</title>
+<ellipse fill="none" stroke="#000000" cx="481" cy="-250" rx="27" ry="18"/>
+<text text-anchor="middle" x="481" y="-245.8" font-family="Times,serif" font-size="14.00" fill="#000000">C1</text>
+</g>
+</g>
+</svg>
\ No newline at end of file
diff --git a/image/fl.svg b/image/fl.svg
new file mode 100644
index 0000000..21d2eb1
--- /dev/null
+++ b/image/fl.svg
@@ -0,0 +1,493 @@
+<?xml version="1.0" standalone="no"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg version="1.1" width="1200" height="118" onload="init(evt)" viewBox="0 0 1200 118" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+<!-- Flame graph stack visualization. See https://github.com/brendangregg/FlameGraph for latest version, and http://www.brendangregg.com/flamegraphs.html for examples. -->
+<!-- NOTES:  -->
+<defs>
+	<linearGradient id="background" y1="0" y2="1" x1="0" x2="0" >
+		<stop stop-color="#eeeeee" offset="5%" />
+		<stop stop-color="#eeeeb0" offset="95%" />
+	</linearGradient>
+</defs>
+<style type="text/css">
+	text { font-family:Verdana; font-size:12px; fill:rgb(0,0,0); }
+	#search, #ignorecase { opacity:0.1; cursor:pointer; }
+	#search:hover, #search.show, #ignorecase:hover, #ignorecase.show { opacity:1; }
+	#subtitle { text-anchor:middle; font-color:rgb(160,160,160); }
+	#title { text-anchor:middle; font-size:17px}
+	#unzoom { cursor:pointer; }
+	#frames > *:hover { stroke:black; stroke-width:0.5; cursor:pointer; }
+	.hide { display:none; }
+	.parent { opacity:0.5; }
+</style>
+<script type="text/ecmascript">
+<![CDATA[
+	"use strict";
+	var details, searchbtn, unzoombtn, matchedtxt, svg, searching, currentSearchTerm, ignorecase, ignorecaseBtn;
+	function init(evt) {
+		details = document.getElementById("details").firstChild;
+		searchbtn = document.getElementById("search");
+		ignorecaseBtn = document.getElementById("ignorecase");
+		unzoombtn = document.getElementById("unzoom");
+		matchedtxt = document.getElementById("matched");
+		svg = document.getElementsByTagName("svg")[0];
+		searching = 0;
+		currentSearchTerm = null;
+
+		// use GET parameters to restore a flamegraphs state.
+		var params = get_params();
+		if (params.x && params.y)
+			zoom(find_group(document.querySelector('[x="' + params.x + '"][y="' + params.y + '"]')));
+                if (params.s) search(params.s);
+	}
+
+	// event listeners
+	window.addEventListener("click", function(e) {
+		var target = find_group(e.target);
+		if (target) {
+			if (target.nodeName == "a") {
+				if (e.ctrlKey === false) return;
+				e.preventDefault();
+			}
+			if (target.classList.contains("parent")) unzoom(true);
+			zoom(target);
+			if (!document.querySelector('.parent')) {
+				// we have basically done a clearzoom so clear the url
+				var params = get_params();
+				if (params.x) delete params.x;
+				if (params.y) delete params.y;
+				history.replaceState(null, null, parse_params(params));
+				unzoombtn.classList.add("hide");
+				return;
+			}
+
+			// set parameters for zoom state
+			var el = target.querySelector("rect");
+			if (el && el.attributes && el.attributes.y && el.attributes._orig_x) {
+				var params = get_params()
+				params.x = el.attributes._orig_x.value;
+				params.y = el.attributes.y.value;
+				history.replaceState(null, null, parse_params(params));
+			}
+		}
+		else if (e.target.id == "unzoom") clearzoom();
+		else if (e.target.id == "search") search_prompt();
+		else if (e.target.id == "ignorecase") toggle_ignorecase();
+	}, false)
+
+	// mouse-over for info
+	// show
+	window.addEventListener("mouseover", function(e) {
+		var target = find_group(e.target);
+		if (target) details.nodeValue = "Function: " + g_to_text(target);
+	}, false)
+
+	// clear
+	window.addEventListener("mouseout", function(e) {
+		var target = find_group(e.target);
+		if (target) details.nodeValue = ' ';
+	}, false)
+
+	// ctrl-F for search
+	// ctrl-I to toggle case-sensitive search
+	window.addEventListener("keydown",function (e) {
+		if (e.keyCode === 114 || (e.ctrlKey && e.keyCode === 70)) {
+			e.preventDefault();
+			search_prompt();
+		}
+		else if (e.ctrlKey && e.keyCode === 73) {
+			e.preventDefault();
+			toggle_ignorecase();
+		}
+	}, false)
+
+	// functions
+	function get_params() {
+		var params = {};
+		var paramsarr = window.location.search.substr(1).split('&');
+		for (var i = 0; i < paramsarr.length; ++i) {
+			var tmp = paramsarr[i].split("=");
+			if (!tmp[0] || !tmp[1]) continue;
+			params[tmp[0]]  = decodeURIComponent(tmp[1]);
+		}
+		return params;
+	}
+	function parse_params(params) {
+		var uri = "?";
+		for (var key in params) {
+			uri += key + '=' + encodeURIComponent(params[key]) + '&';
+		}
+		if (uri.slice(-1) == "&")
+			uri = uri.substring(0, uri.length - 1);
+		if (uri == '?')
+			uri = window.location.href.split('?')[0];
+		return uri;
+	}
+	function find_child(node, selector) {
+		var children = node.querySelectorAll(selector);
+		if (children.length) return children[0];
+	}
+	function find_group(node) {
+		var parent = node.parentElement;
+		if (!parent) return;
+		if (parent.id == "frames") return node;
+		return find_group(parent);
+	}
+	function orig_save(e, attr, val) {
+		if (e.attributes["_orig_" + attr] != undefined) return;
+		if (e.attributes[attr] == undefined) return;
+		if (val == undefined) val = e.attributes[attr].value;
+		e.setAttribute("_orig_" + attr, val);
+	}
+	function orig_load(e, attr) {
+		if (e.attributes["_orig_"+attr] == undefined) return;
+		e.attributes[attr].value = e.attributes["_orig_" + attr].value;
+		e.removeAttribute("_orig_"+attr);
+	}
+	function g_to_text(e) {
+		var text = find_child(e, "title").firstChild.nodeValue;
+		return (text)
+	}
+	function g_to_func(e) {
+		var func = g_to_text(e);
+		// if there's any manipulation we want to do to the function
+		// name before it's searched, do it here before returning.
+		return (func);
+	}
+	function update_text(e) {
+		var r = find_child(e, "rect");
+		var t = find_child(e, "text");
+		var w = parseFloat(r.attributes.width.value) -3;
+		var txt = find_child(e, "title").textContent.replace(/\([^(]*\)$/,"");
+		t.attributes.x.value = parseFloat(r.attributes.x.value) + 3;
+
+		// Smaller than this size won't fit anything
+		if (w < 2 * 12 * 0.59) {
+			t.textContent = "";
+			return;
+		}
+
+		t.textContent = txt;
+		var sl = t.getSubStringLength(0, txt.length);
+		// check if only whitespace or if we can fit the entire string into width w
+		if (/^ *$/.test(txt) || sl < w)
+			return;
+
+		// this isn't perfect, but gives a good starting point
+		// and avoids calling getSubStringLength too often
+		var start = Math.floor((w/sl) * txt.length);
+		for (var x = start; x > 0; x = x-2) {
+			if (t.getSubStringLength(0, x + 2) <= w) {
+				t.textContent = txt.substring(0, x) + "..";
+				return;
+			}
+		}
+		t.textContent = "";
+	}
+
+	// zoom
+	function zoom_reset(e) {
+		if (e.attributes != undefined) {
+			orig_load(e, "x");
+			orig_load(e, "width");
+		}
+		if (e.childNodes == undefined) return;
+		for (var i = 0, c = e.childNodes; i < c.length; i++) {
+			zoom_reset(c[i]);
+		}
+	}
+	function zoom_child(e, x, ratio) {
+		if (e.attributes != undefined) {
+			if (e.attributes.x != undefined) {
+				orig_save(e, "x");
+				e.attributes.x.value = (parseFloat(e.attributes.x.value) - x - 10) * ratio + 10;
+				if (e.tagName == "text")
+					e.attributes.x.value = find_child(e.parentNode, "rect[x]").attributes.x.value + 3;
+			}
+			if (e.attributes.width != undefined) {
+				orig_save(e, "width");
+				e.attributes.width.value = parseFloat(e.attributes.width.value) * ratio;
+			}
+		}
+
+		if (e.childNodes == undefined) return;
+		for (var i = 0, c = e.childNodes; i < c.length; i++) {
+			zoom_child(c[i], x - 10, ratio);
+		}
+	}
+	function zoom_parent(e) {
+		if (e.attributes) {
+			if (e.attributes.x != undefined) {
+				orig_save(e, "x");
+				e.attributes.x.value = 10;
+			}
+			if (e.attributes.width != undefined) {
+				orig_save(e, "width");
+				e.attributes.width.value = parseInt(svg.width.baseVal.value) - (10 * 2);
+			}
+		}
+		if (e.childNodes == undefined) return;
+		for (var i = 0, c = e.childNodes; i < c.length; i++) {
+			zoom_parent(c[i]);
+		}
+	}
+	function zoom(node) {
+		var attr = find_child(node, "rect").attributes;
+		var width = parseFloat(attr.width.value);
+		var xmin = parseFloat(attr.x.value);
+		var xmax = parseFloat(xmin + width);
+		var ymin = parseFloat(attr.y.value);
+		var ratio = (svg.width.baseVal.value - 2 * 10) / width;
+
+		// XXX: Workaround for JavaScript float issues (fix me)
+		var fudge = 0.0001;
+
+		unzoombtn.classList.remove("hide");
+
+		var el = document.getElementById("frames").children;
+		for (var i = 0; i < el.length; i++) {
+			var e = el[i];
+			var a = find_child(e, "rect").attributes;
+			var ex = parseFloat(a.x.value);
+			var ew = parseFloat(a.width.value);
+			var upstack;
+			// Is it an ancestor
+			if (0 == 0) {
+				upstack = parseFloat(a.y.value) > ymin;
+			} else {
+				upstack = parseFloat(a.y.value) < ymin;
+			}
+			if (upstack) {
+				// Direct ancestor
+				if (ex <= xmin && (ex+ew+fudge) >= xmax) {
+					e.classList.add("parent");
+					zoom_parent(e);
+					update_text(e);
+				}
+				// not in current path
+				else
+					e.classList.add("hide");
+			}
+			// Children maybe
+			else {
+				// no common path
+				if (ex < xmin || ex + fudge >= xmax) {
+					e.classList.add("hide");
+				}
+				else {
+					zoom_child(e, xmin, ratio);
+					update_text(e);
+				}
+			}
+		}
+		search();
+	}
+	function unzoom(dont_update_text) {
+		unzoombtn.classList.add("hide");
+		var el = document.getElementById("frames").children;
+		for(var i = 0; i < el.length; i++) {
+			el[i].classList.remove("parent");
+			el[i].classList.remove("hide");
+			zoom_reset(el[i]);
+			if(!dont_update_text) update_text(el[i]);
+		}
+		search();
+	}
+	function clearzoom() {
+		unzoom();
+
+		// remove zoom state
+		var params = get_params();
+		if (params.x) delete params.x;
+		if (params.y) delete params.y;
+		history.replaceState(null, null, parse_params(params));
+	}
+
+	// search
+	function toggle_ignorecase() {
+		ignorecase = !ignorecase;
+		if (ignorecase) {
+			ignorecaseBtn.classList.add("show");
+		} else {
+			ignorecaseBtn.classList.remove("show");
+		}
+		reset_search();
+		search();
+	}
+	function reset_search() {
+		var el = document.querySelectorAll("#frames rect");
+		for (var i = 0; i < el.length; i++) {
+			orig_load(el[i], "fill")
+		}
+		var params = get_params();
+		delete params.s;
+		history.replaceState(null, null, parse_params(params));
+	}
+	function search_prompt() {
+		if (!searching) {
+			var term = prompt("Enter a search term (regexp " +
+			    "allowed, eg: ^ext4_)"
+			    + (ignorecase ? ", ignoring case" : "")
+			    + "\nPress Ctrl-i to toggle case sensitivity", "");
+			if (term != null) search(term);
+		} else {
+			reset_search();
+			searching = 0;
+			currentSearchTerm = null;
+			searchbtn.classList.remove("show");
+			searchbtn.firstChild.nodeValue = "Search"
+			matchedtxt.classList.add("hide");
+			matchedtxt.firstChild.nodeValue = ""
+		}
+	}
+	function search(term) {
+		if (term) currentSearchTerm = term;
+
+		var re = new RegExp(currentSearchTerm, ignorecase ? 'i' : '');
+		var el = document.getElementById("frames").children;
+		var matches = new Object();
+		var maxwidth = 0;
+		for (var i = 0; i < el.length; i++) {
+			var e = el[i];
+			var func = g_to_func(e);
+			var rect = find_child(e, "rect");
+			if (func == null || rect == null)
+				continue;
+
+			// Save max width. Only works as we have a root frame
+			var w = parseFloat(rect.attributes.width.value);
+			if (w > maxwidth)
+				maxwidth = w;
+
+			if (func.match(re)) {
+				// highlight
+				var x = parseFloat(rect.attributes.x.value);
+				orig_save(rect, "fill");
+				rect.attributes.fill.value = "rgb(230,0,230)";
+
+				// remember matches
+				if (matches[x] == undefined) {
+					matches[x] = w;
+				} else {
+					if (w > matches[x]) {
+						// overwrite with parent
+						matches[x] = w;
+					}
+				}
+				searching = 1;
+			}
+		}
+		if (!searching)
+			return;
+		var params = get_params();
+		params.s = currentSearchTerm;
+		history.replaceState(null, null, parse_params(params));
+
+		searchbtn.classList.add("show");
+		searchbtn.firstChild.nodeValue = "Reset Search";
+
+		// calculate percent matched, excluding vertical overlap
+		var count = 0;
+		var lastx = -1;
+		var lastw = 0;
+		var keys = Array();
+		for (k in matches) {
+			if (matches.hasOwnProperty(k))
+				keys.push(k);
+		}
+		// sort the matched frames by their x location
+		// ascending, then width descending
+		keys.sort(function(a, b){
+			return a - b;
+		});
+		// Step through frames saving only the biggest bottom-up frames
+		// thanks to the sort order. This relies on the tree property
+		// where children are always smaller than their parents.
+		var fudge = 0.0001;	// JavaScript floating point
+		for (var k in keys) {
+			var x = parseFloat(keys[k]);
+			var w = matches[keys[k]];
+			if (x >= lastx + lastw - fudge) {
+				count += w;
+				lastx = x;
+				lastw = w;
+			}
+		}
+		// display matched percent
+		matchedtxt.classList.remove("hide");
+		var pct = 100 * count / maxwidth;
+		if (pct != 100) pct = pct.toFixed(1)
+		matchedtxt.firstChild.nodeValue = "Matched: " + pct + "%";
+	}
+]]>
+</script>
+<rect x="0.0" y="0" width="1200.0" height="118.0" fill="url(#background)"  />
+<text id="title" x="600.00" y="24" >Flame Graph</text>
+<text id="details" x="10.00" y="101" > </text>
+<text id="unzoom" x="10.00" y="24" class="hide">Reset Zoom</text>
+<text id="search" x="1090.00" y="24" >Search</text>
+<text id="ignorecase" x="1174.00" y="24" >ic</text>
+<text id="matched" x="1090.00" y="101" > </text>
+<g id="frames">
+<g >
+<title>all (7,780 samples, 100%)</title><rect x="10.0" y="69" width="1180.0" height="15.0" fill="rgb(213,39,9)" rx="2" ry="2" />
+<text  x="13.00" y="79.5" ></text>
+</g>
+<g >
+<title>static,B2,610ns (610 samples, 7.84%)</title><rect x="644.0" y="37" width="92.5" height="15.0" fill="rgb(230,118,28)" rx="2" ry="2" />
+<text  x="646.98" y="47.5" >static,B2,6..</text>
+</g>
+<g >
+<title>static,C,670ns (670 samples, 8.61%)</title><rect x="736.5" y="37" width="101.6" height="15.0" fill="rgb(208,16,3)" rx="2" ry="2" />
+<text  x="739.50" y="47.5" >static,C,670ns</text>
+</g>
+<g >
+<title>static,B1,580ns (580 samples, 7.46%)</title><rect x="396.8" y="53" width="87.9" height="15.0" fill="rgb(248,200,47)" rx="2" ry="2" />
+<text  x="399.76" y="63.5" >static,B1,..</text>
+</g>
+<g >
+<title>static,C3,530ns (530 samples, 6.81%)</title><rect x="1109.6" y="37" width="80.4" height="15.0" fill="rgb(211,29,7)" rx="2" ry="2" />
+<text  x="1112.61" y="47.5" >static,C3..</text>
+</g>
+<g >
+<title>subflow,sub1,11150ns (2,380 samples, 30.59%)</title><rect x="557.5" y="53" width="361.0" height="15.0" fill="rgb(217,55,13)" rx="2" ry="2" />
+<text  x="560.53" y="63.5" >subflow,sub1,11150ns</text>
+</g>
+<g >
+<title>static,B3,590ns (590 samples, 7.58%)</title><rect x="1020.1" y="37" width="89.5" height="15.0" fill="rgb(229,110,26)" rx="2" ry="2" />
+<text  x="1023.13" y="47.5" >static,B3,..</text>
+</g>
+<g >
+<title>static,A1,610ns (610 samples, 7.84%)</title><rect x="196.6" y="53" width="92.5" height="15.0" fill="rgb(243,178,42)" rx="2" ry="2" />
+<text  x="199.56" y="63.5" >static,A1,6..</text>
+</g>
+<g >
+<title>static,A,1230ns (1,230 samples, 15.81%)</title><rect x="10.0" y="53" width="186.6" height="15.0" fill="rgb(206,7,1)" rx="2" ry="2" />
+<text  x="13.00" y="63.5" >static,A,1230ns</text>
+</g>
+<g >
+<title>static,A3,670ns (670 samples, 8.61%)</title><rect x="918.5" y="37" width="101.6" height="15.0" fill="rgb(242,170,40)" rx="2" ry="2" />
+<text  x="921.51" y="47.5" >static,A3,67..</text>
+</g>
+<g >
+<title>subflow,sub2,5340ns (1,790 samples, 23.01%)</title><rect x="918.5" y="53" width="271.5" height="15.0" fill="rgb(244,183,43)" rx="2" ry="2" />
+<text  x="921.51" y="63.5" >subflow,sub2,5340ns</text>
+</g>
+<g >
+<title>static,C2,530ns (530 samples, 6.81%)</title><rect x="838.1" y="37" width="80.4" height="15.0" fill="rgb(217,59,14)" rx="2" ry="2" />
+<text  x="841.12" y="47.5" >static,C2..</text>
+</g>
+<g >
+<title>static,A2,570ns (570 samples, 7.33%)</title><rect x="557.5" y="37" width="86.5" height="15.0" fill="rgb(254,229,54)" rx="2" ry="2" />
+<text  x="560.53" y="47.5" >static,A2,..</text>
+</g>
+<g >
+<title>static,C1,480ns (480 samples, 6.17%)</title><rect x="484.7" y="53" width="72.8" height="15.0" fill="rgb(248,200,47)" rx="2" ry="2" />
+<text  x="487.73" y="63.5" >static,C..</text>
+</g>
+<g >
+<title>static,B,710ns (710 samples, 9.13%)</title><rect x="289.1" y="53" width="107.7" height="15.0" fill="rgb(247,194,46)" rx="2" ry="2" />
+<text  x="292.07" y="63.5" >static,B,710ns</text>
+</g>
+</g>
+</svg>
\ No newline at end of file
diff --git a/readme.md b/readme.md
index 4401f5f..d0f42d9 100644
--- a/readme.md
+++ b/readme.md
@@ -122,7 +122,7 @@ if err := gotaskflow.Visualizer.Visualize(tf, os.Stdout); err != nil {
 ```
 `Visualize` generate raw string in dot format, just use dot to draw a DAG svg.
 
-![dot](https://raw.githubusercontent.com/noneback/images/ae31f3ea57f3f1b8d4cf94300a5ff502b2340214/graphviz.svg)
+![dot](image/dag.svg)
 ### How to use profile taskflow
 ```go
 if err :=exector.Profile(os.Stdout);err != nil {
@@ -132,7 +132,7 @@ if err :=exector.Profile(os.Stdout);err != nil {
 
 `Profile` alse generate raw string in flamegraph format, just use flamegraph to draw a flamegraph svg.
 
-![flg](https://raw.githubusercontent.com/noneback/images/ae31f3ea57f3f1b8d4cf94300a5ff502b2340214/t.svg)
+![flg](image/fl.svg)
 ## What's next
 - [ ] Taskflow Composition
 - [ ] Conditional Tasking