Diagrams & PPTs

An overview of a workflow is worth…a lot.

A diagram simply summarizes a lot of information.

Diagrams for All

Dont complicate your life.

You can make AI make these diagrams for you: https://github.com/JAlcocerT/Streamlit_PoC/tree/main/Utils

Diagrams Tools

With some non-diagram-oriented tools, like some note taking apps.

You can also make your diagrams inside the notes itself. See Logseq.

DrawIO

• https://app.diagrams.net/ - Draw.io
  • https://github.com/jgraph/drawio

Mermaid Live

MermaidJS Diagrams are just amazing.

Thanks to mermaidJs, we can make cool diagrams as a code

You can use mermaidJS for free at: https://mermaid.live/edit

I discovered mermaidJS diagrams thanks to HUGO SSG Hextra Theme

Excalidraw

A game changer to create quick diagrams to showcase your D&A architectural ideas with the team:

• https://github.com/excalidraw/excalidraw
  • https://excalidraw.com/

MIT | Virtual whiteboard for sketching hand-drawn like diagrams

Python Diagrams

For sure you will want to have a look to Python Plotly Graphs

• Plotly render inside Streamlit

And to the Python Diagrams:

• https://pypi.org/project/diagrams/

AI BI Tools Post

Writting about Streamlit PoC with PyGWalker

Streamlit PoC

Source Code on Github. Rendering Plotly, MermaidJS, ChartJS, ApexCharts, PyGWalker with OSM geolocation data…

ChartJS Graphs

• https://www.chartjs.org/

Which can also be part of HUGO Themes, with such results.

Structurizr Lite

• https://github.com/structurizr/lite
• https://docs.structurizr.com/lite

This free and open source version of Structurizr allows you to view/edit diagrams, view documentation, and view architecture decision records defined via a DSL or JSON workspace.

Structurizr Lite can be used standalone for workspace viewing/authoring, or in conjunction with the cloud service/on-premises installation as an authoring/testing/staging environment.

PPTs as Code

Presentations as a Code

1. SliDev

• They support Katex: https://sli.dev/custom/config-katex
• And mermaid diagrams: https://sli.dev/custom/config-mermaid

2. MARP and RemarkJS

3. RevalJS and Astro - Which can also be deploy to Github Pages: https://github.com/JAlcocerT/slides-template

• https://github.com/jsulpis/slides-template
  • https://jsulpis.github.io/slides-template/#/

Minimalist template for creating slides with Reveal.js and Astro

Animotion

• https://github.com/animotionjs/animotion

MIT | 🪄 Create beautiful presentations with Svelte