Profiles

A profile finds its source and reads the names in it. Then it gives the result to the same layout and the same emitter as all other files. No profile writes draw.io data itself.

The parser reads the parts that a profile does not name. Each profile tells the parser which parts it read, and the parser reads only the other parts. Thus accent-draw reads a PlantUML diagram with a title as a diagram and keeps the title. Before, one unknown line caused accent-draw to read the full file with the parser.

The order of the profiles

Source	Mark in the file	What the source gives
draw.io	A diagram in the content attribute of the root	The diagram. accent-draw converts nothing
Miro	data-widget-id on the group of each item	Each sticker, card, table, connector and mind map branch, by its name on the board. Also the color of the canvas, and the shapes in a diagram that a user put on the board as SVG
Mermaid	aria-roledescription="flowchart-v2"	Nodes with their text in them. The id of each edge contains the keys of the two nodes that it connects
Graphviz	<g class="graph"> with a title on each part	The name of a node, the from->to of an edge, and the title of a cluster
PlantUML	<g class="entity" data-qualified-name>	Each entity by its name, and the two entities that each link connects
D2	data-d2-version	Each name, in base64, in the class of the group that shows it
Excalidraw	svg-source:excalidraw	The full scene in the file, with the point on a shape where each arrow starts or stops
Inkscape	inkscape:connection-start	Only the two objects that each connector connects. The parser reads the drawing

draw.io: given back, not converted

draw.io exports an SVG file as .drawio.svg. This file is an image that contains the diagram in the content attribute of the root element. accent-draw gives back that diagram without a change. The diagram can be plain XML. It can also be base64 of raw deflate of the URI-encoded XML.

This makes the round trip useful. The first conversion of a drawing loses some data, and it will always lose some. But each round trip after the first is exact, because the file contains the diagram and accent-draw gives back the diagram. If accent-draw cannot read the diagram in the file, it gives a note and converts the image.

Miro: a board, not a picture

Miro gives each item on a board its own id. Thus a Miro reader can be exact. But for the same reason, a Miro reader does not work on other files. A sticker becomes a sticker with its text in it. A connector becomes an arrow that connects the two shapes at its ends. The page gets the color of the canvas of the board, so you can see a white card on it.

A user can put a diagram from a different tool on a board, for example a Mermaid sequence diagram or an icon. Miro keeps that diagram as an image, and the address of the image is the SVG. accent-draw converts it into its shapes, lines and text, and you can edit each of them. The connectors that end on it stay connected.

An image with pixels, for example a PNG, a JPEG or a screenshot, has no shapes to read. The Miro export keeps it as pixels, so it stays an image. To edit the parts of a diagram after the conversion, put the diagram on the board as SVG.

Each arrowhead gets the shape and the size of the marker on the board. Text that turns along a connector stays turned. A sticky note keeps its shadow. A highlighter band stays behind its text. A stroke from the pen tool becomes a line in the drawing, and it gets no text and no arrow.

accent-draw gives a note for each widget that it cannot read. If it can read no widget on a board, the parser reads the full board, and a note tells you this.

Mermaid, Graphviz, PlantUML, D2

These four profiles read the drawing of an SVG file in the same way. They are different only in where they find the names:

• Mermaid names its nodes and its edges. The id of an edge contains the keys of the two nodes that it connects. Thus each edge connects the two nodes that it names, not the nodes that are nearest. Other Mermaid diagrams, for example sequence diagrams and class diagrams, name no parts. The parser reads them.
• Graphviz gives a title to each of its parts. Each edge connects the nodes that its title names. Each label goes to the part that it is the title of. The white polygon behind the graph becomes no cell. Graphviz gives its size in points, so its drawing is one third larger than its coordinates tell. A root viewBox changes the coordinates as a transform does, and accent-draw reads it as a transform.
• PlantUML names each entity and tells which two entities a link connects. A class becomes one box with its name and its members. A composition gets the filled diamond that UML uses. A class can also show a badge and lines between its parts. accent-draw gives a note for these and does not show them. PlantUML sequence diagrams name no parts, so the parser reads them.
• D2 puts each name, in base64, in the class of the group that shows it. It names an edge by the two nodes that the edge connects and by its direction. This profile is more important than the others. D2 shows each connector through a mask, and draw.io cannot show a mask. Thus without this profile, a D2 diagram has no edges.

Excalidraw: the scene, not the sketch

Excalidraw makes sketches. Each shape is many strokes on top of each other, and the drawing names no parts. Thus from the drawing, accent-draw can only guess.

But Excalidraw can export a file with its scene. The scene is the model of Excalidraw: base64, then a byte string of JSON, then zlib. This model gives more data than all other sources here. It tells which shape an arrow connects, and also the point on that shape where the arrow starts or stops. accent-draw also reads freehand strokes, images and frames from the scene.

Excalidraw can also export a file without its scene. The parser reads such a file.

Inkscape: the other way

Inkscape makes drawings, not diagrams. Thus the parser reads the drawing, and the profile adds one thing. The connector tool of Inkscape records the two objects at the ends of each connector. The profile connects each end to its object.

This is most important when the shapes are outlines, not filled boxes. From the positions alone, accent-draw cannot be sure that an arrow connects to an outline. But the drawing tells which box each arrow connects. Thus the arrows move with their boxes, whatever the shape of the boxes.

Add a profile

Write a profile when a source gives names to its parts and the names tell what the parts are. A profile needs a way to find its source and a way to read the names into the scene. It also needs a corpus file in the repository for its tests. A side by side image must show that it draws what the source drew. The order of the list above follows the market. It does not follow the difficulty.