Simple box drawings for flows

Feature Request
1

Simple box drawings for flows. Nice to have.

2

Hey @Maciej_Szulc!

Can you show me an example of these drawings? How do you usually generate them?

If you’re using an online tool, cannot you embed the drawings directly on the page using Custom HTML?

3

Our devs brought this up, they want integration with PlantUML, although I redo the diagrams to make them look nicer. I assume you can integrate it, think the page is here, lots of other software has.

4

We’re looking into this!

5

As a temporary solution, you can create a Custom HTML block and apply the following:

<html>
    <head><script src="https://cdn.jsdelivr.net/gh/dankogai/js-deflate@master/rawdeflate.js"></script></head>
<body>
<img id="plantImg"><script>function encode64(e){for(r="",i=0;i<e.length;i+=3)i+2==e.length?r+=append3bytes(e.charCodeAt(i),e.charCodeAt(i+1),0):i+1==e.length?r+=append3bytes(e.charCodeAt(i),0,0):r+=append3bytes(e.charCodeAt(i),e.charCodeAt(i+1),e.charCodeAt(i+2));return r}function append3bytes(e,n,o){return c1=e>>2,c2=(3&e)<<4|n>>4,c3=(15&n)<<2|o>>6,c4=63&o,r="",r+=encode6bit(63&c1),r+=encode6bit(63&c2),r+=encode6bit(63&c3),r+=encode6bit(63&c4),r}function encode6bit(e){return e<10?String.fromCharCode(48+e):(e-=10)<26?String.fromCharCode(65+e):(e-=26)<26?String.fromCharCode(97+e):0==(e-=26)?"-":1==e?"_":"?"}function compress(e){e=unescape(encodeURIComponent(e)),e=encode64(deflate(e)),console.log("compressed",e),document.querySelector("#plantImg").src="http://www.plantuml.com/plantuml/img/"+e}

compress("@startuml\nAlice->Bob : I am using hex\n@enduml"); // CHANGE THIS
</script>
</body>
</html>

We’ll be aiming at making this into a native solution

1 Like