Diagrams & PPTs

Diagrams and PPTs for All

Diagrams Tools

An overview of a workflow is worth…a lot.

A diagram simply summarizes a lot of information.

Dont complicate your life.

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

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

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

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

• https://github.com/excalidraw/excalidraw-libraries
  • https://libraries.excalidraw.com/?theme=light&sort=default

Excalidraw for D&A

Analytics with Mermaid x Excalidraw

Streamlit PoC

Vibe Coding with Excalidraw Wireframe concept

Look how cool Excalidraw is for Wireframes:

Astro Landing CSR

Vibe Coding an Astro Landing Page for DWY Consulting

DrawIO

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

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

The 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.

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

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

When considering Presentations as a Code, for me SliDevJS is the go to.

1. SliDev

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

https://jalcocert.github.io/JAlcocerT/things-as-a-code/#ppts-as-a-code

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

4. https://markmap.js.org/repl