a web tool for making "one-way" flowcharts for game design

Last update: Sep 21, 2022

Related tags

Overview

Flowmeo

Flowmeo is a web tool to quickly make one-way, "dependency" flowcharts, like you might need for designing an adventure game, or a tech tree, or a skill tree. I made it primarily as an aid for designing video games, but it could be useful for a planning a variety of different kinds of projects.

You can try it out here: https://luvcraft.github.io/flowmeo/

Here's an overview video:

I built it using React (https://reactjs.org/) and Mermaid.js (https://mermaid-js.github.io/mermaid/)

You can download the data from it as either JSON or mmd (mermaid markup), and upload data as JSON. It's designed to be used as a planning tool rather than to generate scripts that you can use directly for game logic, although there's no reason you couldn't use the data for game logic with a suitable system.

Comments

graphviz branch bugs
the graphviz branch is the most promising layout-wise and navigation-wise, however, it has the following bugs:

it loads very very slowly, especially compared to the other branches which load instantly. Is there a way to cache the graph layout?

when you select a node, it is supposed to center the selected node. This works if the scale is 1, but at any other scale it does not correctly center the selected node. Additionally, when you subsequently pan, it jumps to somewhere else before panning

bug help wanted
opened by luvcraft 1
Migrate to a different flowchart library

Mermaid vertical flowcharts get weird if they get too long; nodes get spaced further and further apart, and they get huge empty margins at the top and bottom.

Solution is to either find a different flowchart library, or submit a fix to Mermaid
enhancement help wanted

opened by luvcraft 1
graphviz is very slow

I've switched the master branch to use graphviz for a number of reasons, but unfortunately graphviz is a lot slower than the other graphing options.

I suspect there's some caching we can do to make it faster, but I don't know how.
enhancement help wanted

opened by luvcraft 0
after uploading data, have to refresh page to upload data again
repro steps:

upload data

make a change

upload data again

bug: observe that data isn't replaced by uploaded data

refresh page

upload data again

observe that data is correctly replaced by uploaded data

bug help wanted good first issue
opened by luvcraft 0
Add tutorial
Add some kind of tutorial that shows new users how to:

add / remove parents and children

navigate via the ToC

add new items via the ToC

navigate via the flowchart

navigate via the parent and child lists

export / import json

documentation enhancement
opened by luvcraft 0

a web tool for making "one-way" flowcharts for game design

Related tags

Overview

Flowmeo

Comments

graphviz branch bugs

Migrate to a different flowchart library

graphviz is very slow

after uploading data, have to refresh page to upload data again

Add tutorial

Owner

Grupprojekt för kurserna 'Javascript med Ramverk' och 'Agil Utveckling'

Hemsida för personer i Sverige som kan och vill erbjuda boende till människor på flykt

Kurs-repo för kursen Webbserver och Databaser

Phaser is a fun, free and fast 2D game framework for making HTML5 games for desktop and mobile web browsers, supporting Canvas and WebGL rendering.

Making Tetris (Video Game) by using Phaser (Typescript).

We are a group of videogame URJC students making a brand new Phaser3.0 browser multiplayer game. Come and support us!

Macaron is an open-source design tool to visually create Web Components, which can be used in most Web frameworks, or in vanilla HTML/JavaScript

Tool to automate making Reddit accounts, written in Node.

The PatternFly Design Kit is a Sketch library used for creating PatternFly accurate design mockups

An extension for rating the web and making your browsing experience better than ever.

Card IDE (CIDEr) - Design game cards using HTML/Handlebars, CSS, and tabular data

This tool allows you to draw up plans for facilities from Foxhole's new Inferno update. It takes power and resource needs into account to help you efficiently design your facilities.

NFT Game Starter Project: https://github.com/buildspace/buildspace-nft-game-starter

Conways-game-of-life - A Conway's Game Of Life project using Python

Slime jumper game is a simple game that requires you to escape from the enemies that come your way.

Built for fun and game activities! you can submit scores of players, create a new game, and refresh to see who is on top of the leaderboard. It was built with JavaScript, HTML, and CSS. Thanks to the central LeaderBoard API service all data is preserved

INeedHelp is a Game Boy, Game Boy Advance, and Nintendo DS emulator written in JavaScript and TypeScript.

This is a Tic Tac Toe game built with HTML, CSS, and JavaScript. It is a simple and fun game where two players take turns marking X and O on a 3x3 grid.

Youtube Summarizer is a web-based tool that uses ChatGPT to automatically generate summaries of YouTube videos. It lets you learn key points quickly and easily without having to watch entire lengthy videos. It is enough for users to paste the YouTube video URL into the tool and summarize the video.