You cannot select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
matrix-spec/assets/diagrams
Kévin Commaille 9882d95775
Improve the quality of the rendered diagrams (#1999)
The first commit allows to lazy-load the diagrams, which should improve the loading time of the CS API on mobile. In the process it also improves the alt text of the images.

The second commit serves the diagrams as high-resolution WebPs. Encoding a high resolution diagram as WebP gives a file of approximately the same size as the lower resolution PNG. For maximum compatibility we also serve them as a lower resolution WebP and a fallback PNG. WebP was chosen because it is one of the export formats of draw.io/diagrams.net, and it is widely available in modern browsers.

Signed-off-by: Kévin Commaille <zecakeh@tedomum.fr>
1 week ago
..
README.md Improve the quality of the rendered diagrams (#1999) 1 week ago
membership.drawio Fix relative URLs when serving the specification with a custom `baseURL` (#1984) 2 weeks ago
membership.webp Improve the quality of the rendered diagrams (#1999) 1 week ago
threaded-dag-threads.drawio Fix relative URLs when serving the specification with a custom `baseURL` (#1984) 2 weeks ago
threaded-dag-threads.webp Improve the quality of the rendered diagrams (#1999) 1 week ago
threaded-dag.drawio Fix relative URLs when serving the specification with a custom `baseURL` (#1984) 2 weeks ago
threaded-dag.webp Improve the quality of the rendered diagrams (#1999) 1 week ago

README.md

Spec diagrams

Non-ascii diagrams for the spec can be placed here for reference in the actual spec. Please include source material so the diagram can be recreated by a future editor.

https://www.diagrams.net/ is a great (open source) tool for these sorts of things - include your .drawio file next to your diagram.

Suggested settings for diagrams.net:

  • Export as WebP.
  • 200% size.
  • 20 for a border width.
  • Light appearance.
  • No shadow, or grid.

To reference a diagram, use the diagram shortcode. For example:

{{% diagram name="membership" alt="Diagram presenting the possible membership state transitions" %}}

Where name is the file name without extension, and alt is a textual replacement for the image, useful for accessibility.