Converting Code to Diagrams in AutoIT?

[noellarkin]

I'm looking for an AutoIT equivalent of something like this:
https://crubier.github.io/code-to-graph

Are there any available? I came across this: https://www.aivosto.com/visustin.html

but it's a little on the expensive side and the software doesn't look like it's been updated in a while.

[Gianni]

Hi @noellarkin

I also looked for something like this a while ago, but unfortunately the only one I found ready for the AutoIt language was the visustin software you found too.
it would be interesting to create one from scratch... (?)
In this post from @junkew from some time ago (https://www.autoitscript.com/forum/topic/193792-canvas-udf-flowchartlike-examples/), there is a script that generates something that might look like.
but obviously the graphic part is the least problematic one to generate. The missing (most important) part is the conversion of an AutoIt listing into blocks and block relationships (given an AutoIt list as input, the parser should produce a file with the block list and block relationships). ... easy to say ...
anyone dare try their hand at this?

 

[RTFC]

22 hours ago, Gianni said:

an AutoIt listing into blocks and block relationships

Part of what you need could be provided by CodeScanner (link in my signature), notably:

• all code entry & exit points
• all user function definitions and function calls (native and UDF)
• all loops (type, start point, end point)
• all conditional evaluations (branching points), referrred to here as "phrases"

EDIT: you would have to run CodeScanner on your target script (with all relevant options enabled) and then analyse/trace through the "references.txt" array in the generated CS subdirectory.

Edited August 28, 2022 by RTFC
clarification

[junkew]

The basic parts are there

1  lexer for the input

2 parse for the visual output

It will depend on the requirements how much time it will take and if you want a pure autoit version or parse the output in https://graphviz.org/ layout

https://en.m.wikipedia.org/wiki/DOT_(graph_description_language)

Edited August 28, 2022 by junkew

[Gianni]

After reading the @junkew's link above relating to the DOT (graph description language), I saw that the Graphviz software, interpreting that language, can generate interesting graphs. This intrigued me and I looked for some other sw that can be used easily through AutoIt. I found this other link http://viz-js.com/ that practically emulates the previous sw in a web page using Javascript. This is interesting because it could allow you to embed that sw in an AutoIt GUI. Unfortunately that link does not seem to work in IE, and this precludes the possibility of easily incorporating it into AutoIt. However I saw that an older version of that site also worked in IE. So I recovered previous versions of the javascript scripts, which allowed me to incorporate that SW into an AutoIt GUI. I sketched it all out in the attached zip file which also contains a small AutoIt script to assemble everything into one simple GUI. Changing the DOT listing on the left panel (by hand for now ...) the graph is automatically updated on the right panel. This could be a first step for a sw that transforms an AutoIt listing into a graph. Now I'm trying to generate a DOT listing from and AutoIt source using @RTFC's "Code Scanner", in order to "send" it to the GUI above ... (not easy) Any suggestion and/or advice is welcome. see you later... p.s. To test the graphic qualities of the sw viz-js, you can copy and paste the DOT listings found at this link: https://graphviz.org/gallery/ (click on any image to see the DOT listing to copy.

 

DOT2Flow.zip

p.s.

related links:

https://github.com/kieler/elkjs?tab=readme-ov-file
https://rtsys.informatik.uni-kiel.de/elklive/
https://retejs.org/

Edited March 16 by Gianni

[RTFC]

@Gianni: What is the problem? Do you need additional info on how MCF works under the hood?

[junkew]

You do not need ie to draw a graph.

See example

https://www.autoitscript.com/autoit3/docs/functions/GUICtrlSetGraphic.htm

You Just have to make some shape definition for a square, diamond and draw it on the x y positioning You need.

 

[junkew]

A very rudimentary flowchart example. It will be a lot of effort to make this more functional and defining the node pictures will be a lot of work to define.

 

expandcollapse popup

#include <GUIConstantsEx.au3>
#include <StaticConstants.au3>
#include <ColorConstants.au3>

Global Const $g_MAXGr = 8
Global $g_aidGraphics[$g_MAXGr + 1] ; 0 and $g_MAXGr entries not used to allow GUICtrlDelete result
Global $g_idDel, $g_hcanvas

Example()

Func Example()
    Local $idMsg, $iInc, $i

    GUICreate("My flowchart tool", -1, -1, 100, 100)
    Local $idDel1 = GUICtrlCreateButton("Open canvas", 50, 200, 150)
    GUISetState(@SW_SHOW)
    Createcanvas()

    $i = 1
    $iInc = 1
    ;$i=5   ; uncomment to delete starting from last define Graphic control
    ;$iInc=-1

    Do
        $idMsg = GUIGetMsg()
        If $idMsg = $idDel1 Then $i = Create($iInc)

        If $idMsg = $g_idDel Then
            GUICtrlDelete($g_aidGraphics[$i])
            $i = $i + $iInc
            If $i < 0 Or $i > $g_MAXGr Then Exit
        EndIf
    Until $idMsg = $GUI_EVENT_CLOSE
EndFunc   ;==>Example

Func Create($iInc)
    GUIDelete($g_hcanvas)
    Createcanvas()
    If $iInc = -1 Then Return 5
    Return 1
EndFunc   ;==>Create

func drawStartOrEnd($x,$y,$r)
    local $graphic = GUICtrlCreateGraphic(20, 50, 100, 100)
    GUICtrlSetGraphic(-1, $GUI_GR_COLOR, $COLOR_BLACK, $COLOR_BLACK)
    GUICtrlSetGraphic(-1, $GUI_GR_PIE, $x, $y, $r, 0, 360) ;~ circle

    return $graphic
EndFunc

func drawProcess($x,$y)
    $graphic = GUICtrlCreateGraphic(20, 50, 100, 100)
    GUICtrlSetGraphic(-1, $GUI_GR_COLOR, $COLOR_BLACK, $COLOR_BLACK)
    GUICtrlSetGraphic(-1, $GUI_GR_RECT, $x, $y, 60, 20) ;~ rectangle
    return $graphic
EndFunc

func drawDiamond($x,$y, $w, $h)
    $graphic = GUICtrlCreateGraphic(20, 50, 100, 100)
    GUICtrlSetGraphic(-1, $GUI_GR_COLOR, $COLOR_BLACK, $COLOR_BLACK)

    GUICtrlSetGraphic(-1, $GUI_GR_MOVE, $x , $y+ round($h/2))
    GUICtrlSetGraphic(-1, $GUI_GR_LINE, $x+20,$y)
    GUICtrlSetGraphic(-1, $GUI_GR_LINE, $x+40,$y+ round($h/2))
    GUICtrlSetGraphic(-1, $GUI_GR_LINE, $x+20,$y+$h)
    GUICtrlSetGraphic(-1, $GUI_GR_LINE, $x,$y+round($h/2))
    return $graphic
EndFunc
func drawConnector($x1, $y1, $x2, $y2)
    $graphic = GUICtrlCreateGraphic(20, 50, 100, 100)
    GUICtrlSetGraphic(-1, $GUI_GR_COLOR, $COLOR_BLACK, $COLOR_BLACK)

    GUICtrlSetGraphic(-1, $GUI_GR_MOVE, $x1 , $y1)
    GUICtrlSetGraphic(-1, $GUI_GR_LINE, $x2,  $y2)
    return $graphic
EndFunc

Func Createcanvas()
;~  If in future we want to drawtoPrinter, drawToVisio, drawToPpt is use variable functions
    $drawStartOrEnd = drawStartOrEnd
    $drawProcess    = drawProcess
    $drawDiamond    = drawDiamond
    $drawConnector  = drawConnector

    $g_hcanvas = GUICreate("My canvas",640, 480)
$g_idDel = GUICtrlCreateButton("Delete", 50, 165, 50)
    local $w=120
    local $h=40

    $g_aidGraphics[1]=$drawStartOrEnd(200,10,$w/9)
    $g_aidGraphics[2]=$drawProcess(170,   20+$h)
    $g_aidGraphics[3]=$drawDiamond(180,   30+2*$h,$w,$h)
    $g_aidGraphics[4]=$drawStartOrEnd(200,60+3*$h,$w/9)

    $g_aidGraphics[5]=$drawConnector(200,10           , 200, 20+$h)
    $g_aidGraphics[6]=$drawConnector(200,20+$h        , 200, 30+2*$h )
    $g_aidGraphics[7]=$drawConnector(200,30+2*$h +$h  , 200, 60+3*$h )

    GUISetState(@SW_SHOW)
EndFunc   ;==>Createcanvas

 

[robertocm]

I would try with svg text code and html tables

expandcollapse popup

Opt("MustDeclareVars", 1)
Opt("TrayIconDebug", 1)

Global $sFilePathHTML = @DesktopDir & "\svg_test.html"

Global $oStream = ObjCreate("ADODB.Stream")
$oStream.Type = 2 ; adTypeText
$oStream.Charset = "utf-8"
$oStream.LineSeparator = -1 ; adCRLF
$oStream.Open
;https://msdn.microsoft.com/en-us/library/ms678072(v=vs.85).aspx
;StreamWriteEnum: 1 adWriteLine

$oStream.WriteText("<html>", 1)
$oStream.WriteText("<head>", 1)
$oStream.WriteText("<style>", 1)
$oStream.WriteText(".MySVGtb {table-layout: fixed; border-collapse: separate; border-spacing: 1px;}", 1)
$oStream.WriteText(".MySVGtb th {border: 1px solid #e7e7e7; text-align:center; background-color: #f3f3f3; padding: 0.1rem 0.1rem; word-wrap: break-word;}", 1)
$oStream.WriteText(".MySVGtb tr:nth-child(even){background-color: #f5f5f0}", 1)
$oStream.WriteText("</style>", 1)
$oStream.WriteText("</head>", 1)
$oStream.WriteText("<body>", 1)

$oStream.WriteText("<table class='MySVGtb' style='width: 100%;'>", 1)
For $j = 1 To 2
    $oStream.WriteText("  <thead style='font-size:.7em;'>", 1)
    $oStream.WriteText("    <tr>", 1)
    For $i = 1 To 2
        $oStream.WriteText("      <th width='20%' style='border: 1px solid #ddd;padding: 0rem;'>Some Text " & $j & "</th>", 1)
    Next
    $oStream.WriteText("    </tr>", 1)
    $oStream.WriteText("  </thead>", 1)
    $oStream.WriteText("  <tbody>", 1)
    $oStream.WriteText("    <tr>", 1)
    For $i = 1 To 2
        $oStream.WriteText("     <td style='border: 1px solid #ddd;padding: 0rem;text-align:center;'>", 1)
        $oStream.WriteText("     <svg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' version='1.1' width='100%' height='125'><defs><linearGradient id='TankFill" & $i & "' x1='0' y1='1' x2='0' y2='0'>", 1)
        $oStream.WriteText("           <stop offset='0%' stop-color='#ffffcc' />", 1)
        $oStream.WriteText("           <stop id='TFill1A' offset='21%' stop-color='#99cc00' />", 1)
        $oStream.WriteText("           <stop id='TFill1B' offset='21%' stop-color='white' />", 1)
        $oStream.WriteText("           <stop offset='100%' stop-color='white' /></linearGradient></defs><g transform='translate(5,12)'><rect x='0' y='0' width='60' height='100' rx='24' fill='url(#TankFill" & $i & ")' stroke='#808080' stroke-width='2'/></g>", 1)
        $oStream.WriteText("           <g transform=' matrix(1 0 0 1 22 105) '><text xml:space='preserve' font-family='Verdana' font-size='11' font-weight='normal' style='stroke: none; stroke-width: 1; stroke-dasharray: none; stroke-linecap: butt; stroke-linejoin: miter; stroke-miterlimit: 10;fill:#000000;fill-opacity:1; fill-rule: nonzero; opacity: 1; white-space: pre' ><tspan x='0' y='0' fill='rgba(0,0,0,1)'>Text" & $i & "</tspan></text></g>", 1)
        $oStream.WriteText("     </svg>", 1)
        $oStream.WriteText("     </td>", 1)
    Next
    $oStream.WriteText("    </tr>", 1)
    $oStream.WriteText("  </tbody>", 1)
Next
$oStream.WriteText("</table>", 1)

$oStream.WriteText("</body>", 1)
$oStream.WriteText("</html>", 1)

$oStream.SaveToFile($sFilePathHTML, 2) ;adSaveCreateOverWrite
;After a call to this method, the current position in the stream is set to the beginning of the stream (Position=0).
;or use this for ReadText
;$oStream.Position = 0

$oStream.Close
$oStream = 0

just other ideas:

automating Excel shapes

Inskape perhaps

OpenOffice Draw (don't think is possible)