flowchart.js

<!DOCTYPE html> <html lang="en"> <head> <meta charset='utf-8'> <meta http-equiv="X-UA-Compatible" content="chrome=1"> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"> <style type="text/css"> /* latin */ @font-face { font-family: 'Architects Daughter'; font-style: normal; font-weight: 400; src: url(KtkxAKiDZI_td1Lkx62xHZHDtgO_Y-bvTYlg4-7jA-U.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } </style>  <link rel="stylesheet" type="text/css" href="css/style.css" media="screen" /> <title>flowchart.js</title> <script src="https://cdnjs.cloudflare.com/ajax/libs/i18next/19.4.1/i18next.min.js"></script> <script src="https://cdn.jsdelivr.net/gh/locize/i18next-locize-backend/i18nextLocizeBackend.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-i18next/1.2.1/jquery-i18next.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/i18next-browser-languagedetector/4.0.2/i18nextBrowserLanguageDetector.min.js"></script> </head> <body> <header> <h1 data-i18n="title" data-i18n-options='{"defaultValue": "flowchart.js"}'></h1> <p data-i18n="description" data-i18n-options='{"defaultValue": "Draws simple SVG flow chart diagrams from textual representation of the diagram"}'></p> <ul> <li><a href="https://raw.githubusercontent.com/adrai/flowchart.js/master/release/flowchart.js"><span data-i18n="file" data-i18n-options='{"defaultValue": "File "}'></span><strong data-i18n="download" data-i18n-options='{"defaultValue": "Download"}'></strong></a></li> <li><a href="https://raw.githubusercontent.com/adrai/flowchart.js/master/release/flowchart.min.js"><span data-i18n="file" data-i18n-options='{"defaultValue": "File "}'></span><strong data-i18n="download-min" data-i18n-options='{"defaultValue": "minified version"}'></strong></a></li> <li><a href="https://github.com/adrai/flowchart.js"><span data-i18n="view" data-i18n-options='{"defaultValue": "View On "}'></span><strong data-i18n="github" data-i18n-options='{"defaultValue": "GitHub"}'></strong></a></li> </ul> </header> <div id="main"> <section id="demo1"> <table align="center" class="inner"> <tr> <td style="vertical-align: top;"> <h3 data-i18n="demo1" data-i18n-options='{"defaultValue": "Demo 1. Try editing me below"}'></h3> <div class="editor-wrapper"> <div class="editor editor1">st=>start: Start:>http://www.google.com[blank] e=>end:>http://www.google.com op1=>operation: My Operation sub1=>subroutine: My Subroutine cond=>condition: Yes or No?:>http://www.google.com io=>inputoutput: catch something... para=>parallel: parallel tasks in=>input: some in out=>output: some out st->op1->cond cond(yes)->io->e cond(no)->para para(path1, bottom)->sub1(right)->op1 para(path2, top)->op1 para(path3, right)->in->out->e</div> </div>  </td> <td class="diagram diagram1">This should be a diagram! If you do not see it you need Javascript enabled</td> </tr> </table> </section> <br /> <hr /> <br /> <b data-i18n="conditions" data-i18n-options='{"defaultValue": "Conditions can also be redirected like cond(yes, bottom) or cond(yes, right)"}'></b> <br /> <b data-i18n="conditions_2" data-i18n-options='{"defaultValue": "... and the other symbols too... like sub1(right)"}'></b> <div class="inner"> <section id="usage"> <h3 data-i18n="usage" data-i18n-options='{"defaultValue": "Usage"}'></h3> <p><span data-i18n="depend" data-i18n-options='{"defaultValue": "flowchart.js depends on "}'></span><a href="http://www.raphaeljs.com/">Rapha毛l</a><br/><b data-i18n="to_use" data-i18n-options='{"defaultValue": "To use include the following:"}'></b> </p> <pre><script src="<a href="http://cdnjs.cloudflare.com/ajax/libs/raphael/2.3.0/raphael.min.js">raphael-min.js</a>">< <script src="<a href="flowchart-latest.js">flowchart-latest.js</a>"></script> </pre> <p data-i18n="parse" data-i18n-options='{"defaultValue": "You can parse the text:"}'></p> <pre> <div id="diagram"></div> <script> var diagram = flowchart.parse("the code definition"); diagram.drawSVG('diagram'); // you can also try to pass options: diagram.drawSVG('diagram', { 'x': 0, 'y': 0, 'line-width': 3, 'line-length': 50, 'text-margin': 10, 'font-size': 14, 'font-color': 'black', 'line-color': 'black', 'element-color': 'black', 'fill': 'white', 'yes-text': 'yes', 'no-text': 'no', 'arrow-end': 'block', 'scale': 1, // style symbol types 'symbols': { 'start': { 'font-color': 'red', 'element-color': 'green', 'fill': 'yellow' }, 'end':{ 'class': 'end-element' } }, // even flowstate support ;-) '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' } } }); </script> </pre> <section id="demo2"> <table align="center" class="inner"> <tr> <td style="vertical-align: top;"> <h3 data-i18n="demo2" data-i18n-options='{"defaultValue": "Demo 2 with color coding (flowstate). Try editing me below"}'></h3> <div class="editor-wrapper"> <div class="editor editor2">st=>start: Start|past:>http://www.google.com[blank] e=>end: End|future:>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...|future st->op1(right)->cond cond(yes, right)->c2 cond(no)->sub1(left)->op1 c2(yes)->io->e c2(no)->op2->e</div> </div>  </td> <td class="diagram diagram2">This should be a diagram! If you do not see it you need Javascript enabled</td> </tr> </table> </section> <br /> <hr /> <br /> <section id="demo3"> <table align="center" class="inner"> <tr> <td style="vertical-align: top;"> <h3 data-i18n="[html]demo3" data-i18n-options='{"defaultValue": "Demo 3 tribute to {{- link}}", "link": "<a href=\"https://locize.com\">locize</a>"}'></h3> <div class="editor-wrapper"> <div class="editor editor3" style="height: 480px;">st=>start: Improve your l10n process! e=>end: Continue to have fun!:>https://youtu.be/YQryHo1iHb8[blank] op1=>operation: Go to locize.com:>https://locize.com[blank] sub1=>subroutine: Read the awesomeness cond(align-next=no)=>condition: Interested to getting started? io=>inputoutput: Register:>https://www.locize.app/register[blank] sub2=>subroutine: Read about improving your localization workflow or another source:>https://medium.com/@adrai/8-signs-you-should-improve-your-localization-process-3dc075d53998[blank] op2=>operation: Login:>https://www.locize.app/login[blank] cond2=>condition: valid password? cond3=>condition: reset password? op3=>operation: send email sub3=>subroutine: Create a demo project sub4=>subroutine: Start your real project io2=>inputoutput: Subscribe st->op1->sub1->cond cond(yes)->io->op2->cond2 cond2(no)->cond3 cond3(no,bottom)->op2 cond3(yes)->op3 op3(right)->op2 cond2(yes)->sub3 sub3->sub4->io2->e cond(no)->sub2(right)->op1 st@>op1({"stroke":"Red"})@>sub1({"stroke":"Red"})@>cond({"stroke":"Red"})@>io({"stroke":"Red"})@>op2({"stroke":"Red"})@>cond2({"stroke":"Red"})@>sub3({"stroke":"Red"})@>sub4({"stroke":"Red"})@>io2({"stroke":"Red"})@>e({"stroke":"Red","stroke-width":6,"arrow-end":"classic-wide-long"})</div> </div>  </td> <td class="diagram diagram3">This should be a diagram! If you do not see it you need Javascript enabled</td> </tr> </table> </section> <br /> <b data-i18n="emphasize" data-i18n-options='{"defaultValue": "If you want to emphasize a specific path in your flowchart, you can additionally define it like shown above."}'></b> <br /> <b data-i18n="conditions_3" data-i18n-options='{"defaultValue": "Use cond(align-next=no) to disable vertical align of symbols below as shown above."}'></b> <br /> <hr /> <br /> <section id="demo4"> <table align="center" class="inner"> <tr> <td style="vertical-align: top;"> <h3 data-i18n="[html]demo4" data-i18n-options='{"defaultValue": "Demo 4 tribute to {{- link}}", "link": "<a href=\"https://localistars.com\">localistars</a>"}'></h3> <div class="editor-wrapper"> <div class="editor editor4">st=>start: Need something to be translated!:>https://www.localistars.com[blank] e=>end: Be happy!:>https://youtu.be/e6Ede8hdU8c cond=>condition: Are you a client or a translator? subc=>subroutine: Why should you choose a localistar?:>https://www.localistars.com/for-clients.html subt=>subroutine: Why should you become a localistar?:>https://www.localistars.com/for-translators.html op=>operation: Check out how it works!:>https://www.localistars.com/how-it-works.html io=>inputoutput: Work together with your partner!:>https://www.localistars.app/login st->cond cond(no@client)->subc->op->io->e cond(yes@translator)->subt->op->io->e</div> </div>  </td> <td class="diagram diagram4">This should be a diagram! If you do not see it you need Javascript enabled</td> </tr> </table> </section> <br /> <b data-i18n="annotations" data-i18n-options='{"defaultValue": "If you want to have custom branch names, you can additionally define it like shown above."}'></b> <footer> </br> <hr /> <div class="inner"> by <a href="https://github.com/adrai">Adriano Raiano</a> - <a href="https://twitter.com/adrirai">@adrirai</a> </br> </br> <i data-i18n="internationalized" data-i18n-options='{"defaultValue": "internationalized with "}'></i><a href="http://i18next.com"><img src="data:image/png;base64,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" style="max-width: 80px; position: relative; top: 10px;" alt="http://i18next.com"></a> | <i data-i18n="localized" data-i18n-options='{"defaultValue": "localized by "}'></i><a href="https://locize.com"><img src="https://locize.com/img/locize_color.svg" style="max-width: 80px; position: relative; top: 7px;" alt="http://locize.com"></a> | <a href="?lng=en">en</a> <a href="?lng=de">de</a> <a href="https://www.locize.com"><img src="https://img.shields.io/badge/dynamic/json.svg?style=plastic&color=2096F3&label=locize&query=%24.versions%5B%27latest%27%5D.translatedPercentage&url=https://api.locize.app/badgedata/8166472e-7ac6-44e5-a53f-96a6ca165e2b&suffix=%+translated&link=https://www.locize.com" style="position: absolute; right: 0px; bottom: 0px;" alt="http://locize.com"/></a> </div> </footer> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>  <script src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.2.5/ace.js" type="text/javascript" charset="utf-8"></script> <script src="underscore-min.js"></script> <script src="raphael-min.js"></script> <script src="flowchart-latest.js"></script> <script src="svginnerhtml.min.js"></script> <script type="text/javascript"> function setup_editor(div, nr) { var editor_div = div.find(".editor" + nr); var diagram_div = div.find(".diagram" + nr); var theme_div = div.find(".theme" + nr); // Setup the editor diagram var editor = ace.edit(editor_div.get(0)); editor.setTheme("ace/theme/crimson_editor"); editor.getSession().setMode("ace/mode/asciidoc"); editor.getSession().on('change', _.debounce(on_change, 100)); theme_div.change(on_change); on_change(); function on_change() { try { var diagram = flowchart.parse(editor.getValue()); editor.getSession().setAnnotations([]); // Clear out old diagram diagram_div.html(''); // Draw if (nr === 1 || nr === 3 || nr === 4) { diagram.drawSVG(diagram_div.get(0)); } else if (nr === 2) { diagram.drawSVG(diagram_div.get(0), { 'flowstate' : { 'past' : { 'fill' : '#CCCCCC', 'font-size' : 12}, 'current' : {'fill' : 'yellow', 'font-color' : 'red', 'font-weight' : 'bold'}, 'future' : { 'fill' : '#FFFF99'}, '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' } } }); } } catch(err) { var annotation = { type: "error", // also warning and information column: 0, row: 0, text: err.message }; if (err && err.loc) { annotation.row = err.loc.first_line - 1; annotation.column = err.loc.first_column; } editor.getSession().setAnnotations([annotation]); throw err; } } } $(document).ready(function() { // Example diagrams // Setup all the editors setup_editor($('#demo1'), 1); setup_editor($('#demo2'), 2); setup_editor($('#demo3'), 3); setup_editor($('#demo4'), 4); }); $(document).ready(function() { var i18nextOptions = { fallbackLng: 'en', whitelist: ['en', 'de'], backend: { referenceLng: 'en', projectId: '8166472e-7ac6-44e5-a53f-96a6ca165e2b' } }; window.i18next .use(window.i18nextLocizeBackend) .use(window.i18nextBrowserLanguageDetector) .init(i18nextOptions, function (err) { window.jqueryI18next.init(window.i18next, $, { tName: 't', // --> appends $.t = i18next.t i18nName: 'i18n', // --> appends $.i18n = i18next handleName: 'localize', // --> appends $(selector).localize(opts); selectorAttr: 'data-i18n', // selector for translating elements targetAttr: 'i18n-target', // data-() attribute to grab target element to translate (if diffrent then itself) optionsAttr: 'i18n-options', // data-() attribute that contains options, will load/set if useOptionsAttr = true useOptionsAttr: true, // see optionsAttr parseDefaultValueFromContent: true // parses default values from content ele.val or ele.text }); $('body').localize(); }); }); </script> </body> </html>

CINXE.COM

flowchart.js