Add Adventure Flowchart Snippet

[calculuschild]

See reddit post: Adventure Flowchart Suggestion

[Gazook89]

Does anyone have a screenshot of what these look like in the 5e source books that they could share? I'm wondering if it's more like a linear timeline (easy), or a branching flowchart (hard to impossible without something like Mermaid).

[G-Ambatte]

I found this one, which is [reportedly] from Waterdeep: Dragon Heist.

[Gazook89]

"Flowchart"....psh.

[G-Ambatte]

Yeah, less a flowchart and more just a line.

It did get me thinking of an article I read many, many, MANY years ago now, about the design philosophy of the puzzles of The Secret of Monkey Island. The philosophy went that there should be some obstacle (a building guarded by angry dogs, for example) which requires multiple elements to be solved (meat to feed the dogs, found in the town; and herbs to drug the meat, found in the forest).
The players exist in this bubble, where they can attempt to progress either/any/all of the obstacles, but cannot proceed until all of them have been resolved (dogs will eat the undrugged meat but not be calmed, dogs won't eat herbs by themselves).

So the kind of flowchart that I use - because, on reflection, this is often how I design my adventures - would need to have two or three of these boxes detailing the puzzles ("meat" and "herbs"), which lead to a single obstacle block ("guard dogs"), which then repeats.

...I'm going to have to think about how I could formalize that in a brew, now.

[Gazook89]

I made this with divs and flex

A basic timeline like in the source book is easy, but I wouldn't recommend doing anything with complex flowcharts. Something like mermaid would be needed.

[Gazook89]

Came here to share about Mermaid and now see that I already did...but I am still going to drop this link I came across about Mermaid use in Github: https://docs.github.com/en/get-started/writing-on-github/working-with-advanced-formatting/creating-diagrams

[ericscheid]

Integrating Mermaid would be very nice, and (at first glance) should be pretty easy.

[5e-Cleric]

Even though Mermaid will solve real flowcharts, i got a snippet for this, you can see it in this brew

preview:

the ones at the bottom look messed up bc of the zoom level the screenshot was taken at.

[5e-Cleric]

Updating on my last comment, the new syntax for this would be pretty simple:

## Adventure Flowchart

{{flowchart,--width:200px,--spacing:25px

|Chapter 1: <br> A Friend in Need|
|-|
|Volo gives the adventurers a quest and an estate as their reward.|

|Chapter 2: <br> Trollskull Alley|
|-|
|Adventurers settle into their new estate and meet the neighbors.|

|Chapter 3: <br> Fireball|
|-|
|A fireball explodes in Troll-  
skull Alley, setting off an investigation.|

|Chapter 4: <br> Fireball|
|-|
|Adventurers join the race to find and unlock the Vault of Dragons.|
}}

with the following css:

.page .flowchart table{

  width:var(--width);

  display:block;
	min-height: 100px;
  max-width:;
	border: 15px solid transparent;
	border-image: url(https://raw.githack.com/5e-Cleric/Images/main/border%20flowchart.svg) 41 fill round;
	text-align: center;
	margin:var(--spacing) auto;
	position: relative;
  font:inherit;
  
  & thead {
  
    & th {
      font-family: MrEavesRemake;
      font-weight: 800;
      color: var(--HB_Color_HeaderText);
      font-size: .458cm;
      line-height: 1em;
      padding-bottom:10px;
    }
  }
  
  & tbody {
  
    & tr {
      background: none !important;
  
      & td {
        padding: 0;
      }
    }
  }
  
  &:has(+ table):after {
  display:block;
	width:2.5px;
	height:var(--spacing);
	content:'';
	background:#c1c474;
	position:absolute;
	left: 50%;
  bottom:calc((var(--spacing) * -1) - 15px);
	z-index:-3;  
  }
  
}

Outputs:

Pros and Cons of this method

Pros	Cons
Good UX	Tables are not meant for this
Width and spacing fully customizable	can't input text between charts
Only need one curly block

[G-Ambatte]

I made this timeline about nine or ten months ago, to sum up the background of a character for a one shot.

This brew is a simplified version that has only a single content box, that is visually closer to the original timelines.

Syntax:

{{timeline
<!-- TIMELINE START -->

{{event
## Chapter 1. A Friend In Need
:
Volo something something a wizard did it.
}}

{{event
## Chapter 2. And So On...
[...]
}}

<!-- TIMELINE END -->
}}

I don't think it's excessively complicated syntax, especially given how simple almost all of the source flow charts/time lines are.

[Gazook89]

In my opinion, if you add anything like a flowchart, you’d better be ready for the question “how do I split the flow”.

reframing this as a Timeline snippet is a good first step, since there isn’t an expectation of alternate flows.

[G-Ambatte]

a Timeline snippet

When I was preparing some NPCs for my current campaign, I set some of them up with timelines, something like:

NPC: Alyss Stormheart, Cleric of Torm
History: Fourth daughter of a Noble family. Currently chaperoning orphans on a visit to Baldur's Gate.

At Campaign start: In caravan with party
On reaching Baldur's Gate: Leaves to provide for her orphans
Future: Working in taverns in BG

What I realized was that some NPCs - like Alyss here - would have different paths, depending on the party's help (or hindrance). With help, she works in Upper City, a respectable cleaner and sometime cook at the Three Old Kegs.
Without help, she works in Lower City, having received assistance from the Thieves' Guild, fencing stolen items and other black market items.

So an actual forkable flowchart would have been nice.
But it is the pretty much only time I've ever really wanted one.

[G-Ambatte]

Just dropping these here for posterity: these images are from Baldur's Gate: Descent Into Avernus:

A straight, non-forking timeline:

An actual fork in the decision tree:

[G-Ambatte]

From The Guildmaster's Guide to Ravnica:

This looks like an actual flowchart?

[5e-Cleric]

There is another:

From Storm King's Thunder

[Gazook89]

I was just looking around about what kind of control you can get with mermaid.js, considering there is likely going to be a lot of styling questions about it if we include it. I was concerned particularly about the styling of the lines between boxes-- much of the documentation has curved lines. I'm just going to paste this open Issue here for further reading for whoever starts working on this: mermaid-js/mermaid#3260

[5e-Cleric]

Haven't really looked at it yet, what kind of style control does it give? does it allow for dashed and dotted lines? does it give control over the spacing between dashes/dots? can you put symbols in the lines? can you split a line halfway?

[ericscheid]

The styling appears to be determined by CSS, so ... yes.

[dbolack-ab]

So. Simple question. Do we want to solve this with CSS or mermaid?

[calculuschild]

A flowchart like this needs to be able to handle non-linear structure, so it seems like a better fit for Mermaid.

[dbolack-ab]

Okay. I'll beat on the mermaid plugin more.