HTML Diagram with html

test-diagram

<h1>Braze Flows<h1>

    <h2>Order Receipt Email</h2>
    
    This is the scenario when an order is completed send them a personalized email
    
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0-beta1/jquery.min.js"></script>
    <script src="https://bramp.github.io/js-sequence-diagrams/js/webfont.js"></script>
    <script src="https://bramp.github.io/js-sequence-diagrams/js/snap.svg-min.js"></script>
    <script src="https://bramp.github.io/js-sequence-diagrams/js/underscore-min.js"></script>
    <script src="https://bramp.github.io/js-sequence-diagrams/js/sequence-diagram-min.js"></script>
    



<div class="diagram OrderComplete">
	participant Partner as P
    participant RoadID  as I
    participant Retail as R

    participant Customer as C
    participant RoadID OM as O


	Title: Partner order


    P->I: Partner Shopify webhook on order complete
    Note over I: If order product on roadid product
    I->R: Create Order to be completed
    I->C: Send link to customer to PDP to complete Order
    Note Over R: Problem: how to finalize the order without making the user checkout?
    C->R: Complete Order
    R->O: Fulfil Order


    


</div>
<a href="#" class="download-OrderComplete">Download as SVG</a>

<hr />

<br />
<br />
<br />
<a href="https://bramp.github.io/js-sequence-diagrams/"> Help for "js-sequence-diagrams"</a>



<style type="text/css">
	.diagram {

		padding-bottom: 50px;
		margin: auto;
		width: 50%;
		padding: 10px;
	}


    .signal text {
        fill: #000000;
    }
    .signal text:hover {
        fill: #aaaaaa
    }
    .note rect, .note path {
        fill: #e6f211;
    }
    .title rect, .title path,
    .actor rect, .actor path {
        fill: #BBBBBB 
    }
    .actor + line {
        stroke: #BBBBBB 
    }

</style>

<script>

	$(document).ready(function () {
        console.log("ready");
        //$(".diagram").sequenceDiagram({theme: 'hand'});
        $(".diagram").sequenceDiagram({theme: 'simple'});

        setTimeout(function (){
            $('.note').each(function (index, value) {


                var note = $(this);
                window.a=note;
                console.log("note.text()", note.html());
                if(note.html().indexOf("Problem:") >= 0) {
                    $('rect', this).css({fill: "#ff0000"});
                    $('text', this).css({fill: "#000000"});
                }
            });

        }, 250);

        //, function(index, value) {

        //    console.log ("test", index, value)
            // elm.css({ fill: "#ff0000 !important", });
            // console.log (elm.css())
        //});


	    //reload every few seconds to reflect changes.
        setTimeout("location.reload(true);", 10000);

	
	   // $(".diagram").sequenceDiagram({theme: 'hand'});
    });
</script>
<!--

<script>
	$(document).ready(function () {

	//reload every few seconds to reflect changes. 
	setTimeout("location.reload(true);", 3000);

		//$(".diagram").sequenceDiagram({theme: 'simple'});
		$(".diagram").sequenceDiagram({theme: 'simple'});

		var download_refreshreports = $('.download-RefreshReports');
		var download_importorders = $('.download-ImportOrders');
		var download_convertorders = $('.download-ConvertOrders');
		var diagram_refreshreports = $(".RefreshReports");
		var diagram_importorders = $(".ImportOrders");
		var diagram_convertorders = $(".ConvertOrders");


		download_refreshreports.click(function(ev) {
			var svg = diagram_refreshreports.find('svg')[0];
			var width = parseInt(svg.width.baseVal.value);
			var height = parseInt(svg.height.baseVal.value);
	  var data = ""; //editor.getValue();

	  var xml = '<?xml version="1.0" encoding="utf-8" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN" "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd"><svg xmlns="http://www.w3.org/2000/svg" width="' + width + '" height="' + height + '" xmlns:xlink="http://www.w3.org/1999/xlink"><source><![CDATA[' + data + ']]></source>' + svg.innerHTML + '</svg>';

	  var a = $(this);
	  a.attr("download", "RefreshReports.svg"); // TODO I could put title here
	  a.attr("href", "data:image/svg+xml," + encodeURIComponent(xml));
	});

		download_importorders.click(function(ev) {
			var svg = diagram_importorders.find('svg')[0];
			var width = parseInt(svg.width.baseVal.value);
			var height = parseInt(svg.height.baseVal.value);
	  var data = ""; //editor.getValue();

	  var xml = '<?xml version="1.0" encoding="utf-8" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN" "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd"><svg xmlns="http://www.w3.org/2000/svg" width="' + width + '" height="' + height + '" xmlns:xlink="http://www.w3.org/1999/xlink"><source><![CDATA[' + data + ']]></source>' + svg.innerHTML + '</svg>';

	  var a = $(this);
	  a.attr("download", "ImportOrders.svg"); // TODO I could put title here
	  a.attr("href", "data:image/svg+xml," + encodeURIComponent(xml));
	});

		download_convertorders.click(function(ev) {
			var svg = diagram_convertorders.find('svg')[0];
			var width = parseInt(svg.width.baseVal.value);
			var height = parseInt(svg.height.baseVal.value);
	  var data = ""; //editor.getValue();

	  var xml = '<?xml version="1.0" encoding="utf-8" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN" "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd"><svg xmlns="http://www.w3.org/2000/svg" width="' + width + '" height="' + height + '" xmlns:xlink="http://www.w3.org/1999/xlink"><source><![CDATA[' + data + ']]></source>' + svg.innerHTML + '</svg>';

	  var a = $(this);
	  a.attr("download", "ConvertOrders.svg"); // TODO I could put title here
	  a.attr("href", "data:image/svg+xml," + encodeURIComponent(xml));
	});

	});


</script>