Diagrams and Legal Storytelling

A courtroom lawyer only does two things—they ask questions, and they tell stories.

Or so I was taught at my first class on Trial Advocacy. This would turn out to be a kind lie, of course, as a lawyer in the courtroom wears many hats in their role as an advocate. (My personal favorite—promptly stating courtroom objections as required by the evidentiary rules.)

*A depiction of an evidentiary objection as seen in the popular game “Ace Attorney.”*

I'd learn that the adage rings true at its core—an effective lawyer is always a storyteller. Knowing the law isn't enough, an attorney must craft narratives that connect that law to their client's story.

Many lawyers are fantastic at it. (Even while adapting to the virtual courtroom, which is no small feat.) It's not hard to find examples of impassioned attorneys—for example, three masterful orators just debate over the best way to protect student free speech in front of the Supreme Court. It's clear listening to any point of their oral argument that each attorney knows how to craft a narrative about why the law needs to change:

Sometimes the narrative needs to be more complicated, so lawyers use diagrams and demonstrations to explain their argument. I think this is an area where existing technology could be adopted to improve many attorneys’ practice.

The Problem

Consider this exhibit filed by the United States in a recent federal criminal trial:

*Exhibit from United States v. Kail (N.D. Cal. 2018).*

The ultimate theme of this diagram is clear: funds flow from the top of the graph (Netflix, Inc.) to the defendant via 9 intermediary corporations. There are some simple design changes that could be made (for example, the bottom-left label is barely legible on the document, the dates add visual clutter, and some calculations could be done to simplify design), but the piece works overall.

But I'm willing to bet that this document was made by hand and double-checked over a spreadsheet many times before it was eventually submit to the court. It probably took a while as each box was carefully crammed in to fit onto the page-size required for court filings. As someone who has done that copying, pasting, and double-checking, I always wondered if there was a more effective way to make charts like this.

That's where mermaid comes in.

Creating Flowcharts with Mermaid

mermaid is a syntax (computer lingo for "a set of directions to your computer") for generating diagrams. By typing out a set of facts in the mermaid syntax, a user can quickly generate a diagram to be either:

1. Generated live in their document editor of choice (typically requires the download of a plugin); or

2. Typed into the Mermaid Live Editor to create an image that can be downloaded or paste into any document.

For example, here's what a simple flowchart showing relationships between parties "A" through "D" could look like in mermaid (and the resulting image):

graph >
    A --> B
    B --> C & D

The three lines of syntax each contribute to part of the graph:

The first line tells the software that this is a graph that reads left-to-right.
The second line states the fact that A is related to B.
The third line states the fact that B is related to C and D.

One important note: The user doesn’t need to make any design decisions. Other than the few lines describing the flowchart, the software takes care of all decisions relating to the layout, formatting, and design of the graph.

Improving the Netflix Exhibit

Let's return to the Netflix exhibit above. I wanted to know if I could generate a roughly equivalent chart:

1. That has improvements to legibility;

2. Quickly;

3. With little to no required experience in the syntax.

Example 1. Simple Flowchart

We start with a simple design decision. As we are showing how money moved over time, it makes sense to keep the top-to-bottom format:

graph v

Next, we type out the relationship between each party. For clarity, we'll replace each party with a symbol to start: "N" for Netflix; "D1", "D2" for the defendant; and "C1"-"C3" to represent a few intermediaries.

graph v
    N --> C1 & C2 & C3
    C1 & C2 & C3 --> D1
    C2 --> D2

By typing one line of formatting instructions and three lines of legal facts, a simple diagram showing money flows is generated. Breaking the above diagram down line by line:

The first line states that this is a flowchart formatted top-to-bottom (“v”).
The second line states the fact that money moved from Netflix to three corporations (C1-C3).
The third line states the fact that money moved from those three corporations to the defendant entity #1.
The fourth line states the fact that money moved from corporation #2 to defendant entity #2.

Example 2. Adding Amount Labels

The original exhibit also includes labels on the arrows to show amounts of money or shares moved. mermaid includes support for adding text between connectors. Names for entities can be added as well:

graph v
    N["Netflix"] -- $10k --> C1 
    N -- $50k --> C2 & C3
    C1 & C2 & C3 -- $5k --> D1
    C2 -- $40k --> D2

Any time a party appears, it can be given a label (as "Netflix" is in this example.)

A label can be placed on any connector by inserting it between the entities.

With these two features, we can create a chart replicating the Netflix diagram by simply typing out each legal fact for inclusion in mermaid syntax:

graph v
    N["Netflix"] -- $2.2M --> C1["Netenrich"]
    N -- $1.3M --> C2["VistaraIT"]
    N -- $112k --> C3["Netskope"]
    N -- $225k --> C4["Platfora"]
    N -- $1.1M --> C5["SumoLogic"]
    N -- $850k --> C6["Elasticbox"]
    N -- $73k --> C7["Maginatics"]
    N -- $85k --> C8["Numerify"]
    N -- $141k --> C9["Docurated"]

    C1 -- $269k --> D1["Cash to Defendant's Corporation"]
    C1 -- 100,000 options --> D2["Defendant Stock Options"] 

    C2 -- $177k --> D1

    C3 -- $80k --> D1
    C3 -- 71,500 options --> D2

    C4 -- 75,000 options --> D2

    C5 -- 50,000 options --> D2

    C6 -- 10,000 options --> D2

    C7 -- 30,000 options --> D2

    C8 -- 36,000 options --> D2

    C9 -- 78,000 options --> D2

By typing out the relationships between the parties, legal staff can focus on the information they know instead of graphic design choices they may not have experience with.

The numbers and details of the diagram can be adjusted and fact-checked quickly. If additional facts become evident later, new entities and connections can be added without cramming them in onto the page.

Additional Possibilities

I think that the above skills are simple and powerful enough to improve many legal illustrations, and could be adapted to many situations. Adding further features may complicate the issues of training discussed below. But mermaid supports custom formatting, multiple line formats, and styling options that may be helpful in some instances. mermaid also has support for additional diagram types also relevant to legal practice.

Example 4. Adding Flair to the Netflix Diagram

graph v
    style N fill:DarkSlateGray,color:white,stroke-width:4px
    style D1 fill:GoldenRod,color:white,stroke-width:4px
    style D2 fill:GoldenRod,color:white,stroke-width:4px

    [Content from Example 3]

By applying styles to different entities, their relationship can be clearer to read. Styles can be used to add colors or change the design of pieces of the diagram.

Example 5. Timelines

mermaid can also be used to make other types of digrams relevant to legal practice, such as Gantt style timelines.

Consider a case involving a conspiracy by employees to steal intellectual property from a company for a competitor. A simple Gantt chart could be used to clearly demonstrate circumstantial evidence of collusion:

gantt
    title Solicitation Timeline
    axisFormat %Y-%m

    section Alice
    Employed at A    :a1, 2014, 2016-07-08
    Employed at Competitor    :active, e1, 2017, 2020

    section Bob
    Employed at A    :a2, 2016, 2017
    Employed at Competitor    :active, e2, 2017, 2020

    section Tom
    Employed at A    :a3, 2016, 2017
    Employed at Competitor    :active, e3, 2017-03-19, 2020

While flowcharts are written as a relationship between different entities, Gantt charts are described as a series of events on a timeline.

Too Complicated for Lawyers?

Most lawyers are not quick to implement new technologies in their practice, and this diagramming syntax may appear complicated and outside of the realm of legal practice. However, I'd argue that the way that mermaid syntax is designed lends itself well to legal work.

Even when reading a mermaid flowchart prior to the creation of a diagram, they are legible in the way legal experts are already thinking—as a series of relationships between parties. mermaid statements are written with visual arrows and labels that show every legal fact included in the diagram, while the computer takes care of the design and technical decisions.

By spending a small amount of time learning this technology up front, it may be possible to save a great deal of time down the line, as law firms spend no small amount of time prepping demonstrative aids.

What do you think?