ساخت فلوچارت با استفاده از کتابخانه ی 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


بهزاد مرادی

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






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