🔄 Editor de Fluxograma IA para Val.town

Este projeto é um editor de fluxogramas interativo com design glassmorphism que permite criar fluxogramas visuais através de arrastar e soltar, e convertê-los automaticamente em instruções estruturadas para agentes de IA. Desenvolvido especificamente para funcionar no Val.town como um HTTP val.

• Glassmorphism: Interface com transparência e efeitos de vidro
• Botões Elevados: Efeitos de elevação e animações suaves
• Gradientes Dinâmicos: Fundo animado com partículas flutuantes
• Responsivo: Compatível com desktop e mobile

• Arrastar e Soltar: Componentes da paleta para o canvas
• Edição Inline: Duplo-clique para editar nós
• Múltiplos Tipos: 7 tipos diferentes de nós especializados
• Subtipos: Cada tipo possui subtipos específicos

• IA Ready: Converte fluxogramas para instruções de IA
• Metadados: Estimativa de duração e complexidade
• Permissões: Detecta permissões necessárias automaticamente
• Dependências: Identifica bibliotecas e serviços necessários

1. Acesse Val.town
2. Crie um novo HTTP val
3. Copie o conteúdo do arquivo flowchart-editor-enhanced.ts
4. Cole no editor e salve
5. Acesse via URL gerada

import { FlowchartEditor } from "https://esm.town/v/seu-usuario/flowchart-editor-enhanced";

1. Adicionar Nós: Arraste da paleta ou use botões da toolbar
2. Posicionar: Arraste nós pelo canvas
3. Editar: Duplo-clique para editar texto e propriedades
4. Organizar: Use as ferramentas de alinhamento

1. Criar: Adicione pelo menos alguns nós
2. Converter: Clique em "🤖 Converter para IA"
3. Visualizar: Veja as instruções no painel
4. Exportar: Copie ou baixe as instruções

• Salvar: Ctrl/Cmd + S
• Exportar: Ctrl/Cmd + E
• Importar: Ctrl/Cmd + I
• Deletar: Delete/Backspace (nó selecionado)

{
  "agent_config": {
    "name": "FlowchartAgent",
    "description": "Agente de IA criado a partir de fluxograma visual",
    "version": "1.0"
  },
  "workflow": {
    "steps": [
      {
        "id": "step_1",
        "type": "initialization",
        "action": "initialize_agent",
        "name": "Início"
      },
      {
        "id": "step_2",
        "type": "user_input",
        "action": "collect_user_input",
        "name": "Entrada de dados",
        "parameters": {
          "input_type": "text",
          "prompt": "Digite sua entrada:",
          "required": true
        }
      }
    ],
    "conditions": [],
    "loops": []
  },
  "execution_metadata": {
    "estimated_duration": 10,
    "complexity_score": 5,
    "required_permissions": ["user_interaction"],
    "dependencies": []
  }
}

• initialize_agent: Inicialização do agente
• execute_task: Execução de tarefas
• evaluate_condition: Avaliação condicional
• collect_user_input: Coleta de entrada do usuário
• display_output: Exibição de resultados
• make_api_call: Chamadas para APIs
• database_operation: Operações de banco de dados
• iterate: Loops e iterações
• terminate_agent: Finalização do agente

• Duração: Baseada no número e tipo de steps
• Complexidade: Score de 1-10 baseado em estrutura
• Permissões: Extraídas dos tipos de ação
• Dependências: Bibliotecas necessárias

O editor usa um sistema de cores baseado em CSS custom properties:

:root {
  --primary-color: #667eea;
  --secondary-color: #764ba2;
  --accent-color: #f093fb;
  --glass-bg: rgba(255, 255, 255, 0.1);
  --glass-border: rgba(255, 255, 255, 0.2);
}

Para adicionar novos tipos de nó, edite a constante NODE_TYPES:

const NODE_TYPES = {
  // ... tipos existentes
  custom: {
    label: 'Personalizado',
    icon: '🔧',
    color: '#your-color',
    subtypes: ['subtipo1', 'subtipo2']
  }
};

• Conexões visuais entre nós
• Validação de fluxo
• Templates pré-definidos
• Colaboração em tempo real
• Integração com std/blob
• Exportação para múltiplos formatos

• Tutorial interativo
• Biblioteca de componentes
• Temas personalizáveis
• Zoom e pan no canvas
• Histórico undo/redo

flowchart-editor-enhanced.ts
├── Interfaces TypeScript
├── Constantes e Configurações
├── Funções Utilitárias
├── Lógica de Conversão
├── Componentes UI
├── Event Handlers
├── Estilos CSS
└── Função Principal HTTP

• Runtime: Deno (Val.town)
• Bibliotecas: Nenhuma dependência externa
• APIs: Web APIs padrão (DOM, Fetch, etc.)

• Documentação Val.town
• Discord Val.town
• Exemplos de Uso

1. Nós não aparecem: Verifique se o JavaScript está habilitado
2. Conversão falha: Certifique-se de ter pelo menos um nó
3. Layout quebrado: Teste em navegador atualizado

Este projeto é open source e está disponível sob a licença MIT. Sinta-se livre para usar, modificar e distribuir.

Contribuições são bem-vindas! Para contribuir:

1. Fork o projeto no Val.town
2. Faça suas modificações
3. Teste thoroughly
4. Compartilhe via pull request ou Discord

• Val.town Team: Pela plataforma incrível
• Comunidade: Pelo feedback e sugestões
• Glassmorphism: Inspiração de design

Desenvolvido com ❤️ para a comunidade Val.town

Versão 1.0 - Dezembro 2024