flowgorithm.js

/**
 * This file is part of FlowgorithmJS.
 * Copyright (C) 2018-2026 Andrea Vallorani <andrea.vallorani@gmail.com>

 * FlowgorithmJS is free software: you can redistribute it and/or modify
 * it under the terms of the GNU General Public License as published by
 * the Free Software Foundation, either version 3 of the License, or
 * any later version.

 * This program is distributed in the hope that it will be useful,
 * but WITHOUT ANY WARRANTY; without even the implied warranty of
 * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
 * GNU General Public License for more details.

 * You should have received a copy of the GNU General Public License
 * along with this program.  If not, see <http://www.gnu.org/licenses/>.
 *
 * FlowgorithmJS
 * @version 1.0a2
 * @date 2026-11-07
 * @author Andrea Vallorani <andrea.vallorani@gmail.com>
 */
export const version = '1.0a2'; //FlowgorithmJS version

/**
 * Draw a flowchart from a URL
 * @param {string} url URL source file
 * @param {string} selector Tag selector containing the flowchart
 * @param {array} options Flowchart draw options
 * @returns {Flowchart}
 */
export async function drawFromUrl(url,selector,options){
    try{
        const result = await $.ajax({
            type: "GET",
            url: url,
            dataType: "xml",
            cache: false
        });
        let f = new Flowchart(options);
        return f.setXml(result).draw(selector);
    }
    catch(error){
        console.error("Loading error:", error);
        throw error;
    }
};
/**
 * Draw a flowchart from a XML Flowgorithm source code
 * @param {string} source XML code
 * @param {string} selector Tag selector containing the flowchart
 * @param {array} options Flowchart draw options
 * @returns {Flowchart}
 */
export function drawFromSource(source,selector,options){
    let f = new Flowchart(options);
    return f.setXml($.parseXML(source)).draw(selector);
};
/**
 * Download Flowchart as SVG file
 * @param {string} selector Tag selector containing the flowchart
 * @param {string} strFileName File name
 * @returns {Boolean} True = success, False = failure
 */
export function downloadSVG(selector,strFileName){
    var strData = $(selector+' svg').clone().find('#ttest').remove().end();
    strData = strData[0].outerHTML;
    var strMimeType = 'text/plain';
    var D = document,
        A = arguments,
        a = D.createElement("a"),
        n = A[1];
    //build download link:
    a.href = "data:" + strMimeType + "charset=utf-8," + escape(strData);
    if (window.MSBlobBuilder) { // IE10
        var bb = new MSBlobBuilder();
        bb.append(strData);
        return navigator.msSaveBlob(bb, strFileName);
    } /* end if(window.MSBlobBuilder) */
    if ('download' in a) { //FF20, CH19
        a.setAttribute("download", n);
        a.innerHTML = "downloading...";
        D.body.appendChild(a);
        setTimeout(function() {
            var e = D.createEvent("MouseEvents");
            e.initMouseEvent("click", true, false, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null);
            a.dispatchEvent(e);
            D.body.removeChild(a);
        }, 66);
        return true;
    }; /* end if('download' in a) */
    //do iframe dataURL download: (older W3)
    var f = D.createElement("iframe");
    D.body.appendChild(f);
    f.src = "data:" + (A[2] ? A[2] : "application/octet-stream") + (window.btoa ? ";base64" : "") + "," + (window.btoa ? window.btoa : escape)(strData);
    setTimeout(function() {
        D.body.removeChild(f);
    }, 333);
    return false;
}

export class Flowchart{
    options = { aH: 12, //arrow length
                aT: 7, //arrow tip size
                groupInput: false,
                itMode: 2, //pre-Iteraction style
                labelTrue: "True",
                labelFalse: "False" };
    #xml = ''; //Flowgorithm XML source
    constructor(options){
        this.options = $.extend(true,this.options,options);
    }
    /**
     * Set Flowgorithm XML
     * @param {string} xml source
     * @returns {Flowchart} same object
     */
    setXml(xml){
        if($(xml).find(":root")[0].nodeName!=='flowgorithm'){
            console.error('XML not loaded or malformed');
            console.error(xml);
            throw 'XML not loaded or malformed'; 
        }
        this.#xml = xml;
        return this;
    }
    /**
     * Get XML code
     * @returns {string}
     */
    get xml(){
        return this.#xml;
    }
    /**
     * Get attribute 'name'
     * @returns {string}
     */
    get name(){
        return $(this.#xml).find('attributes > attribute[name=name]').attr('value');
    }
    /**
     * Get attribute 'about'
     * @returns {string}
     */
    get about(){
        return $(this.#xml).find('attributes > attribute[name=about]').attr('value');
    }
    /**
     * Get attribute 'authors'
     * @returns {string}
     */
    get authors(){
        return $(this.#xml).find('attributes > attribute[name=authors]').eq(0).attr('value');
    }
    /**
     * Get attribute 'saved'
     * @returns {string}
     */
    get saved(){
        return $(this.#xml).find('attributes > attribute[name=saved]').attr('value');
    }
    /**
     * Get attribute 'created'
     * @returns {string}
     */
    get created(){
        return atob($(this.#xml).find('attributes > attribute[name=created]').attr('value'));
    }
    /**
     * Get attributes 'edited'
     * @returns {array}
     */
    get edited(){
        let list = [];
        $(this.#xml).find('attributes > attribute[name=edited]').each(function(){
           list.push(atob($(this).attr('value')));
        });
        return list;
    }
    /**
     * Draw flowchart (XML to SVG)
     * @param {string} selector HTML element selector where the flowchart will be drawn
     * @returns {Flowchart} same object
     */
    draw(selector){
        if(this.#xml==='') return this;
        var $xml = $(this.#xml);
        var $output = $(selector);
        $output.empty().trigger("flowgorithmjs:preload");
        var options = this.options;
        var funX=0;
        var flow = {Y:0,fWidth:0,dim:[]};
        var maxW=0;
        
        $output.append('<svg class="flowchart" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">'+
          '  <style type="text/css"><![CDATA['+
          '  .flowchart{font-size:14px;font-family:Times}'+
          '  .arrow{stroke:#000;stroke-width:1px;marker-end:url(#arrow);fill:none}'+
          '  .line{stroke:#000;stroke-width:1px;fill:none}'+
          '  text{stroke:#000;stroke-width:0;text-anchor:middle}'+
          '  .iotype{font-size:12px;font-style:italic}'+
          '  .symbol{stroke:#000;stroke-width:1px;fill:#fff}'+
          '  ]]></style> '+
          '  <defs>'+
          '    <marker id="arrow" markerWidth="12" markerHeight="12" refX="0" refY="'+(options.aT/2)+'" orient="auto" markerUnits="strokeWidth">'+
          '      <path d="M0,0 L0,'+options.aT+' L'+options.aT+','+(options.aT/2)+' z" fill="#000" />'+
          '    </marker>'+
          '  </defs><text id="ttest" style="visibility:hidden"></text><g id="gtest" style="visibility:hidden"></g></svg>').css('text-align','center');
        //draw flowchart  
        let svgCode = '';
        $xml.find('function').each(function(){
            svgCode += drawFunction($(this));
        });
        let $svg = $output.children('svg');
        $svg.get(0).innerHTML += '<g transform="translate(0,0)">'+svgCode+'</g>';
        $svg.children('g').eq(0).remove();
        
        let g = $output.get(0).querySelector('svg>g');
        let gwidth = g.getBBox().width;
        let gheight = g.getBBox().height;
        $svg.attr('width',gwidth+10).attr('height',gheight+15).attr('viewBox','0 0 '+(gwidth+10)+' '+(gheight+15));
        let disc = 0-g.getBBox().x+5;
        $svg.children('g').attr('transform',"translate("+(disc)+",0)");
        $output.trigger("flowgorithmjs:postload");
        return this;

        function drawFunction($xml){
            maxW = 0;
            flow.Y = 0;
            flow.fWidth = 0;
            var name = $xml.attr('name');
            var txtStart,txtEnd;
            if(name==='Main'){
                txtStart = 'START';
                txtEnd = 'END';
            } 
            else if(name==='' || name===undefined){
                txtStart = null;
                txtEnd = null;
            } 
            else{
                txtStart = name;
                var params = $xml.find('parameter');
                if(params.length>0){
                    txtStart += '(';
                    params.each(function(i){
                        if(i>0) txtStart += ',';
                        txtStart += $(this).attr('type')+' '+$(this).attr('name');
                    });
                    txtStart += ')';
                }
                txtEnd = 'RETURN '+$xml.attr('variable');
            }
            var s = txtStart===null ? '' : drawStart(txtStart);
            s += drawSequence($xml.children('body'));
            if(txtStart!==null) s += drawEnd(txtEnd);
            var fwidth = calcBlockWidth(s)+5;
            var fx = calcBlockX(s);
            var tempX = funX;
            if(tempX!==0){
                tempX+=fx;
                funX+=fwidth;
            }
            else{
                funX=fwidth-fx;
            }
            flow.dim.push(flow.Y+20);
            return '<g transform="translate('+(tempX)+',10)" class="function '+name+'">'+s+'</g>';
        };
        function drawSequence($xml){
            var s = '<g class="block sequence" transform="translate(0,'+flow.Y+')">';
            var oldY = flow.Y;
            flow.Y = 0;
            var nextI = -1;
            $xml.children().each(function(i){
                var $el = $(this);
                switch($el.prop("tagName")){
                    case 'declare': var array = ($el.attr('array')==="True") ? '['+$el.attr('size')+']' : '';
                                    s += drawDeclare($el.attr('type')+' '+$el.attr('name')+array); 
                                    break;
                    case 'output':  var outString = $el.attr('expression');
                                    if($el.attr('newline')==='False') outString+=' ...';
                                    s += drawOutput(outString); break;
                    case 'input':   if(i>nextI){
                                        var vars = $el.attr('variable');
                                        if(options.groupInput){
                                            nextI = i+1;
                                            while($xml.children().eq(nextI).prop("tagName")==='input'){
                                                vars += ', '+$xml.children().eq(nextI).attr('variable');
                                                nextI++;
                                            }
                                        }
                                        s += drawInput(vars);
                                    } break;
                    case 'assign': s += drawAssign($el.attr('variable')+'='+$el.attr('expression')); break;
                    case 'call': s += drawCall($el.attr('expression')); break;
                    case 'if': s += drawSelection($el.attr('expression'),$el.children('then'),$el.children('else')); break;
                    case 'for': s += drawPreIteraction($el.attr('variable')+'='+$el.attr('start')+' TO '+$el.attr('end'),$el); break;
                    case 'while': s += drawPreIteraction($el.attr('expression'),$el); break;
                    case 'do': s += drawPostIteraction($el.attr('expression'),$el); break;
                    case 'more': s += drawMore(); break;
                }
            });
            s += '</g>';
            flow.Y += oldY;
            //console.log("sequence ("+flow.Y+")");
            //if(flow.Y>maxH) maxH = flow.Y;
            //if($xml.children('if').length>0) maxW+=100;
            return s;
        };
        function drawStart(content){
            flow.Y += 20;
            var padding = 10;
            var l = Math.max(calcExtraWidth(content),50)/2+padding;
            var s = '<g class="block" transform="translate(0,'+flow.Y+')">'+
                    '  <g class="start">'+
                    '    <ellipse class="symbol" cx="0" cy="0" rx="'+l+'" ry="20"/>'+
                    '    <text x="0" y="4">'+content+'</text>'+
                    '  </g>'+
                    '</g>';
            flow.Y += 20;
            return s;
        };
        function drawEnd(content){
            var padding = 10;
            var l = Math.max(calcExtraWidth(content),50)/2+padding;
            var s = '<g class="block" transform="translate(0,'+flow.Y+')">'+
                    drawArrow()+
                    '  <g class="end" transform="translate(0,'+(options.aH+options.aT+20)+')">'+
                    '    <ellipse class="symbol" cx="0" cy="0" rx="'+l+'" ry="20"/>'+
                    '    <text x="0" y="4">'+content+'</text>'+
                    '  </g>'+
                    '</g>';
            flow.Y += 40+options.aH+options.aT;
            return s;
        };
        function drawDeclare(content){
            //console.log("declare ("+flow.Y+")");
            var l = Math.max(calcExtraWidth(content),60)+20;
            var s = '<g class="block" transform="translate(0,'+flow.Y+')">'+
                    drawArrow()+
                    '  <g class="assign" transform="translate('+(-l/2)+','+(options.aH+options.aT)+')">'+
                    '    <rect class="symbol" width="'+l+'" height="36"/>'+
                    '    <line class="line" x1="5" y1="0" x2="5" y2="36"/>'+
                    '    <line class="line" x1="0" y1="5" x2="'+l+'" y2="5"/>'+
                    '    <text x="'+(l/2+3)+'" y="25">'+content+'</text>'+
                    '  </g>'+
                    '</g>';
            flow.Y += 36+options.aH+options.aT;
            return s;
        };
        function drawAssign(content){
            //console.log("assign ("+flow.Y+")");
            var l = Math.max(calcExtraWidth(content),60)+10;
            var s = '<g class="block" transform="translate(0,'+flow.Y+')">'+
                    drawArrow()+
                    '  <g class="assign" transform="translate('+(-l/2)+','+(options.aH+options.aT)+')">'+
                    '    <rect class="symbol" width="'+(l)+'" height="36"/>'+
                    '    <text x="'+(l/2)+'" y="23">'+content+'</text>'+
                    '  </g>'+
                    '</g>';
            flow.Y += 36+options.aH+options.aT;
            return s;
        };
        function drawInput(content){
            //console.log("input ("+flow.Y+")");
            var l = Math.max(calcExtraWidth(content),50);
            var s = '<g class="block" transform="translate(0,'+flow.Y+')">'+
                    drawArrow()+
                    '  <g class="input" transform="translate('+(-l/2)+','+(options.aH+options.aT)+')">'+
                    '    <polygon class="symbol" points="0,0 -20,36 '+l+',36 '+(20+l)+',0"/>'+
                    '    <path class="line" d="M'+(0+l)+',0 q0,15 13,13"/>'+
                    '    <text x="'+(l/2)+'" y="23">'+content+'</text>'+
                    '    <text class="iotype" x="'+(10+l)+'" y="10">i</text>'+
                    '  </g>'+
                    '</g>';
            flow.Y += 36+options.aH+options.aT;
            return s;
        };
        function drawOutput(content){
            //console.log("output ("+flow.Y+")");
            var l = Math.max(calcExtraWidth(content),50);
            var s = '<g class="block" transform="translate(0,'+flow.Y+')">'+
                    drawArrow()+
                    '  <g class="output" transform="translate('+(-l/2)+','+(options.aH+options.aT)+')">'+
                    '    <polygon class="symbol" points="0,0 -20,36 '+l+',36 '+(20+l)+',0"/>'+
                    '    <path class="line" d="M'+(l)+',0 q0,15 13,13"/>'+
                    '    <text x="'+(l/2)+'" y="23">'+content+'</text>'+
                    '    <text class="iotype" x="'+(10+l)+'" y="9">o</text>'+
                    '  </g>'+
                    '</g>';
            flow.Y += 36+options.aH+options.aT;
            return s;
        };
        function drawCall(content){
            var l = Math.max(calcExtraWidth(content),60)+20;
            var s = '<g class="block" transform="translate(0,'+flow.Y+')">'+
                    drawArrow()+
                    '  <g class="sub-program" transform="translate('+(-l/2)+','+(options.aH+options.aT)+')">'+
                    '    <rect class="symbol" width="'+l+'" height="36"/>'+
                    '    <line class="line" x1="5" y1="0" x2="5" y2="36"/>'+
                    '    <line class="line" x1="'+(l-5)+'" y1="0" x2="'+(l-5)+'" y2="36"/>'+
                    '    <text x="'+(l/2)+'" y="23">'+content+'</text>'+
                    '  </g>'+
                    '</g>';
            flow.Y += 36+options.aH+options.aT;
            return s;
        };
        function drawMore(){
            var text = "...";
            var l = calcExtraWidth(text);
            var s = '<g class="block" transform="translate(0,'+flow.Y+')">'+
                    drawArrow()+
                    '  <g class="other" transform="translate('+(-l/2)+','+(options.aH+options.aT)+')">'+
                    '    <text x="'+(l/2)+'" y="15">'+text+'</text>'+
                    '  </g>'+
                    '</g>';
            flow.Y += 28+options.aH+options.aT;
            return s;
        };
        function drawEmptyBlock(){
            var s = '<g class="block" transform="translate(0,'+flow.Y+')">'+
                    '<polyline class="line" points="0,0 0,'+(options.aH*3)+'" />'+
                    '</g>';
            flow.Y += options.aH*3;
            return s;
        };
        function splitCondition(condition){
            var i,tot=0,start=0,nl=false;
            var lines = [];
            for(i=0;i<condition.length;i++){
                if((i+1)%10===0 || nl){
                    if(condition.charAt(i)===' ' && i-start>5){
                        lines[tot]=condition.substring(start,i);
                        tot++;
                        start=i+1;
                        nl=false;
                    }
                    else nl=true;
                } 
            }
            lines[tot]=condition.substring(start);
            //console.log(lines);
            return lines;
        }
        function drawSelection(condition,$branchTrue,$branchFalse){
            var labelTrueSize = Math.max(calcExtraWidth(options.labelTrue),20);
            var labelFalseSize = Math.max(calcExtraWidth(options.labelFalse),20);
            var minPathWidth = Math.max(30,labelTrueSize+5,labelFalseSize+5); //minimum path width
            //console.log(labelFalseSize*2);
            var circleRadius = 4; //circle radius of rejoining paths 
            var parts = splitCondition(condition);
            var romH;
            var contidionWidth = 0;
            if(parts.length>1){
                condition = '';
                var nRows = parts.length;
                $(parts).each(function(i){
                    contidionWidth = Math.max(calcExtraWidth(this),contidionWidth);
                    condition += '<tspan x="0" dy="1.1em">'+this.escape()+'</tspan>';
                });
                contidionWidth += 20*nRows;
                var yc = 11*nRows;
                condition = '<text x="0" y="'+yc+'">'+condition+'</text>';
                romH = 20*nRows;
            }
            else{ 
                contidionWidth = calcExtraWidth(condition);
                condition = '<text x="0" y="32">'+condition.escape()+'</text>';
                romH = 27;
            }
            contidionWidth = Math.max(contidionWidth,50)+30;
            var oldY = 0;
            oldY = flow.Y;
            flow.Y = 0;
            var halfCondition = contidionWidth/2;
            var svgSequenceTrue = '';
            var trueWidth = halfCondition-5;
            if($branchTrue.children().length>0){
                svgSequenceTrue = drawSequence($branchTrue);
                trueWidth+=Math.max(calcBlockX(svgSequenceTrue),minPathWidth);
            }
            else trueWidth+=minPathWidth;
            var s = '<g class="block" transform="translate(0,'+oldY+')">'+
                    drawArrow()+
                    '  <g class="selection" transform="translate(0,'+(options.aH+options.aT)+')">'+
                    '    <g class="condition">'+
                    '      <polygon class="symbol" points="0,0 '+halfCondition+','+romH+' 0,'+(romH*2)+' '+(-halfCondition)+','+(romH)+'"/>'+
                            condition+
                    '    </g>'+
                    '    <g class="arrow-right">'+
                    '      <polyline class="line" points="'+halfCondition+','+romH+' '+trueWidth+','+romH+' '+trueWidth+','+(romH+10)+'"/>'+
                    '      <text x="'+(halfCondition+labelTrueSize/2)+'" y="'+(romH-5)+'">'+options.labelTrue+'</text>'+
                    '    </g>'+
                    '    <g class="true-path" transform="translate('+trueWidth+','+(romH+10)+')">'+svgSequenceTrue+'</g>';
            var branchTrueHeight = flow.Y+romH;
            flow.Y = 0;
            var svgSequenceFalse = '';
            var falseWidth = halfCondition-5; 
            if($branchFalse.children().length>0){
                svgSequenceFalse = drawSequence($branchFalse);
                falseWidth += Math.max(calcBlockWidth(svgSequenceFalse)-calcBlockX(svgSequenceFalse),minPathWidth);
            }
            else falseWidth+=minPathWidth;
            s+=     '    <g class="arrow-left">'+
                    '      <polyline class="line" points="'+(-halfCondition)+','+romH+' '+(-falseWidth)+','+romH+' '+(-falseWidth)+','+(romH+10)+'"/>'+
                    '      <text x="'+(-halfCondition-labelFalseSize/2)+'" y="'+(romH-5)+'">'+options.labelFalse+'</text>'+
                    '    </g>'+
                    '    <g class="false-path" transform="translate('+(-falseWidth)+','+(romH+10)+')">'+svgSequenceFalse+'</g>';
            var branchFalseHeight = flow.Y+romH;
            if(branchTrueHeight>branchFalseHeight){
                s += '<polyline class="line" points="'+(-falseWidth)+','+(branchFalseHeight+10)+' '+(-falseWidth)+','+(branchTrueHeight+10)+'"/>';
            }
            else if(branchTrueHeight<branchFalseHeight){
                s += '<polyline class="line" points="'+trueWidth+','+(branchTrueHeight+10)+' '+trueWidth+','+(branchFalseHeight+10)+'"/>';
            }
            var endHeight=options.aT+options.aH+3;
            var maxBranchesHeight = Math.max(branchTrueHeight,branchFalseHeight)+10;
            s +=    '    <g class="selection-close" transform="translate(0,'+(maxBranchesHeight)+')">'+
                    '      <polyline class="line" points="'+trueWidth+',0 '+trueWidth+','+endHeight+' '+circleRadius+','+endHeight+'"/>'+
                    '      <polyline class="line" points="'+(-falseWidth)+',0 '+(-falseWidth)+','+endHeight+' -'+circleRadius+','+endHeight+'"/>'+
                    '      <circle class="symbol" cx="0" cy="'+endHeight+'" r="'+circleRadius+'"/>'+
                    '    </g>'+
                    '  </g>'+
                    '</g>';
            flow.Y = oldY+maxBranchesHeight+circleRadius+endHeight+options.aT+options.aH;
            calcBlockWidth(s);
            return s;
        };
        function drawPreIteraction(condition,$content){
            var labelTrueSize = Math.max(calcExtraWidth(options.labelTrue),16);
            var labelFalseSize = Math.max(calcExtraWidth(options.labelFalse),16);
            var parts = splitCondition(condition);
            var romH;
            var contidionWidth=0;
            if(parts.length>1){
                condition = '';
                $(parts).each(function(i){
                    contidionWidth = Math.max(calcExtraWidth(this),contidionWidth);
                    condition += '<tspan x="0" dy="1.1em">'+this.escape()+'</tspan>';
                });
                contidionWidth += 2*parts.length;
                var yc = parts.length;
                condition = '<text x="0" y="'+yc+'">'+condition+'</text>';
                romH = 9*parts.length;
            }
            else{ 
                contidionWidth = Math.max(calcExtraWidth(condition),60);
                condition = '<text x="0" y="25">'+condition.escape()+'</text>';
                romH = 20;
            }
            var condW2 = contidionWidth/2;
            var s = '<g class="block" transform="translate(0,'+flow.Y+')">'+drawArrow();
            var oldY = flow.Y;
            flow.Y = 0;
            var contentDraw = ($content.children().length>0) ? drawSequence($content) : drawEmptyBlock();
            var contentWidth = calcBlockWidth(contentDraw);
            var half = Math.max(calcBlockX(contentDraw),40);
            s +=    '  <g class="preIteraction" transform="translate(0,'+(options.aH+options.aT)+')">'+
                    '    <g class="condition">'+
                    '      <polygon class="symbol" points="0,0 '+condW2+',0 '+(condW2+15)+','+romH+' '+condW2+','+(romH*2)+' '+(-condW2)+','+(romH*2)+' '+(-condW2-15)+','+(romH)+' '+(-condW2)+',0"/>'+
                            condition+
                    '    </g>';
            //don't use this variant
            if(options.itMode===1){        
                s += '    <g class="true-path" transform="translate('+(condW2+15)+','+(romH)+')">'+
                     '       <polyline class="line" points="0,0 '+half+',0"/>'+
                     '       <text x="10" y="-5">'+options.labelTrue+'</text>'+
                     '       <g class="true-branch" transform="translate('+half+',0)">';
                s += contentDraw;
                s += '           <g class="true-close" transform="translate(0,'+flow.Y+')">'+
                     '               <polyline class="arrow" points="0,0 0,15 '+(-half-15-condW2)+',15 '+(-half-15-condW2)+','+(-flow.Y+romH*2)+'"/>'+
                     '           </g>'+
                     '       </g>'+
                     '    </g>'+
                     '    <g class="false-path" transform="translate('+(-condW2-15)+','+(romH)+')">'+
                     '       <polyline class="line" points="0,0 -25,0 -25,'+flow.Y+' '+(condW2+15)+','+flow.Y+'"/>'+
                     '       <text x="-10" y="-5">'+options.labelFalse+'</text>'+
                     '    </g>'+
                     '  </g>'+
                     '</g>';
                flow.Y += oldY+options.aH+options.aT+20;
            }
            else if(options.itMode===2){
                var down=Math.max(0,romH-options.aH-options.aT);
                s += '    <g class="true-path" transform="translate('+(condW2+15)+','+romH+')">'+
                     '       <polyline class="line" points="0,0 '+(half-5)+',0"/>'+
                     '       <text x="'+(labelTrueSize/2+2)+'" y="-5">'+options.labelTrue+'</text>'+
                     '       <g class="true-branch" transform="translate('+(half-5)+',0)">';
                s += contentDraw;
                var maxSH = Math.max(options.aH+options.aT,romH);
                s += '           <g class="true-close" transform="translate(0,'+(flow.Y)+')">'+
                     '               <polyline class="arrow" points="0,0 0,'+down+' '+(-half+15-condW2)+','+down+' '+(-half+15-condW2)+',0 '+(-half+15-condW2)+','+(-flow.Y+options.aT+maxSH)+'"/>'+
                     '           </g>'+
                     '       </g>'+
                     '    </g>'+
                     '    <g class="false-path" transform="translate(0,'+(romH*2)+')">'+
                     '       <polyline class="line" points="0,0 0,'+(flow.Y-15)+'"/>'+
                     '       <text x="-'+(labelFalseSize/2+4)+'" y="18">'+options.labelFalse+'</text>'+
                     '    </g>'+
                     '  </g>'+
                     '</g>';
                flow.Y += oldY+(romH*2)+options.aH+options.aT-15;
            }
            else if(options.itMode===3){
                s += '    <g class="true-path" transform="translate(0,'+(romH*2)+')">'+
                     '       <text x="'+(labelTrueSize/2+6)+'" y="14">'+options.labelTrue+'</text>'+
                     '       <g class="true-branch" transform="translate(0,0)">';
                s += contentDraw;
                s += '           <g class="true-close" transform="translate(0,'+flow.Y+')">'+
                     '               <polyline class="arrow" points="0,0 0,10 '+(-half+5-condW2)+',10 '+(-half+5-condW2)+','+(-flow.Y-romH)+' '+(-condW2-25)+','+(-flow.Y-romH)+'"/>'+
                     '           </g>'+
                     '       </g>'+
                     '    </g>'+
                     '    <g class="false-path" transform="translate('+(condW2+15)+','+(romH)+')">'+
                     '       <polyline class="line" points="0,0 '+Math.max((half-condW2),15)+',0 '+Math.max((half-condW2),15)+','+(flow.Y+romH+10+10)+' '+(-condW2-15)+','+(flow.Y+romH+10+10)+'"/>'+
                     '       <text x="'+(labelFalseSize/2+1)+'" y="-5">'+options.labelFalse+'</text>'+
                     '    </g>'+
                     '  </g>'+
                     '</g>';
                flow.Y += oldY+(romH*2)+20+options.aH+options.aT;
            }
            return s;
        };
        function drawPostIteraction(condition,$content){
            var parts = splitCondition(condition);
            var romH;
            var contidionWidth = 0;
            if(parts.length>1){
                condition = '';
                $(parts).each(function(i){
                    contidionWidth = Math.max(calcExtraWidth(this),contidionWidth);
                    condition += '<tspan x="0" dy="1.1em">'+this.escape()+'</tspan>';
                });
                contidionWidth+=2*parts.length;
                var yc = parts.length;
                condition = '<text x="0" y="'+yc+'">'+condition+'</text>';
                romH = 9*parts.length;
            }
            else{ 
                contidionWidth = calcExtraWidth(condition);
                condition = '<text x="0" y="25">'+condition.escape()+'</text>';
                romH = 20;
            }
            contidionWidth = Math.max(contidionWidth,60);
            var condW2 = contidionWidth/2;
            var s = '<g class="block" transform="translate(0,'+flow.Y+')"><line class="line" x1="0" y1="0" x2="0" y2="'+(options.aH+options.aT)+'"/><circle class="symbol" cx="0" cy="'+(options.aH+options.aT)+'" r="4"/>';
            var oldY = flow.Y;
            flow.Y = 0;
            var contentDraw = ($content.children().length>0) ? drawSequence($content) : drawEmptyBlock();
            var contentWidth = calcBlockWidth(contentDraw);
            var half = Math.max(calcBlockX(contentDraw),condW2+40);
            half+=6;
            flow.Y += 15;
            s +=    '  <g class="postIteraction" transform="translate(0,'+(options.aH+options.aT)+')">';

            if(options.itMode===1 || options.itMode===2 || options.itMode===3){        
                s += '    <g class="true-path" transform="translate(4,0)">'+
                     '       <polyline class="line" points="0,0 '+half+',0"/>'+
                     '       <text x="-17" y="'+(flow.Y-7)+'">T</text>'+
                     '       <g class="true-branch" transform="translate('+half+',0)">';
                s += contentDraw+
                     '           <g class="true-close" transform="translate(0,'+(flow.Y-15)+')">'+
                     '               <polyline class="arrow" points="0,0 0,'+(15+romH)+' '+(-Math.abs(half-condW2-(23-options.aT)))+','+(15+romH)+'"/>'+
                     '           </g>';
                s += '       </g>'+
                     '    </g>'+
                     '    <g class="condition" transform="translate(0,'+flow.Y+')">'+
                     '      <polygon class="symbol" points="0,0 '+condW2+',0 '+(condW2+15)+','+romH+' '+condW2+','+(romH*2)+' '+(-condW2)+','+(romH*2)+' '+(-condW2-15)+','+(romH)+' '+(-condW2)+',0"/>'+
                            condition+
                     '       <text x="-12" y="'+(romH*2+15)+'">F</text>'+
                     '       <polyline class="line" points="0,'+(romH*2)+' 0,'+(romH*2+10)+'"/>'+
                     '    </g>';
                s += '    <polyline class="arrow" points="0,'+(flow.Y)+' 0,'+(options.aT+4)+'"/>'+
                     '  </g>'+
                     '</g>';
                flow.Y += romH*2;
                flow.Y += oldY+options.aH+options.aT+10;
            }
            return s;
        };
        function calcExtraWidth(content){
            let $tbox = $output.find('#ttest');
            $tbox.text(content);
            let l = $tbox.get(0).getBBox().width;
            maxW = Math.max(maxW,l);
            return l;
        };
        function calcBlockWidth(content){
            let $gbox = $output.find('#gtest');
            $gbox.get(0).innerHTML = '<g transform="translate(0,0)">'+content+'</g>';
            let l = $gbox.children('g').get(0).getBBox().width;
            maxW = Math.max(maxW,l);
            return l;
        };
        function calcBlockX(content){
            let $gbox = $output.find('#gtest');
            $gbox.get(0).innerHTML = '<g transform="translate(0,0)">'+content+'</g>';
            return Math.abs($gbox.children('g').get(0).getBBox().x);
        };
        function drawArrow(){
            return '<line class="arrow" x1="0" y1="0" x2="0" y2="'+options.aH+'"/>';
        };
        function getSVGContents(inputString){
            var domParser = new DOMParser();
            var svgDOM = domParser.parseFromString(inputString,'text/xml').getElementsByTagName('g')[0];
            return svgDOM.innerHTML;
        };
    }
}
String.prototype.escape = function() {
    var tagsToReplace = {
        '&': '&amp;',
        '<': '&lt;',
        '>': '&gt;'
    };
    return this.replace(/[&<>]/g, function(tag) {
        return tagsToReplace[tag] || tag;
    });
};