前言：
今个群里有个哥们问我怎么实现一个集群的架构图，一说架构图，大家肯定想到的是用visio或者是亿图，但是动态的咋办？甚至说高端了点，不仅可以看到架构图，而且可以看到流量及负载的信息。 现在运维平台这么火热，大家恨不得把平台做全面点。 我以前做过一个机房展现图，有兴趣的朋友可以再以前的博客中找到。
运维平台化之IDC机柜拓扑及数据展现实现思路
原文地址, blog.xiaorui.cc
用的是 jquery.jOrgChart.css js库，实现提来还算简单。大家只需要做个模板，然后各种if判断就行了。你懂的。 个人觉得大家要在cmdb资产系统里面要做好位置的标记，不然后期做架构图展现的时候，会发现 没法动态。。。。。
因为我用的代码高亮的模板对于html的<> 总是转椅，正在想办法中 ！
<scriptsrc=”/imgr?src=http%3A%2F%2Fblog.xiaorui.cc%2F2014%2F11%2F09%2F%25e8%25bf%2590%25e7%25bb%25b4%25e6%259e%25b6%25e6%259e%2584%25e5%259b%25be%25e4%25bd%25bf%25e7%2594%25a8js%25e7%25ae%2580%25e6%2598%2593%25e5%25ae%259e%25e7%258e%25b0%25e9%259b%2586%25e7%25be%25a4%25e6%25a1%2586%25e6%259e%25b6%25e5%259b%25be%2F%26%238221%3Bhttp%3A%2F%2Flibs.baidu.com%2Fjquery%2F1.9.0%2Fjquery.js%26%238221%3B%26gt%3B%26lt%3B%2Fscript%26gt%3B%0A%3C%2Fdiv”>
<scriptsrc=”/imgr?src=http%3A%2F%2Fblog.xiaorui.cc%2F2014%2F11%2F09%2F%25e8%25bf%2590%25e7%25bb%25b4%25e6%259e%25b6%25e6%259e%2584%25e5%259b%25be%25e4%25bd%25bf%25e7%2594%25a8js%25e7%25ae%2580%25e6%2598%2593%25e5%25ae%259e%25e7%258e%25b0%25e9%259b%2586%25e7%25be%25a4%25e6%25a1%2586%25e6%259e%25b6%25e5%259b%25be%2F%26%238221%3Bhttp%3A%2F%2Flibs.baidu.com%2Fjqueryui%2F1.8.22%2Fjquery-ui.min.js%26nbsp%3B%26%238221%3B%26gt%3B%26lt%3B%2Fscript%26gt%3B%0A%3C%2Fdiv”>
<scriptsrc=”/imgr?src=http%3A%2F%2Fblog.xiaorui.cc%2F2014%2F11%2F09%2F%25e8%25bf%2590%25e7%25bb%25b4%25e6%259e%25b6%25e6%259e%2584%25e5%259b%25be%25e4%25bd%25bf%25e7%2594%25a8js%25e7%25ae%2580%25e6%2598%2593%25e5%25ae%259e%25e7%258e%25b0%25e9%259b%2586%25e7%25be%25a4%25e6%25a1%2586%25e6%259e%25b6%25e5%259b%25be%2F%26%238221%3Bjquery.jOrgChart.js%26%238221%3B%26gt%3B%26lt%3B%2Fscript%26gt%3B%0A%3C%2Fdiv”>
<script>
jQuery(document).ready(function(){
$(“#org”).jOrgChart({
chartElement:’#chart’,
dragAndDrop:true
});
});
</script>
</head>
<bodyonload=”prettyPrint();”>
<divclass=”topbar”>
<divclass=”topbar-inner”>
<divclass=”container”>
<aclass=”brand”href=”http://blog.xiaorui.cc/2014/11/09/%e8%bf%90%e7%bb%b4%e6%9e%b6%e6%9e%84%e5%9b%be%e4%bd%bf%e7%94%a8js%e7%ae%80%e6%98%93%e5%ae%9e%e7%8e%b0%e9%9b%86%e7%be%a4%e6%a1%86%e6%9e%b6%e5%9b%be/”#”>jQueryOrganisationChart</a>
<ulclass=”nav”>
<li><ahref=”http://blog.xiaorui.cc/2014/11/09/%e8%bf%90%e7%bb%b4%e6%9e%b6%e6%9e%84%e5%9b%be%e4%bd%bf%e7%94%a8js%e7%ae%80%e6%98%93%e5%ae%9e%e7%8e%b0%e9%9b%86%e7%be%a4%e6%a1%86%e6%9e%b6%e5%9b%be/”http://github.com/wesnolte”>Github</a></li>
<li><ahref=”http://blog.xiaorui.cc/2014/11/09/%e8%bf%90%e7%bb%b4%e6%9e%b6%e6%9e%84%e5%9b%be%e4%bd%bf%e7%94%a8js%e7%ae%80%e6%98%93%e5%ae%9e%e7%8e%b0%e9%9b%86%e7%be%a4%e6%a1%86%e6%9e%b6%e5%9b%be/”http://twitter.com/wesnolte”>Twitter</a></li>
<li><ahref=”http://blog.xiaorui.cc/2014/11/09/%e8%bf%90%e7%bb%b4%e6%9e%b6%e6%9e%84%e5%9b%be%e4%bd%bf%e7%94%a8js%e7%ae%80%e6%98%93%e5%ae%9e%e7%8e%b0%e9%9b%86%e7%be%a4%e6%a1%86%e6%9e%b6%e5%9b%be/”http://th3silverlining.com”>Blog</a></li>
</ul>
<divclass=”pull-right”>
<divclass=”alert-messageinfo”id=”show-list”>Showunderlyinglist.</div>
<preclass=”prettyprintlang-html”id=”list-html”style=”display:none”></pre>
</div>
</div>
</div>
</div>
<ulid=”org”style=”display:none”>
<li><br><fontsize=”4″>Balance</font>
<ul>
<liid=”beer”><br>redis192.168.1.10</li>
<li><br>nginx2192.168.1.13
<ul>
<li>mongodb192.168.1.16</li>
<li>mongodb192.168.1.19</li>
</ul>
</li>
<liclass=”fruit”>nginx3192.168.1.24
<ul>
<li>php192.168.1.28
<ul>
<li>mysql192.168.1.33</li>
<li>mysql192.168.1.37</li>
</ul>
</li>
</ul>
</li>
<li>spider192.168.1.41</li>
<liclass=”collapsed”>nginx5192.168.1.44
<ul>
<li>Topdeck</li>
<li>Reese’sCups</li>
</ul>
</li>
</ul>
</li>
</ul>
<divid=”chart”class=”orgChart”></div>
<script>
jQuery(document).ready(function(){
/*CustomjQueryfortheexample*/
$(“#show-list”).click(function(e){
e.preventDefault();
$(‘#list-html’).toggle(‘fast’,function(){
if($(this).is(‘:visible’)){
$(‘#show-list’).text(‘Hideunderlyinglist.’);
$(“.topbar”).fadeTo(‘fast’,0.9);
}else{
$(‘#show-list’).text(‘Showunderlyinglist.’);
$(“.topbar”).fadeTo(‘fast’,1);
}
});
});
$(‘#list-html’).text($(‘#org’).html());
$(“#org”).bind(“DOMSubtreeModified”,function(){
$(‘#list-html’).text(”);
$(‘#list-html’).text($(‘#org’).html());
prettyPrint();
});
});
</script>
这里实现的方法有些简单，大家自己举一反三的做成模板，也可以换成自己服务器的图标。
好了，不多说了 ！
人生就是一次充满未知的旅行，在乎的是沿途的风景，