Design System V2.0
Alma da Marca Pitch V2.0 Dark Side
[33] Vitrine // Arquiteturas Visuais Interativas

Diagrama
de Fluxo

Funil de vendas, jornada do cliente, Metodo S.A.V.E. e pipeline CRM — agora como diagramas interativos SVG com nos clicaveis, conectores animados e controle de zoom.

Atracao 12.400 visitantes / mes 100% Qualificacao 3.720 leads qualificados 30% Nutricao 1.116 oportunidades 9% Proposta 334 deals ativos 2.7% Fechamento 133 clientes convertidos 1.1% R$ 1.09M
Vitrine Maggium 4 Diagramas Interativos 2026
[01]Arquiteturas Visuais

Fluxos que comunicam estrategia.

Diagramas interativos com nos clicaveis e conectores animados — cada no, aresta e rotulo usa os tokens de cor, tipografia e espacamento Maggium.

01 FlowDiagram // Canvas Interativo Data-Driven
Componente / FlowDiagram

Diagramas de Fluxo Interativos

SVG — Sem Lib Externa Data-Driven via Props Active State: Orange Accent Zoom / Pan: Integrado
Props Reference Clique para expandir
Nodes
Array<Node>
Lista de nos com id, label, tipo e posicao (x, y)
Edges
Array<Edge>
Conexoes entre nos com source, target e label opcional
CanvasWidth
Number
Largura do viewBox SVG. Default: 900
Zoomable
Boolean
Habilita controles de zoom e slider. Default: true
Theme
String
Paleta ativa: "orange" ou "gold". Default: orange
OnSelect
Function
Callback ao clicar num no. Recebe (nodeId, nodeData)
Node Types Clique para expandir
Default/Retangulo 8px radius Start/Pilula rx:24 End/Pilula rx:24 Decision/Losango (polygon) Action/Retangulo arredondado
Exemplo 01 — Funil de Vendas S.A.V.E. 7 Nos // 8 Arestas // Interativo
01 — Funil de Vendas S.A.V.E. 7 nos / 8 arestas / ativo: Atracao
100%
NAO QUALIFICADO QUALIFICADO PROPOSTA FECHADO Atracao ENTRY POINT Qualificacao LEADS Nutricao FILTER Descartados NURTURE Qualificados SQL Proposta DEAL Fechamento CLIENTE
Funil de Vendas S.A.V.E.
Visualizacao do Pipeline Maggium
Atracao 12.400 visitantes 100% Qualificacao 3.720 leads 30% Nutricao 1.116 oportunidades 9% Proposta 334 deals 2.7% Fechamento 133 clientes 1.1% R$ 1.09M
12.4K Leads / Mes
30% Conversao
R$ 2.7M Pipeline
R$ 82 CAC Medio
Atracao
0Visitantes / mes
100%do topo
R$ 0,82custo por visita
Ativo
Etapa
Decisao
Conector
Scroll para Zoom · Drag para Pan · Clique nos nos
Exemplo 02 — Jornada do Cliente 6 Nos // 5 Arestas // Linear
02 — Jornada do Cliente 6 nos / 5 arestas / linear
100%
Problema DOR Descoberta SEARCH Avaliacao COMPARE Contato CALL Conversao DEAL Recorrencia EXPAND
Dor
Busca
Comparacao
Contato
Fechamento
Expansao
Exemplo 03 — Fluxo de Atendimento 6 Nos // 7 Arestas // Com Decisao
03 — Fluxo de Atendimento ao Cliente 6 nos / 7 arestas / ativo: entrada
SIM NAO Entrada LEAD Triagem QUALIFY Reuniao DISCOVERY Nurture EMAIL SEQ Proposta DEAL Sucesso ONBOARD
Ativo
Decisao
Conector
Scroll para Zoom · Drag para Pan
Exemplo 04 — Jornada de Compra E-Commerce 5 Nos // 4 Arestas // Sequencial
04 — Jornada de Compra E-Commerce 5 nos / 4 arestas / sequencial
Visita BROWSE Carrinho ADD Checkout PAY Confirma ORDER Entrega SHIP
Navegacao
Pagamento
Conclusao
Scroll para Zoom · Drag para Pan
Exemplo 05 — Mapa Estrategico Maggium 9 Nos // 10 Arestas // Hierarquico
05 — Mapa Estrategico Maggium 9 nos / 10 arestas / org chart
CEO MAGGIUM HQ Dir. Marketing GROWTH Dir. Tecnologia CORTEX AI Dir. Vendas REVENUE Trafego Pago META / GOOGLE Conteudo COPY / SOCIAL Desenvolvimento FULL STACK Closers SALES CS SUCESSO
Lideranca
Diretorias
Hierarquia
Scroll para Zoom · Drag para Pan
02 FlowMap // Mindmap Agrupado com Canvas
Componente / FlowMap

Mindmap Agrupado

SVG — Canvas Agrupado Groups + Items Active State: Orange Accent
Props Reference Clique para expandir
Groups
Array<Group>
Grupos contendo itens e posicao
Items
Array<Item>
Itens dentro de cada grupo
Edges
Array<Edge>
Conexoes entre grupos ou itens
Layout
String
"radial" ou "grid". Default: grid
Expandable
Boolean
Grupos expandem ao clicar
OnGroupSelect
Function
Callback ao selecionar grupo
Exemplo 01 — Ecossistema de Servicos Maggium 5 Grupos // 12 Itens // Interativo
FlowMap — Ecossistema Maggium 5 grupos / 12 itens
MARKETING Trafego Social SEO Email VENDAS Leads Closer CRM TECNOLOGIA Cortex Dev Data DELIVERY Design Copy
Grupo Ativo
Grupo
Conexao
Clique nos grupos para expandir
03 — Metodo S.A.V.E. Metodologia Proprietaria
Sistema de Aceleracao de Vendas Escalavel
A Metodologia que gera R$1M+ em 13 meses.
S
Segmentacao
Identificacao precisa do ICP e publicos de alta intencao para eliminar desperdicio de budget.
A
Atracao
Conteudo e trafego pago calibrados por dados para atrair leads com intencao de compra.
V
Vendas
Processo consultivo com scripts validados, CRM integrado e follow-up automatizado.
E
Escala
Otimizacao continua com loop de dados: o que funciona e duplicado, o que nao e eliminado.
Pipeline de Vendas Ao vivo
R$ 125.500/mes em pipeline
Prospeccao12
Clinica Odonto SP
LinkedIn
R$ 4.800/mes
E-com Fashion RS
Indicacao
R$ 8.200/mes
Academia BH
Google
R$ 3.500/mes
Qualificacao8
Construtora BH
Demo Quinta
R$ 12.000/mes
SaaS FinTech
Aguardando doc
R$ 15.000/mes
Proposta6
Rede Clinicas RJ
Proposta enviada
R$ 22.000/mes
Imoveis Premium SP
Negociando escopo
R$ 9.000/mes
Negociacao4
Grupo Educacional MG
Aguardando CEO
R$ 35.000/mes
Fechado11
Su Cavalli
Ativo 8 meses
R$ 7.200/mes
Vet Saude
Ativo 5 meses
R$ 5.800/mes