💾 Archived View for capsule.adrianhesketh.com › 2023 › 01 › 20 › dynamodb-diagrams-from-text captured on 2023-05-24 at 17:47:08. Gemini links have been rewritten to link to archived content
⬅️ Previous capture (2023-01-29)
-=-=-=-=-=-=-
I'm working on a talk where I need to create some single table design diagrams. The sort of thing that you can create with the AWS NoSQL Workbench [0].
However, I need to create a lot of diagrams with different data in them, and it's time consuming to modify the data in that tool, to retake screenshots, and then import them into my slideshow.
I also noticed that the screenshots would get fuzzy when they were resized.
Since I clearly wanted to procrastinate instead of finishing the talk, I created a command line tool that can take `key=value` data and turn it into a DynamoDB single-table design HTML table.
So the input file `example.txt`:
pk=users/1,sk=details,name=Albert Einstein,occupation=Scientist pk=users/2,sk=details,name=Bill Evans,occupation=Musician pk=users/2,sk=discography/1956/new_jazz_conceptions,title=New Jazz Conceptions,year=1956
Can be passed through the tool to create `example.html`:
./dynamotableviz -pk=pk -sk=sk -attrs=occupation -file ./example.txt > example.html
And create a HTML table (I've used a screenshot because this blog is also output to Gemini).
Since it's a command line tool, I can script execution so that all I have to do is update my data files and run my script to update diagrams.
I use slidev [1] for slides now so that I can type slides in Markdown in a standard text editor, and because it has built in syntax highlighting for code.
There was just one small problem. I don't want to have to copy/paste the contents of the output HTML files into the slideshow because it's tedious, error prone, and because the HTML isn't very readable (it's minified).
Slidev doesn't have built-in support for the equivalent of ye olde "Server-Side Include", but you can customise the parser to add it [2]
A slidev preparser receives all of the lines in the file, and can change or inject content, so I wrote one.
To use it, you need to add a `./setup/preparser.ts` file with the following contents into your slideshow project.
import { definePreparserSetup } from '@slidev/types' import * as fs from 'fs' export default definePreparserSetup(() => ({ name: 'include file', transformRawLines: includeFiles }) ) const includeRegexp = /^@include:\s+(.+)$/ async function includeFiles(lines: string[]): Promise<void> { let i = 0 while (i < lines.length) { const l = lines[i] const matches = l.match(includeRegexp) if (!(matches === undefined || matches == null)) { const fileName = matches[1] const contents = fs.readFileSync(fileName, { encoding: 'utf8', flag: 'r' }) lines.splice(i, 1, contents) i += contents.split('\n').length continue } i++ } }
Then you can include each DynamoDB diagram file in the presentation:
--- @include: ./dynamodbtable.html ---
You can get the `dynamotableviz` code or download a pre-compiled binary for your system at [3]
DynamoDB Stream to Lambda Filtering With Go CDK