Functions-diagram is a Python program for graphically representing functions by specifying the input and output names and types.
Its aim is to help learners take their first steps with functions and analyse how a programme works.
Elements (nodes and functions) can be linked and connected to each other.
The graphical representation can be exported in SVG format.
This diagram represents the call of a xor function:
cipher_text = xor(plain_text, key)
We can gess that this function takes two parameters and returns a value.
Another example involving a second call to the xor function.
Here is the corresponding code:
cipher_Text = xor(plain_text, key)
deciphered_text = xor(cipher_Text, key)
The same diagram with type indications and the corresponding code.
def xor(a: int, b: int) -> int:
"""
Return the bitwise operation xor on the two positive integers a and b.
>>> xor(8, 7)
15
>>> xor(7, 3)
4
"""
return a ^ b
cipher_Text = xor(plain_text, key)
deciphered_text = xor(cipher_Text, key)
The code and diagram are consistent with the signature of the xor function.
>>> import inspect
>>> inspect.signature(xor)
<Signature (a: int, b: int) -> int>
Here we propose a naive approach to solving the Travelling salesman problem.
Let be a list of cities such as:
cities = ["Paris", "Lyon", "Marseille", ...]
We have to explore all possible combinations and finds the shortest possible route that visits each city exactly once and returns to the city of origin.
As a first approach, we can imagine building a two-entry table to find out the cost of a route between each city.
Each cell can be filled in by calling an API (OpenStreetMap, for example). The result is implemented by a dictionary.
cost = {
"Paris": {"Paris": 0, "Lyon": 462.941, "Marseille": 772.335, ...},
"Lyon": {"Paris": 462.941, "Lyon": 0, "Marseille": 312.659, ...},
"Marseille": {"Paris": 772.335, "Lyon": 312.659, "Marseille": 0, ...},
...
}
From this same list of cities, we need to generate all the possible route combinations back to the city of origin. For example:
["Paris", "Lyon", "Marseille", ..., "Paris"]
...
["Paris", "Marseille", "Lyon" ..., "Paris"]
Now that we know the cost table and all the possible routes, all we have to do is find the route with the lowest cost.
This is what a global schematic of the problem would look like.
The last function will be responsible for systematically calculating the cost of each route.
After that, we'll just have to take this top-down approach a step further by specifying each of the sub-functions more precisely.
Click here to see a possible resolution with the associated diagrams.
Diagrams are saved in a .DGM file.
This is how the backup of the previous diagram looks.
def create_cost_table(cities:list[str])->dict[str,dict[str,float|None]]
create_cost_table.position(257,236)
create_cost_table.dimension(258,39)
def all_routes(cities:list[str])->list[list[str]]
all_routes.position(291,320)
all_routes.dimension(190,39)
def search_minimum(cost:dict[str,dict[str,float]],permutations_routes:list[list[str]])->tuple[float|None,list[str]]
search_minimum.position(860,349)
search_minimum.dimension(380,58)
node(cost,(620,320)) # fixed
node(permutations_routes,(620,416))
node(cities:list[str],(123,235))
create_cost_table<0---cities
create_cost_table>---cost
all_routes<0---cities
all_routes>---permutations_routes
search_minimum<0---cost
search_minimum<1---permutations_routes
Lines beginning with def are used to create function blocks.
They follow the Python function definition syntax (the final ':' is optional).
After each def line, you can specify the position and/or dimension attributes of the block.
Nodes are created from a line starting with node. The parameters entered define the node name and its characteristics (type hint, position).
The comment # fixed indicates whether this element cannot be moved by automatic placement: 'Auto'.
Note that the '*' character in the name designates a separator: the characters preceding this separator correspond to the label displayed. This makes it possible to have functions or nodes with identical labels but unique names (identifiers).
Links between nodes follow the syntax below:
node_name1---node_name2
Function nodes are designated by : function_name> for the output, and function_name<id for inputs with id starting at 0.
Create a new file
Open a file
Save file
Export diagram to image (.SVG)
Move function, a node or a group. Also allows to move the lower right corner of the groups in "Fixed" mode
Add a function
Add a free node
Create a group
Connect two nodes
Edit element (function, node or group)
Delete element (node, function, group or connection). Note: To delete all elements of a group, it must be edited.
Undo
Redo
Place automaticly the objects on the screen
Edit settings
Show informations
Some operations require you to select a destination first. You can exit this mode by right-clicking or by pressing Enter or Esc.
- CTRL + s: Save
- CTRL + c: Copy/paste
- CTRL + z & CTRL + y: Undo & Redo
- CTRL + a: Create a group including all diagram elements
- CTRL + q & CTRL + w: Zoom + et Zoom -
- CTRL + o: Return to original zoom and offset
- Wheel: Zoom + et Zoom -
- Clic + Move: Offset of the drawing
render.py is a rendering tool that converts .DMG files or a directory of .DMG files to .SVG.
Example of use :
python3 render.py ./diagrams -m 40 -o 0.9
This instruction converts all .DMG files in the diagrams directory with an additional margin of 40 pixels (-m option) and a transparency of 0.9 (-o option)
Help:
usage: render.py [-h] [-d DESTINATION] [-m MARGIN] [-o OPACITY] [-p {None,dark,light}] [-a AUTOMODE] source
positional arguments:
source Source file
options:
-h, --help show this help message and exit
-d DESTINATION, --destination DESTINATION
Destination file
-m MARGIN, --margin MARGIN
Margin in pixels
-o OPACITY, --opacity OPACITY
Opacity from 0 (transparent) to 1 (opaque)
-p {None,dark,light}, --preferences {None,dark,light}
Preferences
-a AUTOMODE, --automode AUTOMODE
Runs automatic placement if True
Eric Buonocore
The program is operational.
- Adding elements (nodes, functions)
- Interconnecting elements
- Opening and saving diagrams
- Moving and editing elements
- Undo/Redo
- Automatic positioning of elements
- Settings and help
- Multi-select items to move or delete them
- Set the spacing of elements for automatic placement
- Allow the names of free nodes to be justified
- Enable zooming and shifting of the whole layout
- A rendering tool (render.py) for converting .dmg files (or directories) into .svg files
- Testing and fixing bugs
