ساخت فلوچارت با استفاده از کتابخانه ی flowchart.js

Flowchart.js نام کتابخانه ای نوشته شده در زبان جاوا اسکریپت است که با استفاده از آن می توان فلوچارت هایی با فرمت SVG ترسیم کرد. استفاده از این کتابخانه بسیار راحت است اما در عین حال، فلوچارت های نسبتا پیچیده ای با استفاده از آن می توان ترسیم کرد.

برای آن که دمویی از این کتابخانه مشاهده کنید،‌ صرفا لازم است تا کدهای زیر را در یک فایل با پسوند html. قرار داده و آن را در یک مرورگر باز کنید:

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>flowchart.js · Playground</title>
        <style type="text/css">
          .end-element { background-color : #FFCCFF; }
        </style>
        <script src="http://cdnjs.cloudflare.com/ajax/libs/raphael/2.1.0/raphael-min.js"></script>
        <script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
        <script src="http://flowchart.js.org/flowchart-latest.js"></script>
        <!--<script src="../bin/flowchart-latest.js"></script>-->
        <!--<script src="../release/flowchart-1.4.1.min.js"></script>-->
        <script>
            window.onload = function () {
                var btn = document.getElementById("run"),
                    cd = document.getElementById("code"),
                    chart;
                (btn.onclick = function () {
                    var code = cd.value;
                    if (chart) {
                      chart.clean();
                    }
                    chart = flowchart.parse(code);
                    chart.drawSVG('canvas', {
                      // 'x': 30,
                      // 'y': 50,
                      'line-width': 3,
                      'line-length': 50,
                      'text-margin': 10,
                      'font-size': 14,
                      'font': 'normal',
                      'font-family': 'Helvetica',
                      'font-weight': 'normal',
                      'font-color': 'black',
                      'line-color': 'black',
                      'element-color': 'black',
                      'fill': 'white',
                      'yes-text': 'yes',
                      'no-text': 'no',
                      'arrow-end': 'block',
                      'scale': 1,
                      'symbols': {
                        'start': {
                          'font-color': 'red',
                          'element-color': 'green',
                          'fill': 'yellow'
                        },
                        'end':{
                          'class': 'end-element'
                        }
                      },
                      'flowstate' : {
                        'past' : { 'fill' : '#CCCCCC', 'font-size' : 12},
                        'current' : {'fill' : 'yellow', 'font-color' : 'red', 'font-weight' : 'bold'},
                        'future' : { 'fill' : '#FFFF99'},
                        'request' : { 'fill' : 'blue'},
                        'invalid': {'fill' : '#444444'},
                        'approved' : { 'fill' : '#58C4A3', 'font-size' : 12, 'yes-text' : 'APPROVED', 'no-text' : 'n/a' },
                        'rejected' : { 'fill' : '#C45879', 'font-size' : 12, 'yes-text' : 'n/a', 'no-text' : 'REJECTED' }
                      }
                    });
                    $('[id^=sub1]').click(function(){
                      alert('info here');
                    });
                })();
            };
        </script>
    </head>
    <body>
        <div><textarea id="code" style="width: 100%;" rows="11">
st=>start: Start|past:>http://www.google.com[blank]
e=>end: Ende:>http://www.google.com
op1=>operation: My Operation|past
op2=>operation: Stuff|current
sub1=>subroutine: My Subroutine|invalid
cond=>condition: Yes
or No?|approved:>http://www.google.com
c2=>condition: Good idea|rejected
io=>inputoutput: catch something...|request

st->op1(right)->cond
cond(yes, right)->c2
cond(no)->sub1(left)->op1
c2(yes)->io->e
c2(no)->op2->e
        </textarea></div>
        <div><button id="run" type="button">Run</button></div>
        <div id="canvas"></div>
    </body>
</html>

از طریق لینک زیر، می توانید به صفحه ی اختصاصی کتابخانه ی Flowchart.js در گیت هاب مراجعه نمایید و سورس کد آن را به صورت رایگان دانلود نمایید.

flowchart.js

0


بهزاد مرادی

از جمله علائق بهزاد مرادی می توان به نشر علم،‌ سرمایه گذاری روی نسل آینده، زبان برنامه نویسی پی اچ پی و جامعه متن باز و همچنین راه اندازی استارتاپ و کارآفرینی اشاره کرد و او بر این باور است که سکان آکادمی بستری است که از آن طریق می تواند به علائق اش جامه ی عمل بپوشاند. از جمله فعالیت های وی در سکان آکامی می توان به تالیف دوره های آنلاین برنامه نویسی و ترجمه مقالات وبلاگ اشاره کرد. 






از طریق این فرم، می توانید بدون ثبت نام نظر دهید و یا اگر قبلا ثبت نام کرده اید، با ورود ناحیه ی کاربری می توانید علاوه بر ثبت نظر، به مدیریت نظرات خود نیز بپردازید.
(فیلد اجباری)
(فیلد اجباری)
(فیلد اجباری)
(فیلد اجباری)