capsule.adrianhesketh.com

DynamoDB diagrams from text

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.

dynamotableviz

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.

Using the 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 {
  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

---

Code

You can get the `dynamotableviz` code or download a pre-compiled binary for your system at [3]

More

Next

Previous

Home