O que é o Flowchart Simulator

O Flowchart Simulator desenha fluxogramas, executa esses fluxogramas e gera a documentação deles. ^[1] É um único arquivo HTML, que funciona no navegador, sem instalação nem conta.

Abrir o Flowchart Simulator →

Um fluxograma parado mostra o caminho, mas não mostra se ele funciona. Aqui, o mesmo desenho responde a perguntas como: algum caminho fica sem saída, quanto tempo o processo leva e qual etapa consome esse tempo. Quando ele estiver certo, o app escreve o procedimento por você.

O trabalho acontece em três modos, escolhidos no alto da tela:

Editar

Desenhar, ligar as formas e preencher as propriedades.

Simular

Executar passo a passo, testar cenários e analisar muitas execuções.

Documentar

Ler, imprimir e exportar a documentação gerada a partir do modelo.

Como o app trata os seus dados

• Nada sai do seu computador. O arquivo bloqueia conexões de rede.
• O modelo fica no navegador. Ele é guardado automaticamente e reaparece ao reabrir o app. Para ter uma cópia própria, salve em JSON.
• Modelos não executam código. As expressões passam por um interpretador próprio, então abrir um modelo recebido de outra pessoa não roda JavaScript.

As formas

O app tem 12 formas, baseadas nos símbolos tradicionais de fluxograma. ^{[3] [4]} Cada uma tem um comportamento próprio na simulação.

Seu primeiro fluxograma: um reembolso

Em cerca de 20 minutos, você vai mapear um reembolso de despesas. O funcionário informa o valor. Até 500, o pagamento é direto; acima disso, o gerente decide.

1. Desenhe

1. Se o app abrir com outro fluxograma, use Arquivo ▾ → Novo.
2. Clique em Início, na lista de formas. Dê um duplo clique na forma criada, digite Pedido de reembolso e pressione Enter.
3. Passe o mouse sobre a forma: surgem pontos nas bordas. Arraste o ponto de baixo até uma área vazia e solte. No menu que aparece, escolha Entrada, digite Informar valor e pressione Enter.
4. Continue da mesma forma, seguindo a tabela. Se a tela ficar apertada, clique em Ajustar.

A ordem importa nas decisões: a primeira ligação que sai de uma decisão vira Sim, e a segunda vira Não. Por isso, Valor acima de 500? tem Sim indo para o gerente. Se trocar, corrija no campo Quando do ramo.

Para arrumar o desenho, use Organizar ▾ → Na vertical.

2. Verifique

Clique em uma área vazia e abra a aba Verificar. Ela lista três erros, porque o desenho ainda não diz como decidir nem onde guardar o valor:

• Informar valor precisa de um nome de variável válido.
• As duas decisões não têm condição.

3. Preencha as propriedades

Volte à aba Propriedades, clique em cada forma e preencha os campos. Pressione Tab para confirmar cada um.

Clique em uma área vazia e preencha Título com Reembolso de despesas e Moeda com $. A aba Verificar agora mostra Nenhum problema encontrado.

4. Simule

1. Clique no modo Simular e depois em Passo. O início é executado.
2. Clique em Passo de novo. O painel da direita pergunta Valor da despesa. Digite 800 e clique em Enviar.
3. Clique em ▶ Executar. O fluxo avança sozinho e para em Gerente aprova?, à espera da sua resposta.
4. Clique em Sim. A execução termina com o status Fim: Pago, o custo de $ 3 na barra superior e a mensagem Comprovante de 800 no console.
5. Abra a aba Rastreamento: estão lá as 7 etapas executadas, com os valores e a resposta dada. Experimente Voltar para desfazer etapas.

5. Crie cenários de teste

Abra a aba Cenários de teste. Para cada linha da tabela, clique em + Novo cenário e preencha os campos.

Clique em Executar todos. Os três passam, e a cobertura fica em 100% das etapas e 100% dos ramos: nenhum caminho ficou sem teste.

6. Analise muitas execuções

Abra a aba Análise e clique em Executar análise, mantendo 1000 execuções e a semente 42. Seguindo a mesma ordem deste roteiro, os resultados serão estes:

7. Gere a documentação

Clique no modo Documentar. O procedimento, as regras de decisão, os responsáveis, o dicionário de dados, os caminhos, os cenários e a análise que você acabou de rodar já estão escritos. Clique em HTML para baixar reembolso-de-despesas.html.

Por fim, pressione Ctrl+S para guardar o modelo em um arquivo. O restante do tutorial detalha cada recurso.

A interface

Barra superior

Os três modos, Arquivo ▾, desfazer e refazer, Organizar ▾, idioma, ajuda e tema. Em Simular, traz também o relógio e os controles de execução.

Formas

A paleta. Arraste para o desenho, ou clique para colocar. Só aparece em Editar.

Etapas

Lista numerada das etapas da folha aberta. Clicar centraliza a forma.

Abas de folhas

Abaixo do desenho. Alternam entre as folhas, e + cria outra.

Propriedades

Campos do item selecionado. Sem seleção, mostra os dados da folha e do modelo.

Verificar

Problemas do modelo, com a contagem na própria aba.

Desenhar e organizar

As ligações são roteadas pelo app, que desvia das outras formas. O app recusa ligações sem sentido: uma forma com ela mesma, algo saindo do fim ou entrando no início, uma nota, uma ligação repetida ou uma segunda saída em uma forma que não é decisão.

Propriedades de cada forma

Comuns a quase todas

Texto

O que aparece na forma. A forma cresce se o texto não couber.

Descrição

Explicação para a documentação.

Responsável

Quem executa a etapa. O campo sugere os nomes já usados. Não existe em início e fim.

Duração

Tempo gasto. Aceita número ou expressão, como random(2, 5). Vazio é zero.

Custo

Custo da etapa, com as mesmas regras.

Pausar a simulação aqui

Ponto de parada para o botão ▶ Executar.

Específicas

Sem nada selecionado, o painel mostra o nome da folha e os dados do modelo, como Título, Versão, Objetivo, Escopo, Unidade de tempo e Moeda. Eles abrem a documentação gerada.

Variáveis e expressões

As variáveis são criadas ao receber um valor e valem em todas as folhas. Os nomes aceitam letras, inclusive acentuadas, números e _, e diferenciam maiúsculas de minúsculas.

# instruções: uma por linha, com comentários depois de # ou //
total = price * qty
total += 10
items = [1, 2, 3]
items[0] = 5
label = qty > 1 ? "vários" : "um"

As listas começam na posição 0, e push devolve uma nova lista, então escreva a = push(a, x). Usar uma variável sem valor, dividir por zero ou sair dos limites de uma lista para a simulação com uma mensagem na etapa do erro. Funções desconhecidas e erros de digitação são indicados já na edição.

Na resposta a uma entrada, 800 e 3,5 viram números, true vira verdadeiro, [1, 2] vira lista e o restante vira texto.

Decisões e ramos

A decisão é a única forma com mais de uma saída. O campo Como decide tem três opções:

Por condição

A expressão em Condição escolhe o ramo sozinha. Serve para regras objetivas, como amount > 500.

Por probabilidade

O ramo é sorteado pelas porcentagens. Serve para situações que você só conhece em média, como “85% têm estoque”.

Pergunta na simulação

Você escolhe o ramo na hora. Nos cenários vale a resposta informada e, na análise, o sorteio pelas porcentagens.

Os tipos de ramo

O campo Quando diz quando o ramo é seguido em uma decisão por condição.

Se nenhum ramo atender, a simulação para com um erro. Em porcentagens, um ramo deixado em branco divide igualmente o que faltar para 100%. O Rótulo é opcional: vazio, mostra o nome do tipo, no idioma da interface.

Folhas e subprocessos

Um fluxograma longo fica mais legível se dividido em folhas. A forma Subprocesso chama outra folha; ao chegar ao fim dela, o fluxo volta e segue pela saída do subprocesso.

1. Clique em + nas abas de folhas, ou selecione o subprocesso e use Criar folha.
2. Desenhe a folha com o seu próprio início e pelo menos um fim.
3. No subprocesso, escolha a Folha chamada.

As etapas das folhas seguintes são numeradas com prefixo, como 1.2. A simulação sempre começa pela primeira folha, muda de aba sozinha ao entrar em uma chamada e mostra o caminho em Pilha de chamadas. Abra o exemplo Aprovação de pedidos para ver isso funcionando.

Verificar o modelo

A aba Verificar é atualizada a cada mudança, e clicar em um item leva à forma.

Erros não bloqueiam a simulação: o app avisa, e ela para ao chegar neles. Assim, dá para testar um desenho ainda incompleto.

Simular passo a passo

Clique em uma forma para ligar ou desligar um ponto de parada, marcado por um círculo vermelho. A parada acontece antes de a etapa ser executada. Ao arrastar, a vista se move.

Ao responder a uma entrada, Sortear usa a expressão de Valor na análise. O painel da direita mostra as variáveis, com as que acabaram de mudar em destaque. O painel de baixo pode ter a altura ajustada pela borda superior.

Console

As mensagens de saídas e documentos, com o instante de cada uma.

Rastreamento

Cada etapa executada: tempo, resultado da condição, resposta dada e valores gravados. Mostra as últimas 500 linhas, e clicar em uma centraliza a forma.

Cenários de teste

Um cenário guarda entradas e o resultado esperado, para repetir o teste a cada mudança no fluxograma. Os cenários ficam salvos no modelo.

Entradas

Uma por linha: nome = valor. Um valor simples serve a todas as leituras. Uma lista, como grade = [7, 8, 9], é lida um item por vez.

Resultado esperado

Uma condição por linha. Além das variáveis, valem END (texto do fim alcançado), TIME, COST e STEPS.

Respostas às decisões

Os ramos das decisões perguntadas, na ordem, separados por vírgula, como Sim, Não.

Executar roda só o cenário aberto e Executar todos roda a lista e calcula a cobertura. Assistir reproduz o cenário na animação; ali, o que ele não informa é perguntado a você.

Analisar muitas execuções

A aba Análise repete o fluxograma muitas vezes, até 100.000, sorteando durações, entradas e ramos. É o chamado método de Monte Carlo. ^[5] A mesma semente repete o mesmo resultado, e outra semente mostra a variação.

Para funcionar, cada Entrada precisa de Valor na análise. Sem ele, as execuções param com erro, e a causa aparece listada na própria aba.

Concluídas

Quantas execuções chegaram a um fim. Abaixo de 100%, veja os erros listados.

Tempo médio, Mediana, 95% em até, Máximo

O tempo total das execuções concluídas. Compare a média com a mediana: uma média bem maior indica poucos casos muito demorados.

Custo médio

A soma dos custos por execução.

Histograma

Quantas execuções caíram em cada faixa de tempo. Passe o mouse sobre uma barra para ver os valores.

Como termina

A porcentagem de cada fim.

Caminhos distintos

Os caminhos mais frequentes, descritos pelas respostas às decisões.

Onde o tempo é gasto

Por etapa: Alcance (quantas execuções passam por ela), Visitas/execução, tempo e custo médios e % do tempo. A etapa no topo é a primeira candidata a melhorar.

Mostrar frequências no diagrama

Exibe no desenho a porcentagem de cada etapa, com ligações mais grossas onde passa mais fluxo. Desliga sozinho quando você volta a executar passo a passo.

Para comparar alternativas, mude uma duração ou uma probabilidade, rode de novo com a mesma semente e compare os indicadores.

Gerar a documentação

O modo Documentar escreve o documento a partir do modelo. Em Seções, você escolhe o que entra.

As estimativas usam o valor esperado de cada expressão: random(2, 5) conta como 3,5. Valores que dependem de variáveis aparecem como —.

Formatos

Imprimir / PDF

Abre a impressão do navegador, sem os painéis do app. Escolha salvar em PDF.

HTML

Uma página única, com as imagens embutidas, para enviar ou publicar.

Markdown

Texto com o fluxograma em Mermaid, que plataformas como o GitHub desenham. ^[7] O histograma não entra.

Copiar Markdown

O mesmo conteúdo, na área de transferência.

O documento sai no idioma selecionado no app. Os textos que você digitou não são traduzidos.

Salvar, abrir e exportar

Prompts de IA

A análise de um processo costuma travar em três pontos: colocar o processo no app, conseguir os primeiros números e entender os resultados. Uma IA encurta os três. Ela também erra com segurança: inventa regras, chuta durações e explica números que não leu. Trate a saída como rascunho de um colega apressado. Para escrever prompts melhores, veja o tutorial de prompts.

Antes de colar: processos internos podem conter nomes, valores e regras sigilosas. Troque por dados fictícios e siga a política da sua organização para uso de IA. O app não envia nada para a rede, mas o serviço de IA recebe o que você colar nele.

Troque os trechos entre colchetes e cole na ferramenta de IA que você usa. Os prompts seguem a ordem do trabalho, mas cada um funciona sozinho.

1. Entrevistar antes de desenhar

Faz a IA descobrir o que falta, em vez de supor. É o melhor começo quando o processo ainda está na cabeça das pessoas.

Você é um analista de processos experiente em fluxogramas.
Quero mapear este processo: [descreva em poucas frases].

Antes de propor qualquer fluxograma, me entreviste:
- Faça uma pergunta por vez e espere minha resposta.
- Cubra: o que inicia o processo, quem executa cada etapa, as decisões e seus critérios, as esperas e filas, as exceções e retrabalhos, os dados usados, o que indica o fim, e quanto tempo e custo cada etapa costuma levar.
- Pergunte principalmente sobre o que dá errado, não só sobre o caminho feliz.
- Não invente respostas. Se eu não souber, registre como pendência.

Ao final, entregue: resumo do processo; tabela de etapas (etapa, responsável, duração, custo); decisões com critérios ou probabilidades; variáveis; pendências.

2. Transformar um texto em etapas

Para atas, procedimentos e transcrições. Pede a origem de cada item, o que facilita conferir.

A partir do texto abaixo, extraia a estrutura de um fluxograma.

Texto:
[cole a ata, o procedimento ou a transcrição]

Entregue:
1. Tabela de etapas, na ordem: etapa, responsável, duração citada e o trecho do texto que a sustenta.
2. Decisões: pergunta, critério, ramos e destino de cada ramo.
3. Laços e retrabalhos, com o que faz o fluxo voltar.
4. Lacunas: etapas sem responsável, decisões sem critério, ramos sem destino e contradições.
5. Perguntas para esclarecer cada lacuna.

Não preencha lacunas por conta própria. O que não estiver no texto vai para as perguntas.

3. Gerar o fluxograma em JSON

Transforma o que você reuniu em um arquivo que o app abre, em vez de desenhar forma por forma. Cole o resultado do prompt 1 ou 2 no fim.

Gere um fluxograma em JSON para o Flowchart Simulator, a partir das informações no fim.

Responda só com o JSON, sem comentários e sem cercas de código.

Formato:
- Raiz: "app" (sempre "flowchart-simulator"), "meta" ("title", "purpose", "scope", "timeUnit", "currency") e "sheets". A simulação começa pela primeira folha.
- Folha: "id", "name", "nodes" e "edges".
- Nó: "id", "type", "text" e, se fizer sentido, "resp", "desc", "duration" e "cost" (número ou expressão, em texto).
- "type": start, end, process, decision, input, output, subprocess, delay, document, data, connector ou note.
- start, process e data: "code" com instruções, uma por linha, como total = preco * qtd.
- output e document: "code" com a mensagem, e expressões entre chaves, como Total: {total}.
- input: "var", "prompt" e "sample" (expressão usada na análise; obrigatório).
- subprocess: "target" com o id da folha chamada.
- decision: "mode" é cond (uma condição decide; informe "expr"), prob (sorteio pelas porcentagens) ou ask (uma pessoa escolhe; na análise, vale o sorteio).
- Ligação: "from" e "to". Saindo de decision em cond: "branch" é yes, no, else ou case (com "value"). Em prob ou ask: "prob" em porcentagem, de 0 a 100, e "branch" yes ou no, ou "label" com o nome do ramo.

Regras:
- Cada folha tem um start e pelo menos um end. Só decision tem mais de uma saída. end não tem saída, e note não tem ligações.
- Não informe posições: o app organiza o desenho.
- Expressões aceitam + - * / % ^, comparações, and, or, not, min, max, round, random(a, b), normal(média, desvio), triangular(mín, moda, máx) e chance(p). Use ponto no decimal.
- Prefira distribuições a valores fixos nas durações incertas.
- Toda variável lida precisa ser gravada antes por uma entrada ou instrução.
- Em "desc", diga se os números foram informados por mim ou são hipótese sua. Não invente fontes.

Exemplo do formato:
{
  "app": "flowchart-simulator",
  "meta": {"title": "Reembolso", "timeUnit": "min", "currency": "R$"},
  "sheets": [
    {"id": "main", "name": "Principal", "nodes": [
      {"id": "a", "type": "start", "text": "Pedido recebido"},
      {"id": "b", "type": "input", "text": "Informar valor", "var": "valor", "prompt": "Valor do pedido", "sample": "random(100, 900)", "resp": "Funcionário", "duration": "5", "desc": "hipótese"},
      {"id": "c", "type": "decision", "text": "Valor acima de 500?", "mode": "cond", "expr": "valor > 500"},
      {"id": "d", "type": "decision", "text": "Gerente aprova?", "mode": "prob", "resp": "Gerente", "duration": "30"},
      {"id": "e", "type": "process", "text": "Pagar reembolso", "resp": "Financeiro", "duration": "triangular(5, 10, 20)", "cost": "3"},
      {"id": "f", "type": "end", "text": "Pago"},
      {"id": "g", "type": "end", "text": "Recusado"}
    ], "edges": [
      {"from": "a", "to": "b"},
      {"from": "b", "to": "c"},
      {"from": "c", "to": "d", "branch": "yes"},
      {"from": "c", "to": "e", "branch": "no"},
      {"from": "d", "to": "e", "branch": "yes", "prob": "80"},
      {"from": "d", "to": "g", "branch": "no", "prob": "20"},
      {"from": "e", "to": "f"}
    ]}
  ]
}

Informações:
[cole o resultado do prompt 1 ou 2, ou descreva o processo]

4. Estimar durações, custos e probabilidades

A aba Análise precisa de números. Este prompt deixa claro o que é hipótese e devolve expressões que o app aceita.

Preciso de números iniciais para simular este processo. Não tenho medições.

Processo:
[cole a tabela de etapas, o JSON ou o Markdown da documentação]
Unidade de tempo: [min, h ou dias]

Para cada etapa, decisão e entrada, entregue uma tabela com: mínimo, mais provável, máximo, em que você se baseou, como eu mediria o valor real e sua confiança (baixa, média ou alta).

Regras:
- Tudo é hipótese até eu confirmar. Diga isso claramente.
- Não cite estudos ou números de mercado que você não possa indicar com precisão. Sem base, diga "sem base" e dê só a faixa.
- Separe tempo de trabalho de tempo de espera, e use uma etapa de espera para filas.
- Devolva o texto exato para os campos do app: Duração e Custo como triangular(mín, moda, máx); Valor na análise como expressão; e os ramos de decisão em porcentagem, somando 100.
- Aponte as 3 estimativas que mais podem mudar o resultado e que eu deveria medir primeiro.

5. Revisar o modelo antes de analisar

Cole o JSON salvo ou o Markdown da documentação. É uma segunda opinião sobre a lógica, não uma aprovação.

Revise este fluxograma como um analista de processos experiente, antes de eu simular.

Modelo:
[cole o JSON ou o Markdown da documentação]

Procure:
- Caminhos que faltam: exceções, cancelamentos, recusas e retrabalho.
- Decisões sem critério claro, ou cujos ramos não cobrem todos os casos.
- Laços que podem não terminar.
- Etapas sem responsável, e trocas de responsável sem espera prevista.
- Durações ou probabilidades improváveis, e custos contados duas vezes.
- Variáveis lidas antes de terem valor.
- Tudo que distorce a análise: esperas ausentes ou probabilidades otimistas.

Entregue uma tabela com: etapa, problema, por que importa, sugestão e gravidade (alta, média ou baixa). Não reescreva o modelo. Não confirme que está certo só porque não achou problemas: diga o que não dá para avaliar sem mais dados.

6. Escrever cenários de teste

Devolve os cenários na sintaxe dos campos do app, para repetir o teste a cada mudança.

Proponha cenários de teste para o fluxograma abaixo, na sintaxe do Flowchart Simulator.

Modelo:
[cole o JSON ou o Markdown da documentação]

Para cada cenário, entregue exatamente estes campos:
- Cenário: nome curto.
- Entradas: uma por linha, nome = valor. Uma lista, como nota = [7, 8], é lida um item por vez.
- Respostas às decisões: os ramos das decisões perguntadas (modo ask), na ordem, separados por vírgula.
- Resultado esperado: uma condição por linha. Valem as variáveis, END == "texto do fim", TIME, COST e STEPS.

Regras:
- Cubra todos os ramos de cada decisão, e diga qual ramo cada cenário exercita.
- Inclua valores no limite, como exatamente 500 em uma regra de 500, e casos de erro e de retrabalho.
- Decisões por probabilidade (modo prob) são sempre sorteadas e não aceitam resposta. Se um cenário precisar de um ramo específico, avise que a decisão deve passar para o modo ask, que na análise continua usando as porcentagens.
- Não compare valores exatos de durações sorteadas; use faixas.
- Se o resultado esperado não puder ser deduzido do modelo, marque como pergunta para mim, em vez de supor.

7. Ler os resultados da análise

Depois de rodar a análise, copie a documentação com Copiar Markdown e cole. O histograma não vai no Markdown, mas os indicadores e as tabelas vão.

Ajude-me a interpretar esta análise por simulação. Os números vêm de um modelo, não de medições.

Documentação:
[cole o Markdown gerado pelo app, com a seção de análise]

Entregue:
1. O que os indicadores dizem, em até 5 frases, comparando média, mediana e 95%.
2. As 3 etapas que mais pesam no tempo e no custo, com os números do documento.
3. O que explica a cauda: caminhos, retrabalho ou esperas que geram os casos mais demorados.
4. Como cada fim se distribui, e qual deles preocupa.
5. O que eu não posso concluir: hipóteses frágeis e execuções não concluídas.

Regras:
- Use só números que estão no documento, sem criar novos. Se faltar um dado, diga que falta.
- Separe o que foi calculado da sua interpretação. Não afirme causas no mundo real: apresente como hipótese a confirmar.

8. Planejar as próximas simulações

Transforma o diagnóstico em uma lista curta de testes, para não simular alternativas ao acaso.

Com base nesta análise, planeje as próximas simulações.

Documentação:
[cole o Markdown gerado pelo app, com a seção de análise]
Objetivo: [por exemplo, reduzir o tempo de 95% para menos de 2 dias]
Restrições: [o que não pode mudar]

Proponha até 5 alternativas e, para cada uma, entregue:
- O que muda no modelo: a etapa, o campo (Duração, Custo, Condição ou porcentagem do ramo) e o valor exato.
- O efeito esperado, como hipótese, e o indicador que o confirmaria.
- O que seria preciso para fazer a mudança no mundo real, e o risco.

Regras:
- Cada alternativa muda uma coisa só, para o efeito ser atribuível.
- Comece pelas etapas que mais pesam no documento, e diga quando a etapa pesa porque a estimativa é ruim, e não porque o processo é lento.
- Não prometa ganhos em números: o resultado sai da simulação.

Termine com uma tabela vazia para eu preencher, com a mesma semente em todas as execuções: alternativa, tempo médio, mediana, 95%, custo médio e % de cada fim.

Como abrir o JSON gerado no prompt 3

1. Copie a resposta da IA para um editor de texto e salve com a extensão .json, por exemplo processo.json.
2. No app, use Arquivo ▾ → Abrir (.json)…. Se já houver um fluxograma, confirme a substituição; salve antes o que quiser manter.
3. O arquivo não traz posições, então as formas abrem empilhadas. Use Organizar ▾ → Na vertical e depois Ajustar.
4. Abra a aba Verificar e confira cada item.

Atalhos de teclado

Limitações e solução de problemas

Limitações

• Um caminho por vez: não há etapas em paralelo nem filas disputando recursos. Para filas e gargalos, use o DFD Simulator. ^[2]
• Tempo sem conversão: a Unidade de tempo é só um rótulo. Use a mesma unidade em todo o modelo.
• Limite de etapas: cada execução para em 5.000 etapas, para deter laços sem saída.
• Copiar e colar: vale dentro do app aberto, e as ligações só são copiadas se as duas pontas estiverem selecionadas.
• Navegadores: o app foi testado no Chromium. O uso em outros navegadores e em telas de toque não foi testado.

Problemas comuns

Revisão rápida

Tente responder antes de abrir cada pergunta.

Referências

1. Giovani Perotto Mesquita, “Flowchart Simulator”, aplicativo em um único arquivo HTML, giovanipm.github.io/flowchart-simulator.html.
2. Giovani Perotto Mesquita, “DFD Simulator: tutorial”, tutorial deste site, giovanipm.github.io/DFDSimulator.html.
3. ISO, ISO 5807:1985: Information processing — Documentation symbols and conventions for data, program and system flowcharts, program network charts and system resources charts, norma, 1985.
4. Wikipedia (em inglês), “Flowchart”, acesso em 30/10/2026, en.wikipedia.org/wiki/Flowchart.
5. Wikipedia (em inglês), “Monte Carlo method”, acesso em 30/10/2026, en.wikipedia.org/wiki/Monte_Carlo_method.
6. Thomas J. McCabe, “A Complexity Measure”, IEEE Transactions on Software Engineering, SE-2(4), 1976, p. 308–320.
7. Mermaid, “Flowcharts Syntax”, documentação, acesso em 30/10/2026, mermaid.js.org/syntax/flowchart.html.

What Flowchart Simulator is

Flowchart Simulator draws flowcharts, runs them and generates their documentation. ^[1] It is a single HTML file that works in the browser, with no installation and no account.

Open Flowchart Simulator →

A static flowchart shows the path, but not whether it works. Here, the same drawing answers questions such as: does any path lead nowhere, how long does the process take, and which step takes up that time. Once it is right, the app writes the procedure for you.

The work happens in three modes, chosen at the top of the screen:

Edit

Drawing, connecting shapes and filling in properties.

Simulate

Running step by step, testing scenarios and analyzing many runs.

Document

Reading, printing and exporting the documentation generated from the model.

How the app treats your data

• Nothing leaves your computer. The file blocks network connections.
• The model stays in the browser. It is kept automatically and comes back when you reopen the app. For a copy of your own, save it as JSON.
• Models do not run code. Expressions go through a dedicated interpreter, so opening a model from someone else does not run JavaScript.

The shapes

The app has 12 shapes, based on the traditional flowchart symbols. ^{[3] [4]} Each one has its own behavior in the simulation.

Your first flowchart: a refund

In about 20 minutes, you will map an expense refund. The employee enters the amount. Up to 500, payment is direct; above that, the manager decides.

1. Draw

1. If the app opens with another flowchart, use File ▾ → New.
2. Click Start in the list of shapes. Double-click the new shape, type Refund request and press Enter.
3. Hover over the shape: dots appear on its edges. Drag the bottom dot to an empty area and release. In the menu that appears, choose Input, type Enter amount and press Enter.
4. Continue the same way, following the table. If the screen gets tight, click Fit.

Order matters in decisions: the first connection leaving a decision becomes Yes, and the second becomes No. That is why Amount above 500? has Yes going to the manager. If you swap them, fix it in the branch's When field.

To tidy up the drawing, use Arrange ▾ → Vertically.

2. Check

Click an empty area and open the Check tab. It lists three errors, because the drawing does not yet say how to decide or where to store the amount:

• Enter amount needs a valid variable name.
• The two decisions have no condition.

3. Fill in the properties

Go back to the Properties tab, click each shape and fill in the fields. Press Tab to confirm each one.

Click an empty area and fill in Title with Expense refund and Currency with $. The Check tab now shows No problems found.

4. Simulate

1. Click the Simulate mode and then Step. The start runs.
2. Click Step again. The right panel asks Expense amount. Type 800 and click Send.
3. Click ▶ Run. The flow moves on by itself and stops at Manager approves?, waiting for your answer.
4. Click Yes. The run ends with the status End: Paid, a cost of $ 3 in the top bar and the message Receipt for 800 in the console.
5. Open the Trace tab: the 7 steps run are there, with the values and the answer given. Try Back to undo steps.

5. Create test scenarios

Open the Test scenarios tab. For each row of the table, click + New scenario and fill in the fields.

Click Run all. All three pass, and coverage reaches 100% of steps and 100% of branches: no path was left untested.

6. Analyze many runs

Open the Analysis tab and click Run analysis, keeping 1000 runs and seed 42. Following the same order as this walkthrough, these are the results:

7. Generate the documentation

Click the Document mode. The procedure, decision rules, owners, data dictionary, paths, scenarios and the analysis you just ran are already written. Click HTML to download expense-refund.html.

Finally, press Ctrl+S to keep the model in a file. The rest of this tutorial details each feature.

The interface

Top bar

The three modes, File ▾, undo and redo, Arrange ▾, language, help and theme. In Simulate, it also has the clock and the run controls.

Shapes

The palette. Drag onto the drawing, or click to place. It appears only in Edit.

Steps

Numbered list of the steps on the open sheet. Clicking centers the shape.

Sheet tabs

Below the drawing. They switch between sheets, and + creates another.

Properties

Fields of the selected item. With no selection, it shows the sheet and model data.

Check

Problems in the model, with the count on the tab itself.

Drawing and arranging

Connections are routed by the app, which avoids other shapes. The app refuses connections that make no sense: a shape with itself, anything leaving an end or entering a start, a note, a repeated connection, or a second way out of a shape that is not a decision.

Properties of each shape

Common to almost all

Text

What appears on the shape. The shape grows if the text does not fit.

Description

An explanation for the documentation.

Owner

Who carries out the step. The field suggests the names already used. It does not exist on start and end.

Duration

Time spent. Accepts a number or expression, such as random(2, 5). Empty means zero.

Cost

The cost of the step, under the same rules.

Pause the simulation here

A stopping point for the ▶ Run button.

Specific

With nothing selected, the panel shows the sheet name and the model data, such as Title, Version, Purpose, Scope, Time unit and Currency. They open the generated documentation.

Variables and expressions

Variables are created when they receive a value and apply across all sheets. Names accept letters, including accented ones, numbers and _, and they are case-sensitive.

# instructions: one per line, with comments after # or //
total = price * qty
total += 10
items = [1, 2, 3]
items[0] = 5
label = qty > 1 ? "several" : "one"

Lists start at position 0, and push returns a new list, so write a = push(a, x). Using a variable with no value, dividing by zero or going out of a list's bounds stops the simulation with a message at the failing step. Unknown functions and typing errors are flagged during editing.

When answering an input, 800 and 3.5 become numbers, true becomes true, [1, 2] becomes a list and the rest becomes text.

Decisions and branches

The decision is the only shape with more than one way out. The How it decides field has three options:

By condition

The expression in Condition picks the branch by itself. It suits objective rules, such as amount > 500.

By probability

The branch is drawn by the percentages. It suits situations you only know on average, such as “85% have stock”.

Asks in the simulation

You pick the branch on the spot. In scenarios the given answer applies and, in the analysis, the draw by percentages.

The kinds of branch

The When field says when the branch is followed in a decision by condition.

If no branch applies, the simulation stops with an error. In percentages, a branch left blank shares equally what is missing to reach 100%. The Label is optional: when empty, it shows the name of the kind, in the interface language.

Sheets and subprocesses

A long flowchart is easier to read when split into sheets. The Subprocess shape calls another sheet; on reaching its end, the flow comes back and continues through the subprocess's way out.

1. Click + on the sheet tabs, or select the subprocess and use Create sheet.
2. Draw the sheet with its own start and at least one end.
3. In the subprocess, choose the Called sheet.

Steps on the following sheets are numbered with a prefix, such as 1.2. The simulation always starts on the first sheet, switches tabs by itself on entering a call and shows the path under Call stack. Open the Order approval sample to see this working.

Checking the model

The Check tab updates with each change, and clicking an item takes you to the shape.

Errors do not block the simulation: the app warns you, and it stops on reaching them. That lets you test a drawing that is still incomplete.

Simulating step by step

Click a shape to turn a stopping point on or off, marked by a red circle. The stop happens before the step runs. Dragging moves the view.

When answering an input, Draw uses the Value in the analysis expression. The right panel shows the variables, with those that just changed highlighted. The height of the bottom panel can be adjusted by its top edge.

Console

The messages from outputs and documents, each with its time.

Trace

Each step run: time, condition result, answer given and values written. It shows the last 500 lines, and clicking one centers the shape.

Test scenarios

A scenario stores inputs and the expected result, so you can repeat the test after each change to the flowchart. Scenarios are saved in the model.

Inputs

One per line: name = value. A simple value serves all reads. A list, such as grade = [7, 8, 9], is read one item at a time.

Expected result

One condition per line. Besides variables, END (text of the end reached), TIME, COST and STEPS also work.

Answers to decisions

The branches of the asked decisions, in order, separated by commas, such as Yes, No.

Run runs only the open scenario and Run all runs the list and computes the coverage. Watch plays the scenario in the animation; there, whatever it does not provide is asked of you.

Analyzing many runs

The Analysis tab repeats the flowchart many times, up to 100,000, drawing durations, inputs and branches. This is the so-called Monte Carlo method. ^[5] The same seed repeats the same result, and another seed shows the variation.

For this to work, each Input needs a Value in the analysis. Without it, runs stop with an error, and the cause is listed on the tab itself.

Completed

How many runs reached an end. Below 100%, see the errors listed.

Mean time, Median, 95% within, Maximum

The total time of the completed runs. Compare the mean with the median: a much higher mean indicates a few very slow cases.

Mean cost

The sum of the costs per run.

Histogram

How many runs fell in each time range. Hover over a bar to see the values.

How it ends

The percentage of each end.

Distinct paths

The most frequent paths, described by the answers to the decisions.

Where the time goes

By step: Reach (how many runs go through it), Visits/run, average time and cost, and % of time. The step at the top is the first candidate for improvement.

Show frequencies on the diagram

Shows the percentage of each step on the drawing, with thicker connections where more flow passes. It turns off by itself when you go back to running step by step.

To compare alternatives, change a duration or a probability, run again with the same seed and compare the indicators.

Generating the documentation

The Document mode writes the document from the model. Under Sections, you choose what goes in.

Estimates use the expected value of each expression: random(2, 5) counts as 3.5. Values that depend on variables show as —.

Formats

Print / PDF

Opens the browser's print dialog, without the app's panels. Choose to save as PDF.

HTML

A single page, with embedded images, to send or publish.

Markdown

Text with the flowchart in Mermaid, which platforms such as GitHub draw. ^[7] The histogram is left out.

Copy Markdown

The same content, on the clipboard.

The document comes out in the language selected in the app. The text you typed is not translated.

Saving, opening and exporting

AI prompts

Process analysis usually stalls at three points: getting the process into the app, finding the first numbers and understanding the results. An AI shortens all three. It also makes confident mistakes: it invents rules, guesses durations and explains numbers it has not read. Treat its output as a draft from a colleague in a hurry. To write better prompts, see the prompt tutorial.

Before pasting: internal processes may contain confidential names, figures and rules. Replace them with made-up data and follow your organization's AI policy. The app sends nothing over the network, but the AI service receives whatever you paste into it.

Replace the parts in brackets and paste into the AI tool you use. The prompts follow the order of the work, but each one works on its own.

1. Interview before drawing

Makes the AI find out what is missing instead of assuming. It is the best start when the process is still in people's heads.

You are a process analyst experienced with flowcharts.
I want to map this process: [describe in a few sentences].

Before proposing any flowchart, interview me:
- Ask one question at a time and wait for my answer.
- Cover: what starts the process, who runs each step, the decisions and their criteria, the waits and queues, the exceptions and rework, the data used, what marks the end, and how much time and cost each step usually takes.
- Ask mainly about what goes wrong, not just the happy path.
- Do not invent answers. If I do not know, record it as an open item.

At the end, deliver: process summary; table of steps (step, owner, duration, cost); decisions with criteria or probabilities; variables; open items.

2. Turn a text into steps

For minutes, procedures and transcripts. It asks for the source of each item, which makes checking easier.

From the text below, extract the structure of a flowchart.

Text:
[paste the minutes, procedure or transcript]

Deliver:
1. Table of steps, in order: step, owner, duration mentioned and the passage of the text that supports it.
2. Decisions: question, criterion, branches and the target of each branch.
3. Loops and rework, with what makes the flow go back.
4. Gaps: steps with no owner, decisions with no criterion, branches with no target and contradictions.
5. Questions to clarify each gap.

Do not fill gaps on your own. Whatever is not in the text goes to the questions.

3. Generate the flowchart as JSON

Turns what you gathered into a file the app opens, instead of drawing shape by shape. Paste the result of prompt 1 or 2 at the end.

Generate a flowchart as JSON for Flowchart Simulator, from the information at the end.

Answer with the JSON only, no comments and no code fences.

Format:
- Root: "app" (always "flowchart-simulator"), "meta" ("title", "purpose", "scope", "timeUnit", "currency") and "sheets". The simulation starts on the first sheet.
- Sheet: "id", "name", "nodes" and "edges".
- Node: "id", "type", "text" and, where it makes sense, "resp", "desc", "duration" and "cost" (a number or expression, as text).
- "type": start, end, process, decision, input, output, subprocess, delay, document, data, connector or note.
- start, process and data: "code" with instructions, one per line, such as total = price * qty.
- output and document: "code" with the message, with expressions in braces, such as Total: {total}.
- input: "var", "prompt" and "sample" (expression used in the analysis; required).
- subprocess: "target" with the id of the called sheet.
- decision: "mode" is cond (a condition decides; provide "expr"), prob (drawn by the percentages) or ask (a person chooses; in the analysis, the draw applies).
- Connection: "from" and "to". Leaving a decision in cond: "branch" is yes, no, else or case (with "value"). In prob or ask: "prob" as a percentage, from 0 to 100, and "branch" yes or no, or "label" with the branch name.

Rules:
- Each sheet has one start and at least one end. Only a decision has more than one way out. An end has no way out, and a note has no connections.
- Do not provide positions: the app arranges the drawing.
- Expressions accept + - * / % ^, comparisons, and, or, not, min, max, round, random(a, b), normal(mean, sd), triangular(min, mode, max) and chance(p). Use a point for decimals.
- Prefer distributions to fixed values for uncertain durations.
- Every variable read must first be written by an input or instruction.
- In "desc", say whether the numbers came from me or are your assumption. Do not invent sources.

Format example:
{
  "app": "flowchart-simulator",
  "meta": {"title": "Reimbursement", "timeUnit": "min", "currency": "$"},
  "sheets": [
    {"id": "main", "name": "Main", "nodes": [
      {"id": "a", "type": "start", "text": "Request received"},
      {"id": "b", "type": "input", "text": "Enter amount", "var": "amount", "prompt": "Request amount", "sample": "random(100, 900)", "resp": "Employee", "duration": "5", "desc": "assumption"},
      {"id": "c", "type": "decision", "text": "Amount above 500?", "mode": "cond", "expr": "amount > 500"},
      {"id": "d", "type": "decision", "text": "Manager approves?", "mode": "prob", "resp": "Manager", "duration": "30"},
      {"id": "e", "type": "process", "text": "Pay reimbursement", "resp": "Finance", "duration": "triangular(5, 10, 20)", "cost": "3"},
      {"id": "f", "type": "end", "text": "Paid"},
      {"id": "g", "type": "end", "text": "Refused"}
    ], "edges": [
      {"from": "a", "to": "b"},
      {"from": "b", "to": "c"},
      {"from": "c", "to": "d", "branch": "yes"},
      {"from": "c", "to": "e", "branch": "no"},
      {"from": "d", "to": "e", "branch": "yes", "prob": "80"},
      {"from": "d", "to": "g", "branch": "no", "prob": "20"},
      {"from": "e", "to": "f"}
    ]}
  ]
}

Information:
[paste the result of prompt 1 or 2, or describe the process]

4. Estimate durations, costs and probabilities

The Analysis tab needs numbers. This prompt makes clear what is an assumption and returns expressions the app accepts.

I need initial numbers to simulate this process. I have no measurements.

Process:
[paste the table of steps, the JSON or the documentation Markdown]
Time unit: [min, h or days]

For each step, decision and input, deliver a table with: minimum, most likely, maximum, what you based it on, how I would measure the real value and your confidence (low, medium or high).

Rules:
- Everything is an assumption until I confirm it. Say so clearly.
- Do not cite studies or market figures you cannot point to precisely. With no basis, say "no basis" and give only the range.
- Separate working time from waiting time, and use a wait step for queues.
- Return the exact text for the app's fields: Duration and Cost as triangular(min, mode, max); Value in the analysis as an expression; and decision branches as percentages adding up to 100.
- Point out the 3 estimates most likely to change the result, which I should measure first.

5. Review the model before analyzing

Paste the saved JSON or the documentation Markdown. It is a second opinion on the logic, not an approval.

Review this flowchart as an experienced process analyst, before I simulate it.

Model:
[paste the JSON or the documentation Markdown]

Look for:
- Missing paths: exceptions, cancellations, refusals and rework.
- Decisions with no clear criterion, or whose branches do not cover every case.
- Loops that may not end.
- Steps with no owner, and handoffs with no expected wait.
- Unlikely durations or probabilities, and costs counted twice.
- Variables read before they have a value.
- Anything that distorts the analysis: missing waits or optimistic probabilities.

Deliver a table with: step, problem, why it matters, suggestion and severity (high, medium or low). Do not rewrite the model. Do not confirm it is right just because you found no problems: say what cannot be assessed without more data.

6. Write test scenarios

Returns the scenarios in the syntax of the app's fields, so you can repeat the test after each change.

Propose test scenarios for the flowchart below, in Flowchart Simulator syntax.

Model:
[paste the JSON or the documentation Markdown]

For each scenario, deliver exactly these fields:
- Scenario: a short name.
- Inputs: one per line, name = value. A list, such as grade = [7, 8], is read one item at a time.
- Answers to decisions: the branches of the asked decisions (ask mode), in order, separated by commas.
- Expected result: one condition per line. Variables, END == "end text", TIME, COST and STEPS work.

Rules:
- Cover every branch of each decision, and say which branch each scenario exercises.
- Include boundary values, such as exactly 500 in a rule about 500, and error and rework cases.
- Probability decisions (prob mode) are always drawn and take no answer. If a scenario needs a specific branch, say the decision must move to ask mode, which still uses the percentages in the analysis.
- Do not compare exact values of drawn durations; use ranges.
- If the expected result cannot be deduced from the model, mark it as a question for me instead of assuming.

7. Read the analysis results

After running the analysis, copy the documentation with Copy Markdown and paste it. The histogram does not go in the Markdown, but the indicators and tables do.

Help me interpret this simulation analysis. The numbers come from a model, not measurements.

Documentation:
[paste the Markdown generated by the app, with the analysis section]

Deliver:
1. What the indicators say, in up to 5 sentences, comparing mean, median and 95%.
2. The 3 steps that weigh most on time and cost, with the numbers in the document.
3. What explains the tail: paths, rework or waits behind the slowest cases.
4. How each end is distributed, and which one is a concern.
5. What I cannot conclude: weak assumptions and runs not completed.

Rules:
- Use only numbers in the document, and create no new ones. If a figure is missing, say so.
- Separate what was calculated from your interpretation. Do not assert real-world causes: present them as hypotheses to confirm.

8. Plan the next simulations

Turns the diagnosis into a short list of tests, so you do not simulate alternatives at random.

Based on this analysis, plan the next simulations.

Documentation:
[paste the Markdown generated by the app, with the analysis section]
Objective: [for example, reduce the 95% time to under 2 days]
Constraints: [what cannot change]

Propose up to 5 alternatives and, for each one, deliver:
- What changes in the model: the step, the field (Duration, Cost, Condition or branch percentage) and the exact value.
- The expected effect, as a hypothesis, and the indicator that would confirm it.
- What the change would take in the real world, and the risk.

Rules:
- Each alternative changes one thing only, so the effect can be attributed.
- Start with the steps that weigh most in the document, and say when a step weighs because the estimate is poor rather than because the process is slow.
- Do not promise gains in numbers: the result comes from the simulation.

End with an empty table for me to fill in, using the same seed on every run: alternative, mean time, median, 95%, mean cost and % of each end.

How to open the JSON from prompt 3

1. Copy the AI's answer into a text editor and save it with the .json extension, for example process.json.
2. In the app, use File ▾ → Open (.json)…. If there is already a flowchart, confirm the replacement; save first whatever you want to keep.
3. The file has no positions, so the shapes open stacked. Use Arrange ▾ → Vertically and then Fit.
4. Open the Check tab and review each item.

Keyboard shortcuts

Limitations and troubleshooting

Limitations

• One path at a time: there are no parallel steps or queues competing for resources. For queues and bottlenecks, use DFD Simulator. ^[2]
• Time without conversion: Time unit is only a label. Use the same unit throughout the model.
• Step limit: each run stops at 5,000 steps, to halt loops with no exit.
• Copy and paste: it works within the open app, and connections are copied only if both ends are selected.
• Browsers: the app was tested on Chromium. Use on other browsers and on touch screens has not been tested.

Common problems

Quick review

Try to answer before opening each question.

References

1. Giovani Perotto Mesquita, “Flowchart Simulator”, single-file HTML app, giovanipm.github.io/flowchart-simulator.html.
2. Giovani Perotto Mesquita, “DFD Simulator: tutorial”, tutorial on this site, giovanipm.github.io/DFDSimulator.html.
3. ISO, ISO 5807:1985: Information processing — Documentation symbols and conventions for data, program and system flowcharts, program network charts and system resources charts, standard, 1985.
4. Wikipedia, “Flowchart”, accessed 30 October 2026, en.wikipedia.org/wiki/Flowchart.
5. Wikipedia, “Monte Carlo method”, accessed 30 October 2026, en.wikipedia.org/wiki/Monte_Carlo_method.
6. Thomas J. McCabe, “A Complexity Measure”, IEEE Transactions on Software Engineering, SE-2(4), 1976, pp. 308–320.
7. Mermaid, “Flowcharts Syntax”, documentation, accessed 30 October 2026, mermaid.js.org/syntax/flowchart.html.

Che cos'è Flowchart Simulator

Flowchart Simulator disegna diagrammi di flusso, li esegue e ne genera la documentazione. ^[1] È un unico file HTML che funziona nel browser, senza installazione né account.

Apri Flowchart Simulator →

Un diagramma fermo mostra il percorso, ma non se funziona. Qui lo stesso disegno risponde a domande come: c'è un percorso senza uscita, quanto dura il processo e quale passo consuma quel tempo. Quando è corretto, l'app scrive la procedura per te.

Il lavoro si svolge in tre modalità, scelte in alto nella schermata:

Modifica

Disegnare, collegare le forme e compilare le proprietà.

Simula

Eseguire passo per passo, provare scenari e analizzare molte esecuzioni.

Documenta

Leggere, stampare ed esportare la documentazione generata dal modello.

Come l'app tratta i tuoi dati

• Nulla esce dal tuo computer. Il file blocca le connessioni di rete.
• Il modello resta nel browser. Viene salvato automaticamente e ricompare alla riapertura dell'app. Per averne una copia tua, salvalo in JSON.
• I modelli non eseguono codice. Le espressioni passano per un interprete dedicato, quindi aprire un modello ricevuto da altri non esegue JavaScript.

Le forme

L'app ha 12 forme, basate sui simboli tradizionali dei diagrammi di flusso. ^{[3] [4]} Ognuna ha un comportamento proprio nella simulazione.

Il tuo primo diagramma: un rimborso

In circa 20 minuti, mapperai un rimborso spese. Il dipendente inserisce l'importo. Fino a 500, il pagamento è diretto; oltre, decide il responsabile.

1. Disegna

1. Se l'app si apre con un altro diagramma, usa File ▾ → Nuovo.
2. Fai clic su Inizio nell'elenco delle forme. Fai doppio clic sulla forma creata, digita Richiesta di rimborso e premi Invio.
3. Passa il mouse sulla forma: compaiono dei punti sui bordi. Trascina il punto in basso su un'area vuota e rilascia. Nel menu che appare, scegli Input, digita Inserire importo e premi Invio.
4. Continua allo stesso modo, seguendo la tabella. Se lo schermo diventa stretto, fai clic su Adatta.

Nelle decisioni l'ordine conta: il primo collegamento che esce da una decisione diventa Sì, e il secondo No. Per questo Importo oltre 500? ha Sì verso il responsabile. Se li inverti, correggi nel campo Quando del ramo.

Per ordinare il disegno, usa Disponi ▾ → In verticale.

2. Verifica

Fai clic su un'area vuota e apri la scheda Verifica. Elenca tre errori, perché il disegno non dice ancora come decidere né dove salvare l'importo:

• Inserire importo richiede un nome di variabile valido.
• Le due decisioni non hanno una condizione.

3. Compila le proprietà

Torna alla scheda Proprietà, fai clic su ogni forma e compila i campi. Premi Tab per confermare ciascuno.

Fai clic su un'area vuota e compila Titolo con Rimborso spese e Valuta con $. La scheda Verifica ora mostra Nessun problema trovato.

4. Simula

1. Fai clic sulla modalità Simula e poi su Passo. L'inizio viene eseguito.
2. Fai di nuovo clic su Passo. Il pannello a destra chiede Importo della spesa. Digita 800 e fai clic su Invia.
3. Fai clic su ▶ Esegui. Il flusso avanza da solo e si ferma su Il responsabile approva?, in attesa della tua risposta.
4. Fai clic su Sì. L'esecuzione termina con lo stato Fine: Pagato, il costo di $ 3 nella barra superiore e il messaggio Ricevuta di 800 nella console.
5. Apri la scheda Traccia: ci sono i 7 passi eseguiti, con i valori e la risposta data. Prova Indietro per annullare i passi.

5. Crea scenari di test

Apri la scheda Scenari di test. Per ogni riga della tabella, fai clic su + Nuovo scenario e compila i campi.

Fai clic su Esegui tutti. Tutti e tre vengono superati, e la copertura arriva al 100% dei passi e al 100% dei rami: nessun percorso è rimasto senza test.

6. Analizza molte esecuzioni

Apri la scheda Analisi e fai clic su Esegui analisi, mantenendo 1000 esecuzioni e il seme 42. Seguendo lo stesso ordine di questo percorso, i risultati sono questi:

7. Genera la documentazione

Fai clic sulla modalità Documenta. La procedura, le regole di decisione, i responsabili, il dizionario dei dati, i percorsi, gli scenari e l'analisi appena eseguita sono già scritti. Fai clic su HTML per scaricare rimborso-spese.html.

Infine, premi Ctrl+S per conservare il modello in un file. Il resto del tutorial descrive ogni funzione.

L'interfaccia

Barra superiore

Le tre modalità, File ▾, annulla e ripeti, Disponi ▾, lingua, guida e tema. In Simula, include anche l'orologio e i comandi di esecuzione.

Forme

La tavolozza. Trascina sul disegno, o fai clic per collocare. Appare solo in Modifica.

Passi

Elenco numerato dei passi del foglio aperto. Il clic centra la forma.

Schede dei fogli

Sotto il disegno. Passano da un foglio all'altro, e + ne crea un altro.

Proprietà

Campi dell'elemento selezionato. Senza selezione, mostra i dati del foglio e del modello.

Verifica

Problemi del modello, con il conteggio sulla scheda stessa.

Disegnare e ordinare

I collegamenti sono instradati dall'app, che evita le altre forme. L'app rifiuta i collegamenti senza senso: una forma con se stessa, qualcosa che esce dalla fine o entra nell'inizio, una nota, un collegamento ripetuto o una seconda uscita da una forma che non è una decisione.

Proprietà di ogni forma

Comuni a quasi tutte

Testo

Ciò che appare sulla forma. La forma cresce se il testo non ci sta.

Descrizione

Spiegazione per la documentazione.

Responsabile

Chi esegue il passo. Il campo suggerisce i nomi già usati. Non esiste in inizio e fine.

Durata

Tempo impiegato. Accetta un numero o un'espressione, come random(2, 5). Vuoto vale zero.

Costo

Costo del passo, con le stesse regole.

Sospendi la simulazione qui

Punto di arresto per il pulsante ▶ Esegui.

Specifiche

Senza selezione, il pannello mostra il nome del foglio e i dati del modello, come Titolo, Versione, Obiettivo, Ambito, Unità di tempo e Valuta. Aprono la documentazione generata.

Variabili ed espressioni

Le variabili nascono quando ricevono un valore e valgono in tutti i fogli. I nomi accettano lettere, anche accentate, numeri e _, e distinguono maiuscole e minuscole.

# istruzioni: una per riga, con commenti dopo # o //
total = price * qty
total += 10
items = [1, 2, 3]
items[0] = 5
label = qty > 1 ? "diversi" : "uno"

Gli elenchi partono dalla posizione 0, e push restituisce un nuovo elenco, quindi scrivi a = push(a, x). Usare una variabile senza valore, dividere per zero o uscire dai limiti di un elenco ferma la simulazione con un messaggio sul passo dell'errore. Funzioni sconosciute ed errori di battitura sono segnalati già durante la modifica.

Nella risposta a un input, 800 e 3,5 diventano numeri, true diventa vero, [1, 2] diventa un elenco e il resto diventa testo.

Decisioni e rami

La decisione è l'unica forma con più di un'uscita. Il campo Come decide ha tre opzioni:

Per condizione

L'espressione in Condizione sceglie il ramo da sola. È adatta a regole oggettive, come amount > 500.

Per probabilità

Il ramo viene estratto in base alle percentuali. È adatta a situazioni che conosci solo in media, come “l'85% è disponibile”.

Chiede nella simulazione

Scegli tu il ramo al momento. Negli scenari vale la risposta indicata e, nell'analisi, l'estrazione in base alle percentuali.

I tipi di ramo

Il campo Quando dice quando il ramo viene seguito in una decisione per condizione.

Se nessun ramo corrisponde, la simulazione si ferma con un errore. Nelle percentuali, un ramo lasciato vuoto divide in parti uguali ciò che manca per arrivare a 100%. L'Etichetta è facoltativa: se vuota, mostra il nome del tipo, nella lingua dell'interfaccia.

Fogli e sottoprocessi

Un diagramma lungo è più leggibile se diviso in fogli. La forma Sottoprocesso richiama un altro foglio; arrivato alla sua fine, il flusso torna e prosegue dall'uscita del sottoprocesso.

1. Fai clic su + nelle schede dei fogli, oppure seleziona il sottoprocesso e usa Crea foglio.
2. Disegna il foglio con il proprio inizio e almeno una fine.
3. Nel sottoprocesso, scegli il Foglio richiamato.

I passi dei fogli successivi sono numerati con un prefisso, come 1.2. La simulazione parte sempre dal primo foglio, cambia scheda da sola quando entra in una chiamata e mostra il percorso in Stack delle chiamate. Apri l'esempio Approvazione ordini per vederlo in funzione.

Verificare il modello

La scheda Verifica si aggiorna a ogni modifica, e facendo clic su una voce si arriva alla forma.

Gli errori non bloccano la simulazione: l'app avvisa, e la simulazione si ferma quando li raggiunge. Così puoi provare un disegno ancora incompleto.

Simulare passo per passo

Fai clic su una forma per attivare o disattivare un punto di arresto, indicato da un cerchio rosso. L'arresto avviene prima che il passo sia eseguito. Trascinando, si sposta la vista.

Nella risposta a un input, Estrai usa l'espressione di Valore nell'analisi. Il pannello a destra mostra le variabili, con quelle appena cambiate evidenziate. L'altezza del pannello in basso si regola dal suo bordo superiore.

Console

I messaggi di output e documenti, ciascuno con il proprio istante.

Traccia

Ogni passo eseguito: tempo, risultato della condizione, risposta data e valori scritti. Mostra le ultime 500 righe, e il clic su una centra la forma.

Scenari di test

Uno scenario salva input e risultato atteso, per ripetere il test a ogni modifica del diagramma. Gli scenari restano salvati nel modello.

Input

Uno per riga: nome = valore. Un valore semplice serve a tutte le letture. Un elenco, come grade = [7, 8, 9], viene letto un elemento alla volta.

Risultato atteso

Una condizione per riga. Oltre alle variabili, valgono END (testo della fine raggiunta), TIME, COST e STEPS.

Risposte alle decisioni

I rami delle decisioni chieste, in ordine, separati da virgole, come Sì, No.

Esegui esegue solo lo scenario aperto ed Esegui tutti esegue l'elenco e calcola la copertura. Guarda riproduce lo scenario nell'animazione; lì, ciò che non indica viene chiesto a te.

Analizzare molte esecuzioni

La scheda Analisi ripete il diagramma molte volte, fino a 100.000, estraendo durate, input e rami. È il cosiddetto metodo Monte Carlo. ^[5] Lo stesso seme ripete lo stesso risultato, e un altro seme mostra la variazione.

Per funzionare, ogni Input richiede un Valore nell'analisi. Senza di esso, le esecuzioni si fermano con un errore, e la causa è elencata nella scheda stessa.

Concluse

Quante esecuzioni hanno raggiunto una fine. Sotto il 100%, vedi gli errori elencati.

Tempo medio, Mediana, 95% entro, Massimo

Il tempo totale delle esecuzioni concluse. Confronta la media con la mediana: una media molto più alta indica pochi casi molto lenti.

Costo medio

La somma dei costi per esecuzione.

Istogramma

Quante esecuzioni rientrano in ogni fascia di tempo. Passa il mouse su una barra per vedere i valori.

Come termina

La percentuale di ogni fine.

Percorsi distinti

I percorsi più frequenti, descritti dalle risposte alle decisioni.

Dove va il tempo

Per passo: Raggiunto (quante esecuzioni vi passano), Visite/esecuzione, tempo e costo medi e % del tempo. Il passo in cima è il primo candidato da migliorare.

Mostra frequenze sul diagramma

Mostra sul disegno la percentuale di ogni passo, con collegamenti più spessi dove passa più flusso. Si disattiva da solo quando torni a eseguire passo per passo.

Per confrontare alternative, cambia una durata o una probabilità, esegui di nuovo con lo stesso seme e confronta gli indicatori.

Generare la documentazione

La modalità Documenta scrive il documento a partire dal modello. In Sezioni, scegli che cosa includere.

Le stime usano il valore atteso di ogni espressione: random(2, 5) vale 3,5. I valori che dipendono da variabili appaiono come —.

Formati

Stampa / PDF

Apre la stampa del browser, senza i pannelli dell'app. Scegli di salvare in PDF.

HTML

Una pagina unica, con le immagini incorporate, da inviare o pubblicare.

Markdown

Testo con il diagramma in Mermaid, che piattaforme come GitHub disegnano. ^[7] L'istogramma non è incluso.

Copia Markdown

Lo stesso contenuto, negli appunti.

Il documento esce nella lingua selezionata nell'app. I testi che hai digitato non vengono tradotti.

Salvare, aprire ed esportare

Prompt di IA

L'analisi di un processo di solito si blocca in tre punti: portare il processo nell'app, trovare i primi numeri e capire i risultati. Un'IA accorcia tutti e tre. Sbaglia anche con sicurezza: inventa regole, tira a indovinare le durate e spiega numeri che non ha letto. Tratta il risultato come la bozza di un collega di fretta. Per scrivere prompt migliori, vedi il tutorial sui prompt.

Prima di incollare: i processi interni possono contenere nomi, valori e regole riservati. Sostituiscili con dati fittizi e segui la politica della tua organizzazione sull'uso dell'IA. L'app non invia nulla in rete, ma il servizio di IA riceve ciò che vi incolli.

Sostituisci le parti tra parentesi quadre e incolla nello strumento di IA che usi. I prompt seguono l'ordine del lavoro, ma ognuno funziona da solo.

1. Intervistare prima di disegnare

Fa scoprire all'IA ciò che manca, invece di supporlo. È l'inizio migliore quando il processo è ancora nella testa delle persone.

Sei un analista di processi esperto di diagrammi di flusso.
Voglio mappare questo processo: [descrivilo in poche frasi].

Prima di proporre qualsiasi diagramma, intervistami:
- Fai una domanda alla volta e aspetta la mia risposta.
- Copri: cosa avvia il processo, chi esegue ogni passo, le decisioni e i loro criteri, le attese e le code, le eccezioni e le rilavorazioni, i dati usati, cosa segna la fine, e quanto tempo e costo richiede di solito ogni passo.
- Chiedi soprattutto ciò che va storto, non solo il percorso ideale.
- Non inventare risposte. Se non lo so, registralo come punto aperto.

Alla fine, consegna: riepilogo del processo; tabella dei passi (passo, responsabile, durata, costo); decisioni con criteri o probabilità; variabili; punti aperti.

2. Trasformare un testo in passi

Per verbali, procedure e trascrizioni. Chiede l'origine di ogni voce, il che facilita il controllo.

Dal testo qui sotto, estrai la struttura di un diagramma di flusso.

Testo:
[incolla il verbale, la procedura o la trascrizione]

Consegna:
1. Tabella dei passi, in ordine: passo, responsabile, durata citata e il brano che la sostiene.
2. Decisioni: domanda, criterio, rami e destinazione di ogni ramo.
3. Cicli e rilavorazioni, con ciò che fa tornare indietro il flusso.
4. Lacune: passi senza responsabile, decisioni senza criterio, rami senza destinazione e contraddizioni.
5. Domande per chiarire ogni lacuna.

Non colmare le lacune da solo. Ciò che non è nel testo va nelle domande.

3. Generare il diagramma in JSON

Trasforma ciò che hai raccolto in un file che l'app apre, invece di disegnare forma per forma. Incolla alla fine il risultato del prompt 1 o 2.

Genera un diagramma di flusso in JSON per Flowchart Simulator, dalle informazioni alla fine.

Rispondi solo con il JSON, senza commenti e senza delimitatori di codice.

Formato:
- Radice: "app" (sempre "flowchart-simulator"), "meta" ("title", "purpose", "scope", "timeUnit", "currency") e "sheets". La simulazione parte dal primo foglio.
- Foglio: "id", "name", "nodes" ed "edges".
- Nodo: "id", "type", "text" e, se ha senso, "resp", "desc", "duration" e "cost" (numero o espressione, come testo).
- "type": start, end, process, decision, input, output, subprocess, delay, document, data, connector o note.
- start, process e data: "code" con le istruzioni, una per riga, come totale = prezzo * qta.
- output e document: "code" con il messaggio, ed espressioni tra graffe, come Totale: {totale}.
- input: "var", "prompt" e "sample" (espressione usata nell'analisi; obbligatoria).
- subprocess: "target" con l'id del foglio richiamato.
- decision: "mode" è cond (decide una condizione; indica "expr"), prob (estrazione secondo le percentuali) o ask (sceglie una persona; nell'analisi vale l'estrazione).
- Collegamento: "from" e "to". Uscendo da decision in cond: "branch" è yes, no, else o case (con "value"). In prob o ask: "prob" in percentuale, da 0 a 100, e "branch" yes o no, oppure "label" con il nome del ramo.

Regole:
- Ogni foglio ha uno start e almeno un end. Solo decision ha più di un'uscita. end non ha uscite, e note non ha collegamenti.
- Non indicare posizioni: l'app dispone il disegno.
- Le espressioni accettano + - * / % ^, confronti, and, or, not, min, max, round, random(a, b), normal(media, dev), triangular(min, moda, max) e chance(p). Usa il punto per i decimali.
- Preferisci le distribuzioni ai valori fissi per le durate incerte.
- Ogni variabile letta deve prima essere scritta da un input o da un'istruzione.
- In "desc", indica se i numeri vengono da me o sono una tua ipotesi. Non inventare fonti.

Esempio del formato:
{
  "app": "flowchart-simulator",
  "meta": {"title": "Rimborso", "timeUnit": "min", "currency": "€"},
  "sheets": [
    {"id": "main", "name": "Principale", "nodes": [
      {"id": "a", "type": "start", "text": "Richiesta ricevuta"},
      {"id": "b", "type": "input", "text": "Inserire importo", "var": "importo", "prompt": "Importo della richiesta", "sample": "random(100, 900)", "resp": "Dipendente", "duration": "5", "desc": "ipotesi"},
      {"id": "c", "type": "decision", "text": "Importo oltre 500?", "mode": "cond", "expr": "importo > 500"},
      {"id": "d", "type": "decision", "text": "Il responsabile approva?", "mode": "prob", "resp": "Responsabile", "duration": "30"},
      {"id": "e", "type": "process", "text": "Pagare rimborso", "resp": "Finanza", "duration": "triangular(5, 10, 20)", "cost": "3"},
      {"id": "f", "type": "end", "text": "Pagato"},
      {"id": "g", "type": "end", "text": "Rifiutato"}
    ], "edges": [
      {"from": "a", "to": "b"},
      {"from": "b", "to": "c"},
      {"from": "c", "to": "d", "branch": "yes"},
      {"from": "c", "to": "e", "branch": "no"},
      {"from": "d", "to": "e", "branch": "yes", "prob": "80"},
      {"from": "d", "to": "g", "branch": "no", "prob": "20"},
      {"from": "e", "to": "f"}
    ]}
  ]
}

Informazioni:
[incolla il risultato del prompt 1 o 2, o descrivi il processo]

4. Stimare durate, costi e probabilità

La scheda Analisi ha bisogno di numeri. Questo prompt chiarisce cosa è ipotesi e restituisce espressioni che l'app accetta.

Mi servono numeri iniziali per simulare questo processo. Non ho misure.

Processo:
[incolla la tabella dei passi, il JSON o il Markdown della documentazione]
Unità di tempo: [min, h o giorni]

Per ogni passo, decisione e input, consegna una tabella con: minimo, più probabile, massimo, su cosa ti sei basato, come misurerei il valore reale e la tua fiducia (bassa, media o alta).

Regole:
- Tutto è ipotesi finché non lo confermo. Dillo chiaramente.
- Non citare studi o numeri di mercato che non puoi indicare con precisione. Senza base, scrivi "senza base" e dai solo l'intervallo.
- Separa il tempo di lavoro dal tempo di attesa, e usa un passo di attesa per le code.
- Restituisci il testo esatto per i campi dell'app: Durata e Costo come triangular(min, moda, max); Valore nell'analisi come espressione; e i rami di decisione in percentuale, con somma 100.
- Indica le 3 stime che più possono cambiare il risultato e che dovrei misurare per prime.

5. Rivedere il modello prima di analizzare

Incolla il JSON salvato o il Markdown della documentazione. È un secondo parere sulla logica, non un'approvazione.

Rivedi questo diagramma di flusso come un analista di processi esperto, prima che io lo simuli.

Modello:
[incolla il JSON o il Markdown della documentazione]

Cerca:
- Percorsi mancanti: eccezioni, annullamenti, rifiuti e rilavorazioni.
- Decisioni senza un criterio chiaro, o i cui rami non coprono tutti i casi.
- Cicli che potrebbero non terminare.
- Passi senza responsabile, e passaggi di mano senza attesa prevista.
- Durate o probabilità improbabili, e costi contati due volte.
- Variabili lette prima di avere un valore.
- Tutto ciò che distorce l'analisi: attese assenti o probabilità ottimiste.

Consegna una tabella con: passo, problema, perché conta, suggerimento e gravità (alta, media o bassa). Non riscrivere il modello. Non confermare che è giusto solo perché non hai trovato problemi: di' cosa non si può valutare senza altri dati.

6. Scrivere scenari di test

Restituisce gli scenari nella sintassi dei campi dell'app, per ripetere il test a ogni modifica.

Proponi scenari di test per il diagramma qui sotto, nella sintassi di Flowchart Simulator.

Modello:
[incolla il JSON o il Markdown della documentazione]

Per ogni scenario, consegna esattamente questi campi:
- Scenario: un nome breve.
- Input: uno per riga, nome = valore. Un elenco, come voto = [7, 8], viene letto un elemento alla volta.
- Risposte alle decisioni: i rami delle decisioni chieste (modalità ask), in ordine, separati da virgole.
- Risultato atteso: una condizione per riga. Valgono le variabili, END == "testo della fine", TIME, COST e STEPS.

Regole:
- Copri tutti i rami di ogni decisione, e indica quale ramo prova ogni scenario.
- Includi valori al limite, come esattamente 500 in una regola su 500, e casi di errore e di rilavorazione.
- Le decisioni per probabilità (modalità prob) sono sempre estratte e non accettano risposte. Se uno scenario richiede un ramo specifico, segnala che la decisione deve passare alla modalità ask, che nell'analisi continua a usare le percentuali.
- Non confrontare valori esatti di durate estratte; usa intervalli.
- Se il risultato atteso non si può dedurre dal modello, segnalalo come domanda per me, invece di supporlo.

7. Leggere i risultati dell'analisi

Dopo aver eseguito l'analisi, copia la documentazione con Copia Markdown e incollala. L'istogramma non entra nel Markdown, ma indicatori e tabelle sì.

Aiutami a interpretare questa analisi per simulazione. I numeri vengono da un modello, non da misure.

Documentazione:
[incolla il Markdown generato dall'app, con la sezione di analisi]

Consegna:
1. Cosa dicono gli indicatori, in massimo 5 frasi, confrontando media, mediana e 95%.
2. I 3 passi che pesano di più su tempo e costo, con i numeri del documento.
3. Cosa spiega la coda: percorsi, rilavorazioni o attese dietro i casi più lenti.
4. Come si distribuisce ogni fine, e quale preoccupa.
5. Cosa non posso concludere: ipotesi fragili ed esecuzioni non concluse.

Regole:
- Usa solo numeri presenti nel documento, senza crearne di nuovi. Se manca un dato, dillo.
- Separa ciò che è stato calcolato dalla tua interpretazione. Non affermare cause nel mondo reale: presentale come ipotesi da confermare.

8. Pianificare le prossime simulazioni

Trasforma la diagnosi in un breve elenco di prove, per non simulare alternative a caso.

In base a questa analisi, pianifica le prossime simulazioni.

Documentazione:
[incolla il Markdown generato dall'app, con la sezione di analisi]
Obiettivo: [ad esempio, ridurre il tempo del 95% a meno di 2 giorni]
Vincoli: [cosa non può cambiare]

Proponi fino a 5 alternative e, per ognuna, consegna:
- Cosa cambia nel modello: il passo, il campo (Durata, Costo, Condizione o percentuale del ramo) e il valore esatto.
- L'effetto atteso, come ipotesi, e l'indicatore che lo confermerebbe.
- Cosa servirebbe per fare la modifica nel mondo reale, e il rischio.

Regole:
- Ogni alternativa cambia una sola cosa, perché l'effetto sia attribuibile.
- Inizia dai passi che pesano di più nel documento, e di' quando un passo pesa perché la stima è scarsa e non perché il processo è lento.
- Non promettere guadagni in numeri: il risultato viene dalla simulazione.

Concludi con una tabella vuota da compilare, con lo stesso seme in tutte le esecuzioni: alternativa, tempo medio, mediana, 95%, costo medio e % di ogni fine.

Come aprire il JSON del prompt 3

1. Copia la risposta dell'IA in un editor di testo e salvala con l'estensione .json, ad esempio processo.json.
2. Nell'app, usa File ▾ → Apri (.json)…. Se c'è già un diagramma, conferma la sostituzione; salva prima ciò che vuoi conservare.
3. Il file non ha posizioni, quindi le forme si aprono impilate. Usa Disponi ▾ → In verticale e poi Adatta.
4. Apri la scheda Verifica e controlla ogni voce.

Scorciatoie da tastiera

Limiti e risoluzione dei problemi

Limiti

• Un percorso alla volta: non ci sono passi in parallelo né code che si contendono risorse. Per code e colli di bottiglia, usa DFD Simulator. ^[2]
• Tempo senza conversione: Unità di tempo è solo un'etichetta. Usa la stessa unità in tutto il modello.
• Limite di passi: ogni esecuzione si ferma a 5.000 passi, per bloccare i cicli senza uscita.
• Copia e incolla: vale dentro l'app aperta, e i collegamenti vengono copiati solo se entrambe le estremità sono selezionate.
• Browser: l'app è stata provata su Chromium. L'uso su altri browser e su schermi touch non è stato provato.

Problemi comuni

Ripasso rapido

Prova a rispondere prima di aprire ogni domanda.

Riferimenti

1. Giovani Perotto Mesquita, “Flowchart Simulator”, app in un unico file HTML, giovanipm.github.io/flowchart-simulator.html.
2. Giovani Perotto Mesquita, “DFD Simulator: tutorial”, tutorial di questo sito, giovanipm.github.io/DFDSimulator.html.
3. ISO, ISO 5807:1985: Information processing — Documentation symbols and conventions for data, program and system flowcharts, program network charts and system resources charts, norma, 1985.
4. Wikipedia (in inglese), “Flowchart”, consultato il 30/10/2026, en.wikipedia.org/wiki/Flowchart.
5. Wikipedia (in inglese), “Monte Carlo method”, consultato il 30/10/2026, en.wikipedia.org/wiki/Monte_Carlo_method.
6. Thomas J. McCabe, “A Complexity Measure”, IEEE Transactions on Software Engineering, SE-2(4), 1976, pp. 308–320.
7. Mermaid, “Flowcharts Syntax”, documentazione, consultato il 30/10/2026, mermaid.js.org/syntax/flowchart.html.

Qué es Flowchart Simulator

Flowchart Simulator dibuja diagramas de flujo, los ejecuta y genera su documentación. ^[1] Es un único archivo HTML que funciona en el navegador, sin instalación ni cuenta.

Abrir Flowchart Simulator →

Un diagrama estático muestra el camino, pero no si funciona. Aquí, el mismo dibujo responde a preguntas como: hay algún camino sin salida, cuánto tarda el proceso y qué paso consume ese tiempo. Cuando está bien, la aplicación escribe el procedimiento por ti.

El trabajo ocurre en tres modos, que se eligen en la parte superior de la pantalla:

Editar

Dibujar, conectar las formas y rellenar las propiedades.

Simular

Ejecutar paso a paso, probar escenarios y analizar muchas ejecuciones.

Documentar

Leer, imprimir y exportar la documentación generada a partir del modelo.

Cómo trata la aplicación tus datos

• Nada sale de tu ordenador. El archivo bloquea las conexiones de red.
• El modelo se queda en el navegador. Se guarda automáticamente y reaparece al volver a abrir la aplicación. Para tener una copia propia, guárdalo en JSON.
• Los modelos no ejecutan código. Las expresiones pasan por un intérprete propio, así que abrir un modelo recibido de otra persona no ejecuta JavaScript.

Las formas

La aplicación tiene 12 formas, basadas en los símbolos tradicionales de los diagramas de flujo. ^{[3] [4]} Cada una tiene un comportamiento propio en la simulación.

Tu primer diagrama: un reembolso

En unos 20 minutos, vas a mapear un reembolso de gastos. El empleado indica el importe. Hasta 500, el pago es directo; por encima, decide el gerente.

1. Dibuja

1. Si la aplicación se abre con otro diagrama, usa Archivo ▾ → Nuevo.
2. Haz clic en Inicio, en la lista de formas. Haz doble clic en la forma creada, escribe Solicitud de reembolso y pulsa Intro.
3. Pasa el ratón sobre la forma: aparecen puntos en los bordes. Arrastra el punto inferior hasta un área vacía y suelta. En el menú que aparece, elige Entrada, escribe Indicar importe y pulsa Intro.
4. Continúa del mismo modo, siguiendo la tabla. Si la pantalla se queda estrecha, haz clic en Ajustar.

En las decisiones, el orden importa: la primera conexión que sale de una decisión se convierte en Sí, y la segunda en No. Por eso, ¿Importe superior a 500? tiene Sí hacia el gerente. Si las cambias, corrígelo en el campo Cuándo de la rama.

Para ordenar el dibujo, usa Organizar ▾ → En vertical.

2. Verifica

Haz clic en un área vacía y abre la pestaña Verificar. Muestra tres errores, porque el dibujo aún no dice cómo decidir ni dónde guardar el importe:

• Indicar importe necesita un nombre de variable válido.
• Las dos decisiones no tienen condición.

3. Rellena las propiedades

Vuelve a la pestaña Propiedades, haz clic en cada forma y rellena los campos. Pulsa Tab para confirmar cada uno.

Haz clic en un área vacía y rellena Título con Reembolso de gastos y Moneda con $. La pestaña Verificar ahora muestra No se encontraron problemas.

4. Simula

1. Haz clic en el modo Simular y después en Paso. Se ejecuta el inicio.
2. Haz clic en Paso otra vez. El panel de la derecha pregunta Importe del gasto. Escribe 800 y haz clic en Enviar.
3. Haz clic en ▶ Ejecutar. El flujo avanza solo y se detiene en ¿El gerente aprueba?, a la espera de tu respuesta.
4. Haz clic en Sí. La ejecución termina con el estado Fin: Pagado, el coste de $ 3 en la barra superior y el mensaje Comprobante de 800 en la consola.
5. Abre la pestaña Traza: ahí están los 7 pasos ejecutados, con los valores y la respuesta dada. Prueba Atrás para deshacer pasos.

5. Crea escenarios de prueba

Abre la pestaña Escenarios de prueba. Para cada fila de la tabla, haz clic en + Nuevo escenario y rellena los campos.

Haz clic en Ejecutar todos. Los tres se superan, y la cobertura llega al 100% de los pasos y al 100% de las ramas: ningún camino quedó sin prueba.

6. Analiza muchas ejecuciones

Abre la pestaña Análisis y haz clic en Ejecutar análisis, manteniendo 1000 ejecuciones y la semilla 42. Siguiendo el mismo orden de este recorrido, los resultados son estos:

7. Genera la documentación

Haz clic en el modo Documentar. El procedimiento, las reglas de decisión, los responsables, el diccionario de datos, los caminos, los escenarios y el análisis que acabas de ejecutar ya están escritos. Haz clic en HTML para descargar reembolso-de-gastos.html.

Por último, pulsa Ctrl+S para conservar el modelo en un archivo. El resto del tutorial detalla cada función.

La interfaz

Barra superior

Los tres modos, Archivo ▾, deshacer y rehacer, Organizar ▾, idioma, ayuda y tema. En Simular, incluye también el reloj y los controles de ejecución.

Formas

La paleta. Arrastra al dibujo, o haz clic para colocar. Solo aparece en Editar.

Pasos

Lista numerada de los pasos de la hoja abierta. Al hacer clic se centra la forma.

Pestañas de hojas

Debajo del dibujo. Alternan entre las hojas, y + crea otra.

Propiedades

Campos del elemento seleccionado. Sin selección, muestra los datos de la hoja y del modelo.

Verificar

Problemas del modelo, con el recuento en la propia pestaña.

Dibujar y organizar

Las conexiones las traza la aplicación, que esquiva las demás formas. La aplicación rechaza las conexiones sin sentido: una forma consigo misma, algo que sale del fin o entra en el inicio, una nota, una conexión repetida o una segunda salida en una forma que no es una decisión.

Propiedades de cada forma

Comunes a casi todas

Texto

Lo que aparece en la forma. La forma crece si el texto no cabe.

Descripción

Explicación para la documentación.

Responsable

Quién ejecuta el paso. El campo sugiere los nombres ya usados. No existe en inicio y fin.

Duración

Tiempo empleado. Acepta un número o una expresión, como random(2, 5). Vacío es cero.

Coste

Coste del paso, con las mismas reglas.

Pausar la simulación aquí

Punto de parada para el botón ▶ Ejecutar.

Específicas

Sin selección, el panel muestra el nombre de la hoja y los datos del modelo, como Título, Versión, Objetivo, Alcance, Unidad de tiempo y Moneda. Abren la documentación generada.

Variables y expresiones

Las variables se crean al recibir un valor y valen en todas las hojas. Los nombres aceptan letras, también acentuadas, números y _, y distinguen mayúsculas de minúsculas.

# instrucciones: una por línea, con comentarios después de # o //
total = price * qty
total += 10
items = [1, 2, 3]
items[0] = 5
label = qty > 1 ? "varios" : "uno"

Las listas empiezan en la posición 0, y push devuelve una lista nueva, así que escribe a = push(a, x). Usar una variable sin valor, dividir por cero o salirse de los límites de una lista detiene la simulación con un mensaje en el paso del error. Las funciones desconocidas y los errores de escritura se indican ya durante la edición.

Al responder a una entrada, 800 y 3,5 se convierten en números, true en verdadero, [1, 2] en una lista y el resto en texto.

Decisiones y ramas

La decisión es la única forma con más de una salida. El campo Cómo decide tiene tres opciones:

Por condición

La expresión de Condición elige la rama por sí sola. Sirve para reglas objetivas, como amount > 500.

Por probabilidad

La rama se sortea según los porcentajes. Sirve para situaciones que solo conoces en promedio, como “el 85% tiene stock”.

Pregunta en la simulación

Tú eliges la rama en el momento. En los escenarios vale la respuesta indicada y, en el análisis, el sorteo según los porcentajes.

Los tipos de rama

El campo Cuándo indica cuándo se sigue la rama en una decisión por condición.

Si ninguna rama coincide, la simulación se detiene con un error. En porcentajes, una rama en blanco reparte a partes iguales lo que falta para llegar a 100%. La Etiqueta es opcional: vacía, muestra el nombre del tipo, en el idioma de la interfaz.

Hojas y subprocesos

Un diagrama largo se lee mejor si se divide en hojas. La forma Subproceso llama a otra hoja; al llegar a su fin, el flujo vuelve y sigue por la salida del subproceso.

1. Haz clic en + en las pestañas de hojas, o selecciona el subproceso y usa Crear hoja.
2. Dibuja la hoja con su propio inicio y al menos un fin.
3. En el subproceso, elige la Hoja llamada.

Los pasos de las hojas siguientes se numeran con un prefijo, como 1.2. La simulación siempre empieza por la primera hoja, cambia de pestaña sola al entrar en una llamada y muestra el camino en Pila de llamadas. Abre el ejemplo Aprobación de pedidos para verlo en marcha.

Verificar el modelo

La pestaña Verificar se actualiza con cada cambio, y al hacer clic en un elemento se llega a la forma.

Los errores no bloquean la simulación: la aplicación avisa, y la simulación se detiene al llegar a ellos. Así puedes probar un dibujo aún incompleto.

Simular paso a paso

Haz clic en una forma para activar o desactivar un punto de parada, marcado con un círculo rojo. La parada ocurre antes de ejecutar el paso. Al arrastrar, se mueve la vista.

Al responder a una entrada, Sortear usa la expresión de Valor en el análisis. El panel de la derecha muestra las variables, con las que acaban de cambiar resaltadas. La altura del panel inferior se ajusta por su borde superior.

Consola

Los mensajes de salidas y documentos, cada uno con su instante.

Traza

Cada paso ejecutado: tiempo, resultado de la condición, respuesta dada y valores escritos. Muestra las últimas 500 líneas, y al hacer clic en una se centra la forma.

Escenarios de prueba

Un escenario guarda entradas y el resultado esperado, para repetir la prueba tras cada cambio en el diagrama. Los escenarios quedan guardados en el modelo.

Entradas

Una por línea: nombre = valor. Un valor simple sirve para todas las lecturas. Una lista, como grade = [7, 8, 9], se lee un elemento cada vez.

Resultado esperado

Una condición por línea. Además de las variables, valen END (texto del fin alcanzado), TIME, COST y STEPS.

Respuestas a las decisiones

Las ramas de las decisiones preguntadas, en orden, separadas por comas, como Sí, No.

Ejecutar ejecuta solo el escenario abierto y Ejecutar todos ejecuta la lista y calcula la cobertura. Ver reproduce el escenario en la animación; ahí, lo que no indica se te pregunta a ti.

Analizar muchas ejecuciones

La pestaña Análisis repite el diagrama muchas veces, hasta 100.000, sorteando duraciones, entradas y ramas. Es el llamado método de Monte Carlo. ^[5] La misma semilla repite el mismo resultado, y otra semilla muestra la variación.

Para funcionar, cada Entrada necesita Valor en el análisis. Sin él, las ejecuciones se detienen con un error, y la causa aparece en la propia pestaña.

Finalizadas

Cuántas ejecuciones llegaron a un fin. Por debajo del 100%, mira los errores indicados.

Tiempo medio, Mediana, 95% en hasta, Máximo

El tiempo total de las ejecuciones finalizadas. Compara la media con la mediana: una media mucho mayor indica pocos casos muy lentos.

Coste medio

La suma de los costes por ejecución.

Histograma

Cuántas ejecuciones cayeron en cada franja de tiempo. Pasa el ratón sobre una barra para ver los valores.

Cómo termina

El porcentaje de cada fin.

Caminos distintos

Los caminos más frecuentes, descritos por las respuestas a las decisiones.

Dónde se va el tiempo

Por paso: Alcance (cuántas ejecuciones pasan por él), Visitas/ejecución, tiempo y coste medios y % del tiempo. El paso de arriba es el primer candidato a mejorar.

Mostrar frecuencias en el diagrama

Muestra en el dibujo el porcentaje de cada paso, con conexiones más gruesas donde pasa más flujo. Se desactiva solo cuando vuelves a ejecutar paso a paso.

Para comparar alternativas, cambia una duración o una probabilidad, ejecuta de nuevo con la misma semilla y compara los indicadores.

Generar la documentación

El modo Documentar escribe el documento a partir del modelo. En Secciones, eliges qué entra.

Las estimaciones usan el valor esperado de cada expresión: random(2, 5) cuenta como 3,5. Los valores que dependen de variables aparecen como —.

Formatos

Imprimir / PDF

Abre la impresión del navegador, sin los paneles de la aplicación. Elige guardar en PDF.

HTML

Una sola página, con las imágenes incrustadas, para enviar o publicar.

Markdown

Texto con el diagrama en Mermaid, que plataformas como GitHub dibujan. ^[7] El histograma no entra.

Copiar Markdown

El mismo contenido, en el portapapeles.

El documento sale en el idioma seleccionado en la aplicación. Los textos que escribiste no se traducen.

Guardar, abrir y exportar

Prompts de IA

El análisis de un proceso suele atascarse en tres puntos: llevar el proceso a la aplicación, conseguir los primeros números y entender los resultados. Una IA acorta los tres. También se equivoca con seguridad: inventa reglas, adivina duraciones y explica números que no ha leído. Trata el resultado como el borrador de un colega con prisa. Para escribir mejores prompts, mira el tutorial de prompts.

Antes de pegar: los procesos internos pueden contener nombres, valores y reglas confidenciales. Cámbialos por datos ficticios y sigue la política de tu organización sobre el uso de IA. La aplicación no envía nada a la red, pero el servicio de IA recibe lo que pegues en él.

Cambia las partes entre corchetes y pega en la herramienta de IA que uses. Los prompts siguen el orden del trabajo, pero cada uno funciona por sí solo.

1. Entrevistar antes de dibujar

Hace que la IA descubra lo que falta, en vez de suponerlo. Es el mejor comienzo cuando el proceso aún está en la cabeza de las personas.

Eres un analista de procesos con experiencia en diagramas de flujo.
Quiero mapear este proceso: [descríbelo en pocas frases].

Antes de proponer ningún diagrama, entrevístame:
- Haz una pregunta cada vez y espera mi respuesta.
- Cubre: qué inicia el proceso, quién ejecuta cada paso, las decisiones y sus criterios, las esperas y colas, las excepciones y retrabajos, los datos usados, qué marca el fin, y cuánto tiempo y coste suele llevar cada paso.
- Pregunta sobre todo por lo que sale mal, no solo por el camino feliz.
- No inventes respuestas. Si no lo sé, regístralo como pendiente.

Al final, entrega: resumen del proceso; tabla de pasos (paso, responsable, duración, coste); decisiones con criterios o probabilidades; variables; pendientes.

2. Convertir un texto en pasos

Para actas, procedimientos y transcripciones. Pide el origen de cada elemento, lo que facilita comprobarlo.

A partir del texto siguiente, extrae la estructura de un diagrama de flujo.

Texto:
[pega el acta, el procedimiento o la transcripción]

Entrega:
1. Tabla de pasos, en orden: paso, responsable, duración citada y el pasaje que la sustenta.
2. Decisiones: pregunta, criterio, ramas y destino de cada rama.
3. Bucles y retrabajos, con lo que hace volver al flujo.
4. Lagunas: pasos sin responsable, decisiones sin criterio, ramas sin destino y contradicciones.
5. Preguntas para aclarar cada laguna.

No rellenes lagunas por tu cuenta. Lo que no esté en el texto va a las preguntas.

3. Generar el diagrama en JSON

Convierte lo que reuniste en un archivo que la aplicación abre, en vez de dibujar forma por forma. Pega al final el resultado del prompt 1 o 2.

Genera un diagrama de flujo en JSON para Flowchart Simulator, a partir de la información del final.

Responde solo con el JSON, sin comentarios y sin marcas de código.

Formato:
- Raíz: "app" (siempre "flowchart-simulator"), "meta" ("title", "purpose", "scope", "timeUnit", "currency") y "sheets". La simulación empieza por la primera hoja.
- Hoja: "id", "name", "nodes" y "edges".
- Nodo: "id", "type", "text" y, si tiene sentido, "resp", "desc", "duration" y "cost" (número o expresión, como texto).
- "type": start, end, process, decision, input, output, subprocess, delay, document, data, connector o note.
- start, process y data: "code" con instrucciones, una por línea, como total = precio * cant.
- output y document: "code" con el mensaje, y expresiones entre llaves, como Total: {total}.
- input: "var", "prompt" y "sample" (expresión usada en el análisis; obligatoria).
- subprocess: "target" con el id de la hoja llamada.
- decision: "mode" es cond (decide una condición; indica "expr"), prob (sorteo según los porcentajes) o ask (elige una persona; en el análisis vale el sorteo).
- Conexión: "from" y "to". Saliendo de decision en cond: "branch" es yes, no, else o case (con "value"). En prob o ask: "prob" en porcentaje, de 0 a 100, y "branch" yes o no, o "label" con el nombre de la rama.

Reglas:
- Cada hoja tiene un start y al menos un end. Solo decision tiene más de una salida. end no tiene salida, y note no tiene conexiones.
- No indiques posiciones: la aplicación organiza el dibujo.
- Las expresiones aceptan + - * / % ^, comparaciones, and, or, not, min, max, round, random(a, b), normal(media, desv), triangular(mín, moda, máx) y chance(p). Usa punto para los decimales.
- Prefiere distribuciones a valores fijos en las duraciones inciertas.
- Toda variable leída debe escribirse antes con una entrada o instrucción.
- En "desc", indica si los números los di yo o son una hipótesis tuya. No inventes fuentes.

Ejemplo del formato:
{
  "app": "flowchart-simulator",
  "meta": {"title": "Reembolso", "timeUnit": "min", "currency": "€"},
  "sheets": [
    {"id": "main", "name": "Principal", "nodes": [
      {"id": "a", "type": "start", "text": "Solicitud recibida"},
      {"id": "b", "type": "input", "text": "Indicar importe", "var": "importe", "prompt": "Importe de la solicitud", "sample": "random(100, 900)", "resp": "Empleado", "duration": "5", "desc": "hipótesis"},
      {"id": "c", "type": "decision", "text": "¿Importe superior a 500?", "mode": "cond", "expr": "importe > 500"},
      {"id": "d", "type": "decision", "text": "¿El gerente aprueba?", "mode": "prob", "resp": "Gerente", "duration": "30"},
      {"id": "e", "type": "process", "text": "Pagar reembolso", "resp": "Finanzas", "duration": "triangular(5, 10, 20)", "cost": "3"},
      {"id": "f", "type": "end", "text": "Pagado"},
      {"id": "g", "type": "end", "text": "Rechazado"}
    ], "edges": [
      {"from": "a", "to": "b"},
      {"from": "b", "to": "c"},
      {"from": "c", "to": "d", "branch": "yes"},
      {"from": "c", "to": "e", "branch": "no"},
      {"from": "d", "to": "e", "branch": "yes", "prob": "80"},
      {"from": "d", "to": "g", "branch": "no", "prob": "20"},
      {"from": "e", "to": "f"}
    ]}
  ]
}

Información:
[pega el resultado del prompt 1 o 2, o describe el proceso]

4. Estimar duraciones, costes y probabilidades

La pestaña Análisis necesita números. Este prompt deja claro qué es hipótesis y devuelve expresiones que la aplicación acepta.

Necesito números iniciales para simular este proceso. No tengo mediciones.

Proceso:
[pega la tabla de pasos, el JSON o el Markdown de la documentación]
Unidad de tiempo: [min, h o días]

Para cada paso, decisión y entrada, entrega una tabla con: mínimo, más probable, máximo, en qué te basaste, cómo mediría el valor real y tu confianza (baja, media o alta).

Reglas:
- Todo es hipótesis hasta que yo lo confirme. Dilo claramente.
- No cites estudios ni cifras de mercado que no puedas indicar con precisión. Sin base, di "sin base" y da solo el rango.
- Separa el tiempo de trabajo del tiempo de espera, y usa un paso de espera para las colas.
- Devuelve el texto exacto para los campos de la aplicación: Duración y Coste como triangular(mín, moda, máx); Valor en el análisis como expresión; y las ramas de decisión en porcentaje, sumando 100.
- Señala las 3 estimaciones que más pueden cambiar el resultado y que debería medir primero.

5. Revisar el modelo antes de analizar

Pega el JSON guardado o el Markdown de la documentación. Es una segunda opinión sobre la lógica, no una aprobación.

Revisa este diagrama de flujo como un analista de procesos experimentado, antes de que lo simule.

Modelo:
[pega el JSON o el Markdown de la documentación]

Busca:
- Caminos que faltan: excepciones, cancelaciones, rechazos y retrabajo.
- Decisiones sin criterio claro, o cuyas ramas no cubren todos los casos.
- Bucles que pueden no terminar.
- Pasos sin responsable, y traspasos sin espera prevista.
- Duraciones o probabilidades improbables, y costes contados dos veces.
- Variables leídas antes de tener valor.
- Todo lo que distorsiona el análisis: esperas ausentes o probabilidades optimistas.

Entrega una tabla con: paso, problema, por qué importa, sugerencia y gravedad (alta, media o baja). No reescribas el modelo. No confirmes que está bien solo porque no hallaste problemas: di qué no se puede evaluar sin más datos.

6. Escribir escenarios de prueba

Devuelve los escenarios en la sintaxis de los campos de la aplicación, para repetir la prueba tras cada cambio.

Propón escenarios de prueba para el diagrama siguiente, en la sintaxis de Flowchart Simulator.

Modelo:
[pega el JSON o el Markdown de la documentación]

Para cada escenario, entrega exactamente estos campos:
- Escenario: un nombre corto.
- Entradas: una por línea, nombre = valor. Una lista, como nota = [7, 8], se lee un elemento cada vez.
- Respuestas a las decisiones: las ramas de las decisiones preguntadas (modo ask), en orden, separadas por comas.
- Resultado esperado: una condición por línea. Valen las variables, END == "texto del fin", TIME, COST y STEPS.

Reglas:
- Cubre todas las ramas de cada decisión, e indica qué rama prueba cada escenario.
- Incluye valores en el límite, como exactamente 500 en una regla de 500, y casos de error y de retrabajo.
- Las decisiones por probabilidad (modo prob) siempre se sortean y no aceptan respuesta. Si un escenario necesita una rama concreta, avisa de que la decisión debe pasar al modo ask, que en el análisis sigue usando los porcentajes.
- No compares valores exactos de duraciones sorteadas; usa rangos.
- Si el resultado esperado no se puede deducir del modelo, márcalo como pregunta para mí, en vez de suponer.

7. Leer los resultados del análisis

Después de ejecutar el análisis, copia la documentación con Copiar Markdown y pégala. El histograma no va en el Markdown, pero los indicadores y las tablas sí.

Ayúdame a interpretar este análisis por simulación. Los números vienen de un modelo, no de mediciones.

Documentación:
[pega el Markdown generado por la aplicación, con la sección de análisis]

Entrega:
1. Qué dicen los indicadores, en hasta 5 frases, comparando media, mediana y 95%.
2. Los 3 pasos que más pesan en tiempo y coste, con los números del documento.
3. Qué explica la cola: caminos, retrabajo o esperas detrás de los casos más lentos.
4. Cómo se distribuye cada fin, y cuál preocupa.
5. Qué no puedo concluir: hipótesis frágiles y ejecuciones no finalizadas.

Reglas:
- Usa solo números que estén en el documento, sin crear otros. Si falta un dato, dilo.
- Separa lo calculado de tu interpretación. No afirmes causas en el mundo real: preséntalas como hipótesis por confirmar.

8. Planificar las próximas simulaciones

Convierte el diagnóstico en una lista corta de pruebas, para no simular alternativas al azar.

Con base en este análisis, planifica las próximas simulaciones.

Documentación:
[pega el Markdown generado por la aplicación, con la sección de análisis]
Objetivo: [por ejemplo, reducir el tiempo del 95% a menos de 2 días]
Restricciones: [lo que no puede cambiar]

Propón hasta 5 alternativas y, para cada una, entrega:
- Qué cambia en el modelo: el paso, el campo (Duración, Coste, Condición o porcentaje de la rama) y el valor exacto.
- El efecto esperado, como hipótesis, y el indicador que lo confirmaría.
- Qué haría falta para hacer el cambio en el mundo real, y el riesgo.

Reglas:
- Cada alternativa cambia una sola cosa, para que el efecto sea atribuible.
- Empieza por los pasos que más pesan en el documento, y di cuándo un paso pesa porque la estimación es mala y no porque el proceso sea lento.
- No prometas ganancias en números: el resultado sale de la simulación.

Termina con una tabla vacía para rellenar, con la misma semilla en todas las ejecuciones: alternativa, tiempo medio, mediana, 95%, coste medio y % de cada fin.

Cómo abrir el JSON del prompt 3

1. Copia la respuesta de la IA en un editor de texto y guárdala con la extensión .json, por ejemplo proceso.json.
2. En la aplicación, usa Archivo ▾ → Abrir (.json)…. Si ya hay un diagrama, confirma la sustitución; guarda antes lo que quieras conservar.
3. El archivo no trae posiciones, así que las formas se abren apiladas. Usa Organizar ▾ → En vertical y después Ajustar.
4. Abre la pestaña Verificar y revisa cada elemento.

Atajos de teclado

Limitaciones y solución de problemas

Limitaciones

• Un camino cada vez: no hay pasos en paralelo ni colas que compitan por recursos. Para colas y cuellos de botella, usa DFD Simulator. ^[2]
• Tiempo sin conversión: Unidad de tiempo es solo una etiqueta. Usa la misma unidad en todo el modelo.
• Límite de pasos: cada ejecución se detiene en 5.000 pasos, para frenar bucles sin salida.
• Copiar y pegar: vale dentro de la aplicación abierta, y las conexiones solo se copian si los dos extremos están seleccionados.
• Navegadores: la aplicación se ha probado en Chromium. El uso en otros navegadores y en pantallas táctiles no se ha probado.

Problemas comunes

Repaso rápido

Intenta responder antes de abrir cada pregunta.

Referencias

1. Giovani Perotto Mesquita, “Flowchart Simulator”, aplicación en un único archivo HTML, giovanipm.github.io/flowchart-simulator.html.
2. Giovani Perotto Mesquita, “DFD Simulator: tutorial”, tutorial de este sitio, giovanipm.github.io/DFDSimulator.html.
3. ISO, ISO 5807:1985: Information processing — Documentation symbols and conventions for data, program and system flowcharts, program network charts and system resources charts, norma, 1985.
4. Wikipedia (en inglés), “Flowchart”, consultado el 30/10/2026, en.wikipedia.org/wiki/Flowchart.
5. Wikipedia (en inglés), “Monte Carlo method”, consultado el 30/10/2026, en.wikipedia.org/wiki/Monte_Carlo_method.
6. Thomas J. McCabe, “A Complexity Measure”, IEEE Transactions on Software Engineering, SE-2(4), 1976, pp. 308–320.
7. Mermaid, “Flowcharts Syntax”, documentación, consultado el 30/10/2026, mermaid.js.org/syntax/flowchart.html.